Using HTML 5 Inputs in Drupal 7 Through Theming

I'm putting together a feedback form for a client today in Drupal. I've been experimenting with ways to improve the form's efficiency, just general UX. One of the sticking points for me was the complete lack of simple support for HTML 5 input types in Drupal 7. Thankfully this is fixed in Drupal 8. But for those of us needing to work today, here's an easy solution.

The most 'helpful' solution I found before going rogue was on stack overflow. Except it really doesn't work as advertised, and even if it did, you add a module dependency. No dice. First, understand that Drupal itself is pretty stuck on its item types. You could introduce a new type, but it's quite a bit of work, and you run the risk of module conflicts. It's far safer to simply use the theming layer to handle your one off requirements as they come up. If you're using this a lot, it might not be the best solution, but it is fast.

Start with your standard form callback, and add a '#theme' property to your field.

  1. /**
  2.  * @param $form
  3.  * @param $form_state
  4.  * @return array
  5.  */
  6. function custom_form($form, &$form_state){
  7.   ...
  8.  
  9.   $form['email'] = array(
  10.     '#type' => 'textfield',
  11.     '#title' => t('Email'),
  12.     '#required' => TRUE,
  13.     '#attributes' => array(
  14.       'placeholder' => t('Enter your email.'),
  15.     ),
  16.     '#theme' => 'custom_email_input' // This will route to our customization below
  17.   );
  18.  
  19.   ...
  20.   return $form;
  21. }

Implement hook theme in custom.module:

  1. /**
  2.  * Implements hook_theme
  3.  */
  4. function pw_feedback_theme(){
  5.   return array(
  6.     'custom_email_input' => array(
  7.       'render element' => 'element',
  8.       'file' => 'custom.theme.inc',
  9.     ),
  10.   );
  11. }

Implement the theme callback in custom.theme.inc:

  1. /**
  2.  * Returns HTML for a textfield form element of type email.
  3.  *
  4.  * @param $variables
  5.  *   An associative array containing:
  6.  *   - element: An associative array containing the properties of the element.
  7.  *     Properties used: #title, #value, #description, #size, #maxlength,
  8.  *     #required, #attributes, #autocomplete_path.
  9.  *
  10.  * @ingroup themeable
  11.  * @see theme_textfield
  12.  */
  13. function theme_custom_email_input($variables){
  14.   // Force the core handling of the element
  15.   $output = theme_textfield($variables);
  16.  
  17.   // Upgrade to the email type
  18.   $output = str_replace('type="text"', 'type="email"', $output);
  19.  
  20.   return $output;
  21. }

This won't give you the upgraded validation automatically. It's easy to add that, but not in the scope of this little post. Check out the #element_validate property for details.

Tags: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.