Form Placeholder

Overview

Module creates possibility to quickly add (by UI) placeholders to all textfields in any form on site.

Video tutorial made by Hans Riemenschneider — How to use the Form Placeholder module.

Features

• Convert labels of single textfield or entire form to its placeholder.
  
• For old browsers not supporting HTML5 placeholder attribute uses jQuery Placeholder plugin by Mathias Bynens.
• Targeted textfields can be entered in textarea as CSS selectors.
• Convert form elements by classes.
  • form-placeholder-[include/exclude]-children
    Include/exclude all children of given class.
  • form-placeholder-[include/exclude]
    Include/exclude single element.
• Integration with Form API by #form_placeholder attribute to convert elements.
  

  // Convert all children in given form
  function MY_MODULE_form_FORM_ID_alter(&$form, &$form_state, $form_id) {
    $form['#form_placeholder'] = TRUE;
  }
  
  // Convert single form element
  function MY_MODULE_form_FORM_ID_alter(&$form, &$form_state, $form_id) {
    $form['my_element']['#form_placeholder'] = TRUE;
  }
  

Requirements

(Optional but recommended) Libraries module with jQuery Placeholder plugin if you want have fallback support for older browsers (i.e. IE 8 and older).

Installation and configuration

1. Install Form Placeholder (form_placeholder) module as usual.
2. Go to configuration page at "admin/config/user-interface/form-placeholder".
3. Specify CSS selectors for textfields you want to add a placeholder.
4. For older browsers not supporting "placeholder" attribute you have to:
   1. Install the Libraries module
   2. Download jQuery Placeholder plugin with one of following methods:
      

      Via Drush command:

      drush download-placeholder-library

      Using Drush Make:

      Example usage of makefile can be found in form_placeholder.make.example

      Manually:

      1. Download jQuery Placeholder plugin from https://github.com/mathiasbynens/jquery-placeholder
      2. Rename downloaded directory to "jquery.placeholder" and place it under "sites/all/libraries" so the file "sites/all/libraries/jquery.placeholder/jquery.placeholder.js" will be accessible

Credits

• This project has been sponsored by e-direct.
• Idea by Justyna Kowalska.

Similar projects

• Placeholder
• Compact Forms
• Field placeholder
• jQuery Placeholder
• Webform Hints