Placeholders for Drupal Webforms with jQuery

UPDATE: Drupal’s Webform module has since added placeholder support, but the below still holds true… Also, the code in the demo is cleaner because I moved it to CodePen 5 years after writing this article.

---

If you’re collecting simple data from users in Drupal, like from a contact form, chances are you’re using the Webform module. The Webform module is a great way to collect this information, but it doesn’t generate the prettiest forms.

Furthermore, support for HTML5 form features, like the placeholder attribute, are currently lacking. To solve this problem, I decided to call on jQuery, which you’re probably already using and comes bundled with Drupal.

The Objective

What we ultimately want to accomplish is placing the field label in the field as the placeholder attribute text. We will then remove the label from view for the sake of reducing redundancy.

Finally, we’ll implement a check to see whether the browser supports the placeholder attribute and only run the function if it does. While our code will easily be changed to suit each project, we’ll look at turning all of this code into a jQuery plugin in a future lesson.

See the Demo

Getting Started

I’ll assume at this point that you already have a form in place. I’ll be adding screenshots through the course of this tutorial using the form created for the demo.

Styled, but unscripted Drupal Webform that will get placeholders.

First we’ll set up a couple of variables that will allow us to reuse this code for future projects. The first variable, phForms, will be the form(s) that you want to target. I’ve used form here, but you’ll want to be more specific and use a comma-separated list of Webform IDs (eg: #webform-1, #webform-2).

The second variable, phFields, will simply be a list of the types of fields we want to target. I’ve included the three most likely to require placeholders, so you don’t need to change this line.

jQuery

var phForms = $('form'),
    phFields = 'input[type=text], input[type=email], textarea';

Next we’ll loop through the form fields and do the following, in order:

• find the label that is within the same webform .form-item div as the field
• grab the label text
• set the label text as the field’s placeholder attribute
• hide the label from view

We’ll set variables for each piece so that we can easily refer to them throughout the function without having to repeat ourselves. I’ll make the assumption that you have a basic understanding of jQuery, but I’ve commented each line for a clearer understanding of what’s happening.

jQuery

function lbl2ph(){ // function that contains our code

phForms.find(phFields).each(function(){ // loop through each field in the specified form(s)

var el = $(this), // field that is next in line
    wrapper = el.parents('.form-item'), // parent .form-item div
    lbl = wrapper.find('label'), // label contained in the wrapper
    lblText = lbl.text(); // the label's text

// add label text to field's placeholder attribute
el.attr("placeholder",lblText);

// hide original label
lbl.hide();

});

}

jQuery(function($){
    lbl2ph(); // initiate function
});

What you should have is a webform with placeholder text in each field and labels that have disappeared.

Drupal Webform, styled and with placeholder attributes.

In the next step, we’ll look at making sure this only happens if the browser supports the placeholder attribute, otherwise your user will be left with blank fields and no labels – a user experience (UX) no-no!

Browser Support for the Placeholder Attribute with Modernizr

If the browser your user is visiting with doesn’t play nice with the placeholder attribute, we’ll want to make sure that this function doesn’t run. (For a complete list, check out Wufoo’s Current State of HTML5 Forms page.)

We don’t want to target each browser ourselves, though, so we’re going to leverage the Modernizr module/jQuery plugin to determine compatibility. Install the Modernizr module (don’t forget to create and save your custom modernizr.js file and upload it, too). Then all we have to do is add a simple “if statement” to our initialization line in our javascript.

jQuery

jQuery(function($){
    if (Modernizr.input.placeholder) {
        lbl2ph();
    }
});

Wrapup

At this point, you should have a fully functioning Drupal webform with placeholders. Congratulations! In a future lesson, we’ll tackle turning this into a jQuery plugin so we don’t have to do so much work each time! Here is the final code for the entire setup:

jQuery Final Code

var phForms = $('form'),
    phFields = 'input[type=text], input[type=email], textarea';

function lbl2ph(){ // function containing our code
    phForms.find(phFields).each(function(){ // loop through each field in the specified form(s)

    var el = $(this), // field that is next in line
        wrapper = el.parents('.form-item'), // parent .form-item div
        lbl = wrapper.find('label'), // label contained in the wrapper
        lblText = lbl.text(); // the label's text

    // add label text to field's placeholder attribute
    el.attr("placeholder",lblText);

    // hide original label
    lbl.hide();

    });

}

jQuery(function($){
    if (Modernizr.input.placeholder) { // check for placeholder support
        lbl2ph(); // initiate function
    }
});