How to Customize The Gravity Forms Layout and Design in WordPress (2024)

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 47 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.

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:

• Numbering rows in a Gravity Forms list field
• Hiding the Gravity Forms Ajax spinner
• Transforming the contents of an HTML field into a banner message

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 47 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.