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

Mark Jarrell's picture
Submitted by Mark Jarrell on Sun, 03/28/2010 - 19:35

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!

Commenting on this Blog entry is closed.

Tags:

Comments

Wed, 04/21/2010 - 11:52 — LED Beacon Fire Alarm (not verified)

Beacon

Nicely written and informative. I'll look out for more of your posts in the future!

Sat, 04/03/2010 - 11:57 — cna training (not verified)

thanks for the post

found your site on del.icio.us today and really liked it.. i bookmarked it and will be back to check it out some more later