Settings form

Overview

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

Video tutorial made by Hans RiemenschneiderHow to use the Form Placeholder module.

Features

  • Convert labels of single textfield or entire form to its placeholder.
    Module in action
  • 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

Supporting organizations: 
Initial development and support.

Project Information

Downloads