Drupal webform bootstrap theme

UPDATE: Please be advised the following code may not work with the latest upgrade of Bootstrap base theme and latest Webform module.

The Drupal Bootstrap base theme is awesome in every way, however if you want to extend it so it applies to webforms as well there are some modification you need to make in your own child theme.

Drupal webform Bootstrap theme

If you are already using bootstrap base theme for Drupal, there are basically two things you need to do in your child theme:

1. Create a new webform template
2. Make sure bootstrap base theme processes the webform elements

1.  Create the webform-form.tpl.php template file in your child theme and add the following code

<?php
    /**
    * @file
    * Customize the display of a complete webform.
    *
    * This file may be renamed "webform-form-[nid].tpl.php" to target a specific
    * webform on your site. Or you can leave it "webform-form.tpl.php" to affect
    * all webforms on your site.
    *
    * Available variables:
    * - $form: The complete form array.
    * - $nid: The node ID of the Webform.
    *
    * The $form array contains two main pieces:
    * - $form['submitted']: The main content of the user-created form.
    * - $form['details']: Internal information stored by Webform.
    */
    // Print out the main part of the form.
    // Feel free to break this up and move the pieces within the array.

    // Always print out the entire $form. This renders the remaining pieces of the
    // form that haven't yet been rendered above.

    foreach($form['submitted'] as $key=>$value){
    if(substr($key, 0, 1)<>'#'){
    $prefix = '<div class="form-group">';
    $prefix .= '<label for="edit-submitted-'.$key.'" class="col-sm-3 control-label text-right">'.$value['#title'].'</label>';
    $prefix .= '<div class="col-sm-9 control-label">';

    $suffix = '</div></div>';

    $form['submitted'][$key]['#prefix'] = $prefix;
    $form['submitted'][$key]['#suffix'] = $suffix;
    unset($form['submitted'][$key]['#title']);
    }

    }

    print drupal_render($form['submitted']);
    print drupal_render_children($form);

2.  Implement hook_element_info_alter() in your theme the following way, basically overriding the base bootstrap theme one.

• Provide a custom function to process the elements _custom_bootstrap_process_input
• Define the _custom_bootstrap_process_input so that it includes webform_email

Adding the following lines to YOUR CHILD THEME’s template.php will do the trick.

/**
 * Implements hook_element_info_alter().
 */
function YOURTHEME_element_info_alter(&$elements) {
  foreach ($elements as &$element) {
    // Process all elements.
    $element['#process'][] = '_bootstrap_process_element';
    // Process input elements.
    if (!empty($element['#input'])) {
      $element['#process'][] = '_custom_bootstrap_process_input'; // we provide our own custom function
    }
    // Process core's fieldset element.
    if (!empty($element['#type']) && $element['#type'] === 'fieldset') {
      $element['#theme_wrappers'] = array('bootstrap_panel');
    }
    if (!empty($element['#theme']) && $element['#theme'] === 'fieldset') {
      $element['#theme'] = 'bootstrap_panel';
    }
    // Replace #process function.
    if (!empty($element['#process']) && ($key = array_search('form_process_fieldset', $element['#process'])) !== FALSE) {
      $element['#process'][$key] = '_bootstrap_process_fieldset';
    }
    // Replace #pre_render function.
    if (!empty($element['#pre_render']) && ($key = array_search('form_pre_render_fieldset', $element['#pre_render'])) !== FALSE) {
      $element['#pre_render'][$key] = '_bootstrap_pre_render_fieldset';
    }
    // Replace #theme_wrappers function.
    if (!empty($element['#theme_wrappers']) && ($key = array_search('fieldset', $element['#theme_wrappers'])) !== FALSE) {
      $element['#theme_wrappers'][$key] = 'bootstrap_panel';
    }
  }
}



/**
 * Process input elements.
 */
function _custom_bootstrap_process_input(&$element, &$form_state) {
  // Only add the "form-control" class for specific element input types.
  $types = array(
    // Core.
    'password',
    'password_confirm',
    'select',
    'textarea',
    'textfield',
    // Elements module.
    'emailfield',
    'numberfield',
    'rangefield',
    'searchfield',
    'telfield',
    'urlfield',

    'webform_email',  // added email fields 

  );
  if (!empty($element['#type']) && (in_array($element['#type'], $types) || ($element['#type'] === 'file' && empty($element['#managed_file'])))) {
    $element['#attributes']['class'][] = 'form-control';
  }
  return $element;
}

Cheers!