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?

Answer 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

Answer 2

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...

Answer 3

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>';    
}