Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Adding Zebra Striping CSS to Webform Fields and Formatting the Emails It Sends

Parent Feed: 

Ever wanted to add alternating background colors (a.k.a. "zebra stripes") to your webform fields? I had a need to do this a couple of days ago and struggled to find a method for this. Little did I know that the webform module actually has a few template files included with it that you can use to override what's going on in the theme layer.

The particular thing I wanted to do was to add some CSS to the webform fields so that I could do some easy CSS zebra striping. I know this is super easy to do with the output of the Views module because of the "row-even" and "row-odd" CSS classes that are provided out of the box. I wanted to be able to do some similar CSS classes on my webform fields. Getting the job done requires taking the "webform-form.tpl.php" default template file in the Webform module directory and copying it to own your custom theme directory.

Here's the code I ended up using:

<?php
 
// If editing or viewing submissions, display the navigation at the top.
 
if (isset($form['submission_info']) || isset($form['navigation'])) {
    print
drupal_render($form['navigation']);
    print
drupal_render($form['submission_info']);
  }

 

// Print out the main part of the form.
  // Feel free to break this up and move the pieces within the array.
 
$counter = 0; // Keep track of the fields and how many are being displayed.
 
foreach ($form['submitted'] as $key => $value) {
    if (
substr($key, 0, 1) != '#') { // Only do this for the actual fields being displayed.
     
$counter ++;
      if (
$counter % 2) {
       
$even_odd = 'odd';
      }
      else {
       
$even_odd = 'even';
      }
     
// Tack a new even/odd div onto the beginning of the existing div around the form field.
     
$form['submitted'][$key]['#prefix'] = '<div class="row-' . $even_odd . '">' . $form['submitted'][$key]['#prefix'];
     
$form['submitted'][$key]['#suffix'] = $form['submitted'][$key]['#suffix'] . '</div>';
    }
  }
  print
drupal_render($form['submitted']);

 

// Always print out the entire $form. This renders the remaining pieces of the
  // form that haven't yet been rendered above.
 
print drupal_render($form);

 

// Print out the navigation again at the bottom.
 
if (isset($form['submission_info']) || isset($form['navigation'])) {
    unset(
$form['navigation']['#printed']);
    print
drupal_render($form['navigation']);
  }
?>

You should be able to see from the code above that I basically wrapped an extra div around each webform field that provides the "row-even" and "row-odd" CSS classes. You can then use your regular CSS methods to determine how the rows will display in the end. If you want to see everything that appears within the $form['submitted'] array, I recommend making sure you have the devel module installed and then try adding

dsm($form['submitted']);

...into this same template file. That will show you all of the elements that exist within the array provided by Webform.

While researching, I also discovered that you can use a webform template file, "webform-mail.tpl.php", to theme the output of the emails that Webform sends out. This is super handy to know, although I haven't made use of it as of yet. You can even theme the confirmation page using "webform-confirmation.tpl.php" if you're interested. If you're interested in learning more, just take a look at the "THEMING.txt" file that's included with the module and you'll find a lot of good information. Happy theming!

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web