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:

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:

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!