Theming webforms - a how-to using two methods

I wrote this as I felt that the instructions for theming webforms was a little vague and confusing. It might just have been me, but maybe this will help someone else - I can't be the only confused person out there....can I? :) So here goes....

We can use theming to add CSS id's and classes to webforms. There are two methods available, each have their own advantages.

Method 1

Pros:

can create new fieldsets easily without re-doing the webform

can add any html code you before and after the fieldsets

Cons:

two files to edit

Add the following code to your template.php file to redirect processing to your own template file:

//change the number here '123' to the id number of your webform
function phptemplate_webform_form_123 ($form) {
  return _phptemplate_callback('webform_form_123', array('form' => $form));
}

Then create the file you mentioned in the callback statement above. In this case its called webform_form_123.tpl.php. Now you can create fieldsets and add your own CSS id's or classes to them, using the prefix and suffix attributes to add a new div (you can put anything you want here):

$form['submitted']['fluentin'] = array(
	'#type' => 'fieldset',
	'#prefix' => '<div id="vol-fluentin">',
	'#suffix' => '</div>',
	'#weight' => -1,
);

$form['submitted']['otherlang'] = array(
	'#type' => 'fieldset',
	'#prefix' => '<div id="vol-otherlang">',
	'#suffix' => '</div>',
	'#weight' => 0,
);

// Move the form field labeled "whatever" to the new fieldset
// $form['submitted']['newfieldset']['whatever'] = $form['submitted']['whatever'];

$form['submitted']['fluentin']['Fluent in'] = $form['submitted']['Fluent in'];
unset($form['submitted']['Fluent in']);
$form['submitted']['otherlang']['Please specify other languages'] = $form['submitted']['Please specify other languages'];
unset($form['submitted']['Please specify other languages']);

echo form_render($form);

The important thing here is to remember to unset the original form field, otherwise it will appear twice - once within the new fieldset and once in its original position. By creating the new div's you can then style these form item specifically.

The new version of webform now has the ability to creat fieldsets and place form items within them. However, there is no option to add an id or class to these fieldsets. Hence the above technique.

Method 2

Pros:

single file to edit

simple coding to change form item attributes eg #id

Cons:

can't create new fieldsets or add html code before or after

I recently discovered another way to add a CSS id to a specific form item using only template.php. This technique only modifies form items that already exist and does not create new fieldsets etc. So, add the following code to template.php:

function phptemplate_webform_form_50 ($form) {
  $form['submitted']['First Name']['#id'] = 'edit-submitted-first-name';
  $form['submitted']['Last Name']['#id'] = 'edit-submitted-last-name';
  $form['submitted']['Fluent in']['#id'] = 'edit-submitted-fluency';
  return _phptemplate_callback('webform_form_50', array('form' => $form));
}

This code changes the #id attribute to the text specified after the = sign, for whichever form item you want.

NOTE! When you are using the above two methods make sure that you escape any apostrophe's that appear in the field's name.

For example, you create a checkbox field called Bureau d'inscription. Using either method, the bit before the equals sign should be written as follows:

$form['submitted']['Bureau d\'inscription']....

Take note of the backslash within the name. If you don't do it, you're statement becomes invalid and doesn't execute. At worst it could invalidate all proceeding statements too.

Well, I hope someone finds this useful - otherwise I just wasted the last 30 minutes typing instead of sleeping :) Actually, it wasn't a total waste for me - its helped me organize my methods to theme webforms. And that escaping apostrophe thing is gold for those of us who create french webforms.