Remove <div class=“form-item”> around form items

Question

I want to use as much as I can from http://twitter.github.com/bootstrap/base-css.html#forms for my theme, and as part of this I really want to get rid of the <div class="form-item"> that is being wrapped around each <input> element.

As far as I can tell the only way to do this is by copying the entire http://api.drupal.org/api/drupal/includes!form.inc/function/theme_form_element/7 theme_form_element() function and remove the code that produces the <div> wrapper.

Is this really the only way?

Answer 1

Yes. These classes are hardcoded into Drupal and are not only used for visible styling but also for the jQuery code that "animates" the forms (validation, autofill, auto focus, etc.)

HTML elements can have multiple classes. You could just add the classes to the Drupal form and then create your own theme. By creating your own theme you could not theme the default Drupal classes and instead just theme the classes from Base CSS.

Answer 2

I found that just adding:

'#theme_wrappers' => array(),

to the form item removed the DIVs.

Answer 3

1. Implement hook_theme

/**
 * Implements hook_theme().
 */
 function mytheme_theme($existing, $type, $theme, $path)
 {
     return array(
         'mywrapper' => array(
             'render element'  => 'element',
         ),
     );
 }

2. Alter the form using hook (or wherever you're accessing the form)

 /**
  * Implements hook_form_FORMID_alter().
  */
 function mytheme_form_formid_alter(&$form, &$form_state)
 {
      // You could wrap the element using this 
      $form['quantity']['#prefix'] = 'div class="custom_class_outer">';
      $form['quantity']['#suffix'] = '/div>';

      // And clear the other wrappers
      $form['quantity']['#theme_wrappers'] = array();

      // Or we could use wrapper
      $form['quantity']['#theme_wrappers'] = array('mywrapper');
 }

3. Implement wrapping function

 /**
  * Theme wrapper
  */
 function mytheme_mywrapper(&$vars)
 {
     return 'div class="custom_class_inner">' .
           $vars['element']['#children'] . '/div>';
 }

4. drush cc all