Webform: how to wrap each form field with a div?

Question

Due to a design request, I need to add a DIV around each textfield/select field in my webform.

Since a webform is, both, a form and a node, I'm struggling to figure out how to do that.

In a normal form, I would use the hook_form_alter() and use the #prefix and #suffix attributes to add extra markup, but when printing out the webform in the hook to see the structure of the fields I can't see how to target each field.

Any help will be greatly appreciated!

Thanks.

Answer 1

You're correct in thinking to use the #prefix and #suffix attributes. Webform components are stored in the 'submitted' part of the form array. To add a surrounding div to each textfield and select, you can do the following in hook_form_alter:

if ($form_id == 'webform_client_my_form_id') {
  foreach($form['submitted'] as &$field) {
    if($field['#type'] == 'textfield' || $field['#type'] == 'select') {
        $field['#prefix'] = '<div class="my-div">';
        $field['#suffix'] = '</div>';
    }
  }
}

To find out your form id, you can add a watchdog statement:

watchdog('My Module', "Form Id: $form_id");

Then check the dblog at /admin/reports/dblog.

This link may also be helpful: https://drupal.org/node/1558246

Answer 2

Alternative to Form Hook, you can use the webform-form-{form-id}.tpl.php template file to accommodate your changes.

For Example,

$form['submitted']['name']['#prefix'] = '<div class="form-group">';
$form['submitted']['name']['#suffix'] = '</div>';
$form['submitted']['name']['#attributes']['class'][] = 'form-control snow_form_control';

Like above you can add the required class or wrappers. Hope this helps.