Changing Gravity Forms Description Location

GravityForms received a feature request two years ago to add the ability to change the description location on the forms from below the input boxes. Instead of putting it AFTER the field, the request was to place the box description above them.

Last year, they listed it as a future feature, but as of version 1.6.9, (today) this feature is still not available. They do still have this on their list for a future release, but in the mean time, this can be accomplished by adding a piece of code to your theme’s header.php.

To move the description from this location:

To this location:


Place this code in your theme’s header.php just before the </header> tag:

 <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.gfield_description').each(function(i,e){
            fielddesc = $('<div>').append($(e).clone()).remove().html();
            $(e).siblings('label.gfield_label').after(fielddesc);
            $(e).remove();
        });
    });
 </script>

After you’ve added this code, you should take a few minutes to view your site in a browser that you can easily see if there are any javascript errors, such as Internet Explorer.

If adding the above code causes any conflicts with your other plugins or custom theme code, you will see a yellow error warning in the bottom left corner of Internet Explorer.

Remember too, that this change could cause your other plugins or custom code to stop working. If that happens, just remove the above code you added or if you’re more experienced with working with your plugins and code, you can try to adjust the conflicting plugin(s) or code.

*** Update 2014 – At some point this became a non-issue since the feature was added to WP. However, if you don’t see the option to relocate the description, see the very last comment for my guess why.

7 thoughts on “Changing Gravity Forms Description Location”

Leave a Comment