Gravity Forms
+ Floating Labels

Standard form labels sit above every field, which makes even a short contact form tall, and placeholder-only designs look clean but lose the label the moment someone starts typing. The Gravity Forms Floating Labels add-on gives you both. Each label sits inside its field, exactly where the text will go. When a visitor clicks in, tabs in or the field already has a value, the label floats up and shrinks so it stays visible above the answer. Forms look shorter and more modern, and nobody ever forgets what a field was for.

Pick the look that fits your site: Outlined puts the floated label on the field border, Filled uses a soft shaded box with the label inside at the top, and Underline keeps a single line under the text. Set an accent colour for the active field, and decide whether placeholders appear once the label floats or stay visible with the label kept up. Errors turn the label red, so problems stand out without extra clutter.

It covers the fields people actually fill in: single line text, email, phone, number, website, date picker, drop down and paragraph text — and every input of Name and Address fields and of Email and Password confirmation fields, each with its own floating sub-label. Turn it on for a whole form in one place or per field, and it keeps working on multi-page forms, fields revealed by conditional logic, AJAX forms, after validation errors and with browser autofill. The real label element stays in place, so screen readers and keyboard users get exactly what they got before.

When a form with floating labels is displayed, the add-on marks each supported field and loads one small script and stylesheet for that form only. The script places the field’s own label inside the input box and measures the real input — its height, padding, font size and text direction — so the resting label lines up exactly with where the text starts, whatever theme or form style you use. Focus, typing, a selected option, a date picked from the calendar, a default value or browser autofill all float the label up; clearing the field brings it back down. New fields are picked up as they appear: the next page of a multi-page form, a field revealed by conditional logic, or the form re-rendered after an AJAX submission or a validation error. Without the script the form simply shows its normal labels, and nothing about the submitted data changes.