Skip to content

Instantly share code, notes, and snippets.

@graceman9
Last active August 29, 2015 14:05
Show Gist options
  • Save graceman9/269c06cb662623f6f309 to your computer and use it in GitHub Desktop.
Save graceman9/269c06cb662623f6f309 to your computer and use it in GitHub Desktop.
Drupal 7: How to completely theme form (or webform)
<?php
require_once 'template.theme_webform.inc';
/**
* Implements hook_preprocess_HOOK(), form.
*/
function web_preprocess_webform_form(&$variables) {
if ($variables['form']['#form_id'] == 'webform_client_form_72') {
$form = &$variables['form'];
$variables['myform'] = new stdClass;
$variables['myform']->name_title = $form['submitted']['name']['#title'];
$variables['myform']->name_description = $form['submitted']['name']['#description'];
$variables['myform']->email_title = $form['submitted']['email']['#title'];
$variables['myform']->email_description = $form['submitted']['email']['#description'];
$variables['myform']->message_title = $form['submitted']['message']['#title'];
$variables['myform']->message_description = $form['submitted']['message']['#description'];
}
}
/**
* Implements hook_form_alter().
*/
function web_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'webform_client_form_72') {
$form['#attributes']['class'][] = 'met_form';
$form['#attributes']['class'][] = 'met_contact_form';
$form['submitted']['name']['#attributes']['class'][] = 'met_half_input';
$form['submitted']['name']['#attributes']['class'][] = 'met_no_input_margin';
$form['submitted']['name']['#attributes']['class'][] = 'met_input_text';
$form['submitted']['email']['#attributes']['class'][] = 'met_half_input';
$form['submitted']['email']['#attributes']['class'][] = 'met_input_text';
$form['submitted']['message']['#attributes']['class'][] = 'met_full_input';
$form['submitted']['message']['#attributes']['class'][] = 'met_input_text';
$form['submitted']['message']['#attributes']['class'][] = 'met_textarea';
$form['actions']['submit']['#theme_wrappers'] = array('webform_client_form_72_button');
}
}
/**
* Implements hook_theme().
*/
function web_theme($existing, $type, $theme, $path) {
return array(
'webform_client_form_72_button' => array(
'render element' => 'element',
),
);
}
/**
* Returns HTML for a button form element.
*
* Override.
*/
function web_webform_client_form_72_button($variables) {
$element = $variables['element'];
$element['#attributes']['type'] = 'submit';
element_set_attributes($element, array('id', 'name', 'value'));
$element['#attributes']['class'][] = 'form-' . $element['#button_type'];
// changes: add classes
$element['#attributes']['class'][] = 'btn';
$element['#attributes']['class'][] = 'btn-primary';
$element['#attributes']['class'][] = 'btn-xs';
if (!empty($element['#attributes']['disabled'])) {
$element['#attributes']['class'][] = 'form-button-disabled';
}
// changes: change <input/> to <button> $element['#value'] </button>
return '<button' . drupal_attributes($element['#attributes']) . '>'. $element['#value'] .'</button>';
}
<?php
/**
* Replacement for theme_form_element().
*
* Override.
* Changes: just return $element['#children'];
*/
function web_webform_element($variables) {
// Ensure defaults.
$variables['element'] += array(
'#title_display' => 'before',
);
$element = $variables['element'];
// return only #children
$output = '';
$output .= $element['#children'];
return $output;
// All elements using this for display only are given the "display" type.
if (isset($element['#format']) && $element['#format'] == 'html') {
$type = 'display';
}
else {
$type = (isset($element['#type']) && !in_array($element['#type'], array('markup', 'textfield', 'webform_email', 'webform_number'))) ? $element['#type'] : $element['#webform_component']['type'];
}
// Convert the parents array into a string, excluding the "submitted" wrapper.
$nested_level = $element['#parents'][0] == 'submitted' ? 1 : 0;
$parents = str_replace('_', '-', implode('--', array_slice($element['#parents'], $nested_level)));
$wrapper_classes = array(
'form-item',
'webform-component',
'webform-component-' . $type,
);
if (isset($element['#title_display']) && strcmp($element['#title_display'], 'inline') === 0) {
$wrapper_classes[] = 'webform-container-inline';
}
$output = '<div class="' . implode(' ', $wrapper_classes) . '" id="webform-component-' . $parents . '">' . "\n";
// If #title is not set, we don't display any label or required marker.
if (!isset($element['#title'])) {
$element['#title_display'] = 'none';
}
$prefix = isset($element['#field_prefix']) ? '<span class="field-prefix">' . _webform_filter_xss($element['#field_prefix']) . '</span> ' : '';
$suffix = isset($element['#field_suffix']) ? ' <span class="field-suffix">' . _webform_filter_xss($element['#field_suffix']) . '</span>' : '';
switch ($element['#title_display']) {
case 'inline':
case 'before':
case 'invisible':
$output .= ' ' . theme('form_element_label', $variables);
$output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
break;
case 'after':
$output .= ' ' . $prefix . $element['#children'] . $suffix;
$output .= ' ' . theme('form_element_label', $variables) . "\n";
break;
case 'none':
case 'attribute':
// Output no label and no required marker, only the children.
$output .= ' ' . $prefix . $element['#children'] . $suffix . "\n";
break;
}
if (!empty($element['#description'])) {
$output .= ' <div class="description">' . $element['#description'] . "</div>\n";
}
$output .= "</div>\n";
return $output;
}
<?php
/**
* @file
* Customize the display of a complete webform.
*
* @see web_preprocess_form() in template.php
*/
?>
<div class="met_half_input met_no_input_margin met_input_header">
<h4><?php print $myform->name_title; ?></h4>
<span class="met_color"><?php print $myform->name_description; ?></span>
</div>
<div class="met_half_input met_input_header">
<h4><?php print $myform->email_title; ?></h4>
<span class="met_color"><?php print $myform->email_description; ?></span>
</div>
<?php print drupal_render($form['submitted']['name']); ?>
<?php print drupal_render($form['submitted']['email']); ?>
<div class="met_half_input met_no_input_margin met_input_header">
<h4><?php print $myform->message_title; ?></h4>
<span class="met_color"><?php print $myform->message_description; ?></span>
</div>
<?php print drupal_render($form['submitted']['message']); ?>
<div class="met_contact_thank_you">TODO: We received your message!</div>
<?php print drupal_render_children($form); ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment