How to add placeholder text to forms in Drupal 7

With the advent of HTML5 few years ago, the possibility to add placeholder has appeared

The placeholder text is displayed in a text field on a form before the user complete, it’s very useful since it clarify what information must be entered in this field.

For example, the HTML code:

<form>
<label for="search">Subscribe to the newsletter</label>
<input id="news" type="text" placeholder="Enter your email" name="seach">
<button id="subscribebutton" type="submit">Send</button>
</form>

It show something like this

Adding placeholders to the forms is a good practice that improves usability and of course the user experience.

The W3C recommends using the placeholder always with the Label that, since they are supposedly complementary, but in Wild Wild Web, we often use only one of the two, since using both will be redundant.

Support for placeholder will only be visible in most modern web browsers but usually a jquery fallback is implemented for the same functionality in older browsers.

There are several ways to add a placeholder to a field on a form in Drupal 7. Below we highlight 4 which we consider the most useful.

Form module Placeholder

https://www.drupal.org/project/form_placeholder

This module allows us to add placeholders to any form of the site from the Drupal administration.

Hints Webform module

https://www.drupal.org/project/webform_hints

This module allows automatic placeholders to incorporate any textfield, testarea, select list and email field forms created with the webform module (https://www.drupal.org/project/webform)

This module also comes with support for older browsers that do not support the placeholder attribute will and implement the fallback using jQuery.

Field placeholder module

https://www.drupal.org/project/field_placeholder

It allows you to add the placeholder attribute to any field of a drupal entity, as fields of a content type, terms of taxonomy, user, etc. When activated, it displays a new option to enter the placeholder when you edit or create a field.

Function in the template.php

Finally the more advanced technical approach that involves all code but it’s the most powerful of all. It is about adding the following function to template.php file from our theme.

function YOURTHEMENAME_form_alter( &$form, &$form_state, $form_id )
{
    if (in_array( $form_id, array( 'user_login', 'user_login_block')))
    {
        $form['name']['#attributes']['placeholder'] = t( 'Username' );
        $form['pass']['#attributes']['placeholder'] = t( 'Password' );
    }
}

This case introduces a placeholder for the login form.

Remember to change the name of the function YOURTHEMENAME by the name of your theme, and change the id of the form and name of the field you want to make the change.

Learn how to get the id of a form.