Upgrade Your Drupal Skills
We trained 1,000+ Drupal Developers over the last decade.
See Advanced Courses NAH, I know EnoughAdding Zebra Striping CSS to Webform Fields and Formatting the Emails It Sends
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!
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