A client recently asked if form labels can be displayed within a form element. More specifically, they wanted the field labels on the user login and registration page to be placed inside of the field or overlaid.
This can easily be achieved using JavaScript or a jQuery plugin. Seeing as the site was built using Drupal, I went in search for a module to do the trick and found two modules: Compact Forms and In Field Labels.
In this article I’ll show you how to implement both modules and it should help you decide which one to use.
Compact Forms
This module is the most popular of the two because it’s been around the longest. Installing the module is easy, simply download and install and you’re good to go. The module doesn’t require any 3rd party plugins or libraries because it implements its own JavaScript.
Once you install the module, go to Configuration -> “Compact Forms” to configure it.
By default the module only compacts the User login block which is assigned to the “Sidebar first” region.
Let’s say for example you want to compact the register page (/user/login), then add the form ID (user-register-form) to the “Form CSS IDs” textarea.
In Field Labels
This module is the newest of the two and uses the In-Field Labels jQuery plugin. The plugin ships with the module so you do not have to download it separately. Installation of the module is simple, just download and install.
Once you install the module, go to Configuration -> “In Field Labels” to configure the module. This module works the same way as Compact Forms, just add the form ID for the form you want to compact into the “Enabled forms” textarea.
So which module should you use? Well that’s really up to you. The Compact Forms module allows you to configure more than just the label. For example, you can remove the required field marker (star) and you can hide the field description. Whereas the In Field Labels module just places labels inside fields.
If you have any questions, please leave a comment.
I think I used Compact forms once and as I remember when you click in the field, the label will be hidden. However –as the demo shows– the In Field Labels just pales the text till you start to write. It is a plus for the latter if I am right.
By the way the module links are broken in your article…
Thanks for the tips! 🙂
Thanks, the links have been fixed.
Also worth to mention the Elements module (https://drupal.org/project/elements) and the others that are listed on the project page of Elements cause with this (/ these) you can use the HTML5 placeholder attribute.
Thanks, I’ll check out the Elements module. Looks interesting.
Here is another way of doing it without involving jquery http://qandeelaslam.com/blogs/drupal/how-get-field-labels-drupal-7
A far better approach is to tell your client that it can’t be done – on the grounds of abysmal usability, damaging conversions (there’s plenty of freely available data to demonstrate that).
Text (either labels or hints) should never go inside fields. It’s a lose lose situation. Start typing, and you lose the previously helpful information. There’s also no colour that you can use for it. Make the text dark, and people skip over it without reading the text, thinking it is filled in. Make the text light enough to avoid that happening, and you run into contrast/legibility issues, including failing WCAG AA.
Makes sense, thanks.