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!


2 Answers 2


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


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.

  • I don't have 'submitted' attribute
    – Shark Deng
    Feb 26, 2023 at 21:30
  • Try printing out the $form variable and check where the field (name) is at.
    – Harish ST
    Feb 27, 2023 at 5:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.