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.
In this article I’ll show you how to implement both modules and it should help you decide which one to use.
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.