Drupal - Surround specific webform elements with a div

Question

as the title describes, I am to style a webform and for that i need to surround specific fields in divs in order to give them their CSS properties and I have no idea how I should go about doing that.

I've caught the form with hook_form_alter but no idea what to do after.

Any help?

You may have more luck posting this question to the link below as it is specifically for drupal :) http://drupal.stackexchange.com/ — Undefined, Jan 16 '12 at 09:33
late to the party but isn't there any existing classes you can use to scope your styling. Furthermore, depending on your version of drupal/webform you can add wrapper classes in the admin area. — Kiee, Apr 22 '16 at 09:59

SpaceBeers · Accepted Answer · 2012-01-16T12:58:35.507

1

In your themes template.php file you need to get the forms ID and then you can do something like the following:

function phptemplate_webform_form_FORM_ID ($form) {
  $form['#prefix'] = '<div class="CLASS NAME">';
  $form['#suffix'] = '</div>';
  return _phptemplate_callback('webform_form_FORM_ID', array('form' => $form));
}

Replace FORM_ID with your form's ID.

EDIT

To add them for specific fields just do (something like) this:

$form['ELEMENT_NAME']['#prefix'] = '<div class="CLASS NAME">';
$form['ELEMENT_NAME']['#suffix'] = '</div>';

I've not got time to test it but replace ELEMENT_NAME with the element and that should solve your problem. There's a good page on it here - http://drupal.org/node/79086

edited Jan 16 '12 at 12:58

answered Jan 16 '12 at 10:08

SpaceBeers

13,617
6
47
61

yeah that *should* (didn't try it) add a div surrounding the form itself. But what i want to do is add divs surrounding specific fields in the form and also the submit button. – magtak Jan 16 '12 at 10:59
That wouldn't do it either as it would surround a specific element with a div whereas what I need is :
field1,2,3,4,5

field6,7,8,9,10>
but anyway, not to bother you anymore, the Fieldset component works just fine. Ended up using that instead. Thanks a lot though! – magtak Jan 16 '12 at 11:46
Ah I see. In that case I'd say go with Fieldset but you beat me to it. – SpaceBeers Jan 16 '12 at 11:49
1

Those should be `#prefix` and `#suffix`, otherwise Drupal will try to render them as an element not a property – Clive Jan 16 '12 at 12:55
Thanks Clive. I thought that might be the case. Edited to show this. – SpaceBeers Jan 16 '12 at 12:58

score 0 · Answer 2 · answered Sep 19 '14 at 10:41

You can use #field_prefix and #field_suffix to wrap field with any HTML element. See example below:

    function auworks_form_alter(&$form, $form_state, $form_id) {
      switch($form_id) {
        case 'webform_client_form_1':
          $form['submitted']['title']['#field_suffix'] = '<span class="field-suffix">#</span>';
          break;
      }
    }

Let me know how you go...

cptstarling · Answer 3 · 2016-01-27T12:37:32.890

Additionally: in case you want to add containing div's to the submit button of the webform, here's a hook which will help you out:

function YOURTHEMENAME_form_alter(&$form, &$form_state, $form_id) {

    if ($form['#form_id'] === 'webform_client_form_YOURWEBFORMID') {
        $form_structure = &$form['submitted'];

        $form['actions']['submit']['#prefix'] = '<div class="extra_div">';
        $form['actions']['submit']['#suffix'] = '</div>';
    }

}

If you want to apply this to all webforms, you just leave the conditional away, like this:

function YOURTHEMENAME_form_alter(&$form, &$form_state, $form_id) {

    $form_structure = &$form['submitted'];

    $form['actions']['submit']['#prefix'] = '<div class="extra_div">';
    $form['actions']['submit']['#suffix'] = '</div>';    
}

Drupal - Surround specific webform elements with a div

3 Answers3