Last updated 25 March 2011. Created on 19 October 2009.
Edited by silverwing, heather. Log in to edit this page.

About Compact Forms

Compact Forms presents text fields for selected forms in a more compact fashion
using jQuery.

The form item/element fields are overlaid with their respective labels. When
the user focuses a field the label fades away nicely, and if the field is left
empty the label fades back in again.

See before:

See after, the label is positioned inside the field:

You cannot see the fade effect in this still image. When user focuses on the item, the text disappears. If they leave the field blank, the label text fades back.

Step by step

1. Identify the form ID.

First create your form and view it in your browser. Check the id for the form you want Compact Forms to affect. See an example, in this case the id is 'node-form'.

Tip: use Firebug in Firefox to Inspect element and see source and information of a selected item, such as a form.

2. Configure Compact Forms

In the 6.x version visit:
Administer › Site configuration › Compact forms
Located at your site at

In the 7.x version visit:
Home » Administer » Configuration and modules » Content authoring
Located at your site at

You see the default form id is for the user login.
Add your chosen form id.
In this case it is node-form. This will affect all node forms.
Click save.


This is how Compact Forms will make your form look with default settings. You can improve the display with CSS.

cf-identifyformID.png5.69 KB
cf-addCSSid.png11.56 KB
cf-finishedsample.png30.36 KB
cf-after.png5.52 KB
cf-before.png5.39 KB

Looking for support? Visit the forums, or join #drupal-support in IRC.


NickWebman’s picture

compact_forms is my hero! Super useful!

mafaldone’s picture

GREAT MODULE: I improved a bit and i share this with you ALL:

I changed CSS with this:

top: 1px;

and added

bottom: 4px;

It seams to work fine.
However, when logged with administrator or authenticated user no compact_forms.css is loaded.. This might be solved by adding this line on top of you page:

<link rel="stylesheet" type="text/css" href="sites/all/modules/compact_forms/compact_forms.css"/>

Just for the shake of clearness, is there a work around?

CIAO from the WORM ITALY :)

mafaldone’s picture

Well, it works fine with firefox and IE and safari (tested on iPhones).
NOT working with chrome: the text doesn't disappear on focus event! WHY?