Last updated March 25, 2011. Created on October 19, 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 http://example.com/admin/settings/compact_forms

In the 7.x version visit:
Home » Administer » Configuration and modules » Content authoring
Located at your site at http://example.com/admin/config/content/compact_forms

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.


Finished!

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

AttachmentSize
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 Drupal.org forums, or join #drupal-support in IRC.

Comments

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 :)

mba': Let's do it!

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?

CIAO

mba': Let's do it!