Move Gravity Forms field labels above input fields

Gravity Forms has some nice compound fields to make it easy to accept things like names, addresses, and credit card details. One annoying thing it does, though, is put the labels for the input fields below them instead of above them. Here’s how to move Gravity Forms field labels above input fields where most people would expect them to be.

This is a problem that has come up a few times on the old Gravity Forms support forums, back before they moved support to HelpScout. There’s still an old thread there (which you can read if you have a valid license), and the code in that thread forms the basis for my snippet below. Here’s what Gravity Forms normally does with an Address field:

Gravity Forms Address field, with the labels below the input fields
Gravity Forms Address field, with the labels below the input fields

That’s fine, and most people can work out what’s going on, but many of us (many of your website’s visitors!) will mix up which input fields the labels belong to. That can lead to mistakes entering information into the fields. Moving the labels above the input fields just seems to make it easier to follow:

Gravity Forms Address field, with the labels above the input fields
Gravity Forms Address field, with the labels above the input fields

Changing the fields as output on the page is a little tricky, because it means rewriting the HTML, or using some complex regular expression magic. I don’t mind doing that when there’s no other way, but in this case it’s much easier to move the labels on the page using JavaScript. And with jQuery, it’s surprising just how little script is needed. Here’s what we need to do:

  • find Gravity Forms fields that have the input fields we’re interested in
  • find any HTML label elements
  • insert a duplicate of the label above the input field
  • remove the old label

Here’s the jQuery code that does all of that:

jQuery(".ginput_container").has("input[type='email'],input[type='text'],input[type='password'],select,textarea").find("label").each(function() {
    var e = jQuery(this), fielddesc = jQuery("<div>").append(e.clone()).remove().html();
    e.siblings("input,select,textarea").before(fielddesc);
    e.remove();
});

To make it really easy, you can just download the PHP file in this gist, load it into the plugins folder on your website, and activate it. It hooks into Gravity Forms to run that script whenever there’s a form on the page. And job is done from above, not below!

Facebooktwittergoogle_plusredditlinkedinmailFacebooktwittergoogle_plusredditlinkedinmail
  • HI Guys,

    Great solution, however I have noticed the input fields jump back to their original position when a there is a form validation error.

    Would you have any idea how to tweak this to cover that scenario as well?

    • G’day Matt, I couldn’t replicate that in twentytwelve theme with either Name or Address fields. Can you link to an example please? I suspect it’s your theme.

  • There is a plugin for that,

    https://wordpress.org/plugins/gravity-forms-enhancements/

    Which doesn’t require on javascript solution, therefore works evertime. Plua ir has more options.

  • James Godfrey

    I try This plugin I active it. It work only in backend but front end not working

  • Thanks for this!