webform generated each form component in this structure


I like to add a div class on each input element

  <div class="xxxx"><input></input></div>

I looked into the form alter to alter form element with #field_prefix and #field_suffix

$form['submitted']['chinese_name']['#field_prefix'] = '<div class="abc">';
$form['submitted']['chinese_name']['#field_suffix'] = '</div>';

but it didn't work.


You are using the incorrect keyword, the correct way to add a prefix to the webform field is:

$form['submitted']['chinese_name']['#prefix'] = '<div class="abc">';
$form['submitted']['chinese_name']['#suffix'] = '</div>';

Prefix and suffix will add wrapper element to whole form element, to add class to certain fields you can next thing.

For textfield you can do next find, go to includes/form.inc and find function theme_textfield copy it to your template.php and rename to yourtheme_textfield its look like this:

function theme_textfield($variables) {
  $element = $variables['element'];
  $element['#attributes']['type'] = 'text';
  element_set_attributes($element, array('id', 'name', 'value', 'size', 'maxlength'));
  _form_set_class($element, array('form-text'));

  $extra = '';
  if ($element['#autocomplete_path'] && drupal_valid_path($element['#autocomplete_path'])) {
    drupal_add_library('system', 'drupal.autocomplete');
    $element['#attributes']['class'][] = 'form-autocomplete';

    $attributes = array();
    $attributes['type'] = 'hidden';
    $attributes['id'] = $element['#attributes']['id'] . '-autocomplete';
    $attributes['value'] = url($element['#autocomplete_path'], array('absolute' => TRUE));
    $attributes['disabled'] = 'disabled';
    $attributes['class'][] = 'autocomplete';
    $extra = '<input' . drupal_attributes($attributes) . ' />';

  $output = '<input' . drupal_attributes($element['#attributes']) . ' />';

  //This will add div element with class SOME_CLASS
  $output = '<div class="SOME_CLASS">' . $output . '</div>';

  return $output . $extra;

As you can see you can do what you want. Here for example i added <div class="SOME_CLASS"><input></input></div>.

If you need this class for different form elements find theme_form_element($variables) in form.inc copy it to your template.php and rename to yourtheme_form_element and do whatever you want. This works for drupal7.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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