How To Customize the Gravity Forms Layout in WordPress

Gravity Forms helps you create all kinds of helpful forms for your WordPress site. But if you want to get the most from those forms, it’s important to optimize the Gravity Forms layout.

Optimizing the layout of your forms makes them more user-friendly and lets you control exactly how you display information on your forms.

There are three main ways to customize the Gravity Forms layout:

  1. Built-in options for basic layout choices.
  2. CSS styling (Gravity Forms includes a number of built-in CSS classes).
  3. Using other Gravity Forms Plugins for even more flexibility.

In this tutorial, you’ll learn how to use all three methods to customize the layout of your forms.

We’ll start by discussing the basic built-in options and Gravity Forms layout CSS. Then, we’ll take you through how to use Gravity Perks and some of its 46 add-ons to optimize your layouts further and add new features to your forms.

Why It’s Important to Customize the Layout of Your Forms

Form layout and form looks have a large effect on form usability and conversion rates.

For example, data from a Google eye-tracking study suggests that even small changes like using a left-aligned top label or well-deployed dropdowns can lead to faster form completion times and an easier experience for visitors as they navigate input fields (as measured by fewer eye movements).

Basically, this isn’t something you should ignore, and with the Gravity Forms layout options that we’ll show you in this post, you’ll have the ability to create a form layout that’s optimized for your visitors.

How to Use Basic Gravity Forms Layout Options

The Gravity Forms WordPress plugin includes some basic layout options in the form builder interface.

First, the obvious one is the drag-and-drop interface itself – you can use drag-and-drop to arrange the order of all fields in relation to one another. You can also use drag-and-drop to arrange the fields into columns.

If you edit a field, you’ll also get some more layout options in the Appearance tab. For example, you can change the location of a field’s description or hide its label and/or sub-label:

If you go into the Form Settings, you’ll also get additional options for label and description placement in the Form Layout section:

There are also some fields that can help you control the layout of your forms. For example, you can use the section break and page break fields to divide your form into different sections or create multi-page forms.

How to Use CSS Layouts for Gravity Forms

If you want to go beyond the basic built-in layout options, Gravity Forms comes with its own built-in CSS classes that you can use, called “Ready Classes”.

You can use “Ready” classes to:

  • Change the layout of list fields. For example, dividing a list of checkboxes / radio buttons / selectors into multiple columns.
  • Use a horizontal form layout where the submit button is beside form fields. Best for short forms.

View a full list of Gravity Forms Ready Classes – this page also includes visual examples.

CSS Ready Classes for column layout are deprecated in Gravity Forms 2.5. Instead, use the drag-and-drop editor to arrange your fields into columns.

To add a Ready Class to one of your form fields, you can use the Custom CSS Class setting in the Appearance tab of a field’s settings:

You can add multiple Ready Classes to a field, or mix-and-match a Ready Class with your own custom CSS that you’ve added to your site’s stylesheet. To do this, just add a space between each CSS class name in the Custom CSS Class setting.

Let’s look at some specific examples…

How to Create a Horizontal Gravity Forms Layout

With Ready Classes, you can build horizontal form layouts like below:

To achieve this layout:

  • Add gf_simple_horizontal to the CSS Class Name in the Form Layout section in Form Settings.
  • Align your fields horizontally using the drag-and-drop editor.

If you’re using this layout, you might also want to hide Gravity Forms field labels when using placeholders. You can do this using the Field Label Visibility setting in each field’s Appearance tab:

Other Gravity Forms CSS Tweaks

Three other layout tweaks you can make with CSS are:

Note that you can also use CSS to customize your forms’ background color (based on its form wrapper), form header, spacing, and so on.

Display and customize your forms on the front end using shortcodes

Ever used shortcodes before? These little one-liners of code allow you to easily display how your forms appear on the front end of your site. You can use shortcodes to embed forms, display user information, show progress meters, run split tests, display forms conditionally, and plenty more. Learn more about Gravity Forms shortcodes from our comprehensive guide.

How to Further Customize Your Layouts With Gravity Perks

To further customize your Gravity Forms layout, you can use Gravity Perks. Gravity Perks is a collection of 46 different add-ons for Gravity Forms that can help you enhance your forms in a ton of different ways.

One of those ways? New layout options!

For example, with the GF Nested Forms add-on, you can “nest” forms inside one another for custom layouts, including a nice Gravity Forms table layout.

