Last active
August 29, 2015 14:05
-
-
Save graceman9/269c06cb662623f6f309 to your computer and use it in GitHub Desktop.
Drupal 7: How to completely theme form (or webform)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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>'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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