How to Display Labels in Form Elements with Compact Forms and In Field Labels

By: Ivan Zugec

Modules:

Transcript:

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 video, I'll show you how to implement both modules and it should help you decide which one to use.

"Compact Forms" 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 and "Compact Forms". If you need to compact a form, simply add the form ID into the "Form CSS IDs" text area, add one per line.

Let's say for example, we want to compact the "Create new account" form. Open another browser and go to that form. Now we need to find out the form ID, the easiest way to do that is to inspect the element. Find the form tag and grab the form id. Let's go head back to our main browser and add the ID, below "user login form", and click on "Save configuration".

Now if we jump back to Firefox and refresh the page, the labels should now be in the form elements.

"In Field Labels" 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" text area.

So if we jump to Firefox, you can see that the "Create new account" and "Log in" form are compacted. 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, the star, and you can hide the field description. Whereas the "In Field Labels" module just places labels inside of form elements, and that's it.