This not only lets you create custom form layouts, but it also helps you add new functionality to your forms. You can create one parent form and then use a child form to collect additional entries and attach them to the parent form.

The child form entries will then display in a Gravity Forms table layout inside the parent form.

For example, if you create a team registration form for a local sports league, you could create:

  • A parent form for people to add the details about their team as a whole.
  • A repeatable child form inside that parent form where people can add details about each individual team member.

You’ll start by creating the child form. Then, you can “nest” that form inside the Gravity Forms layout of the parent form using the Nested Form field. By default, it will use a Gravity Forms table layout and you can choose which summary fields to include:

Here’s an example of what that might look like on the front-end – you can see how the plugin uses a Gravity Forms table layout for the repeatable child form:

You also have full control over the template of the nested child form. There are four available templates which you can customize by following these steps:

  • nested-entries.php – renders child entries in the Nested Form field. This is what defines the Gravity Forms table layout.
  • nested-entries-detail.php – renders child entries on the back-end in the entry detail page.
  • nested-entries-simple-list.php – renders a single value from each child entry when using merge tags.
  • nested-entry.php – renders a single child entry when using merge tags.

Conclusion

Optimizing your form’s layout is important for usability and user experience.

Gravity Forms includes basic layout options in the form builder. Then, you can use Ready Classes to further customize your Gravity Forms layout.

If you want to take things further, you can use Gravity Perks and the GF Nested Forms add-on to create a Gravity Forms table layout where a child form is nested “inside” a parent form.

To get started, purchase Gravity Perks today.

Comments

  1. Zack Lossing
    Zack Lossing August 18, 2020 at 1:04 am

    Is there a way to CSS in gravity forms whereas there are 2 columns but one field is larger than the other (so basically a 2/3 to 1/3, 2 columns)? I tried giving the 2/3 field a larger field size but it still split right in half :/. Any help is appreciated :)

    Reply
    1. Samuel Bassah
      Samuel Bassah Staff August 18, 2020 at 7:22 am

      Hi Zack,

      You may create your own classes in your Website CSS and assign the class name in the respective fields. You can use the CSS below as a starting point to achieve what you want.

      .gf_one_third{ width: 33.3%!important; display: inline-block; vertical-align: top; float: none; }

      .gf_two_third{ width: 66.6%!important; display: inline-block; vertical-align: top; float: none; }

      I also found this plugin online, that appears to do something similar. You can check it out.

      Best,

    2. Sean S
      Sean S January 3, 2021 at 3:00 pm

      Samuel Bassah, thank you so much for the code you included in your reply. It saved me and I was able to use it. Just wanted to say thank you!! πŸ™

  2. Arvind
    Arvind June 19, 2020 at 2:42 am

    A suggestion: Before Submission, we can preview a form using {all_fields} merge tag. However when previewing a form (or when the form is sent via a email notification) containing a nested field, the nested field entries by default appear one below the other in a LIST format instead of a TABLE format. If the Nested form field entries in the preview instead by default appeared in a table format it would be in a more appropriate and very neat reader friendly way of viewing the contents. In other words – If a List field is used in a form – and if you see the preview (or the notification email in which it is sent), the preview of the list field is a very neat table with one row each for every submitted entry of a list field which makes it very easy for the user to read and make sense of the data. However if a nested field is used instead of a list field – the preview (or the notification email) the entries do not appear as table rows for each entry but instead appear as a vertical list blocks of all the submitted entries.

    If there is a way to change the default view of the nested form field entries in the preview submission (Or notification) to the table format – it would be great if a small article is written on it on your site please

    Thanks for the great work you guys are doing with gravity forms! Cheers

    Reply
    1. Ryan Donovan
      Ryan Donovan June 19, 2020 at 9:19 am

      Hello Arvind, this is an excellent question. You can actually control the output of the nested form fields by using the nested forms templating system to make the list view or detailed view, then using the {all_fields} or nested fields merge tag to display it. If you want more control over the all fields merge tag or you wish to only display a single field at a time, you can customize this via the All Fields Template plugin.πŸ˜ƒ

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Trouble installing this snippet? See our troubleshooting tips.
  • Need to include code? Create a gist and link to it in your comment.
  • Reporting a bug? Provide a URL where this issue can be recreated.

By commenting, I understand that I may receive emails related to Gravity Wiz and can unsubscribe at any time.

Grab a bundle of free Gravity Forms plugins

Enter your email and receive our most popular free plugins and snippets, plus access to hundreds of others.

This field is for validation purposes and should be left unchanged.