July 7, 2012
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