How To Customize the Gravity Forms Layout in WordPress (2024)

How To Customize the Gravity Forms Layout in WordPress (1)Colin Newcomer

/Updated August 17, 2022 /6 Comments

How To Customize the Gravity Forms Layout in WordPress (2)

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:

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.

Did this resource help you do something awesome with Gravity Forms?

Then you'll absolutely love Gravity Perks; a suite of 47+ essential add-ons for Gravity Forms with support you can count on.

View All PerksBuy Now

Tags: gp nested forms, ready classes

  1. How To Customize the Gravity Forms Layout in WordPress (11)

    Zack LossingAugust 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. How To Customize the Gravity Forms Layout in WordPress (12)

      Samuel BassahStaffAugust 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. How To Customize the Gravity Forms Layout in WordPress (13)

      Sean SJanuary 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. How To Customize the Gravity Forms Layout in WordPress (14)

    ArvindJune 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. How To Customize the Gravity Forms Layout in WordPress (15)

      Ryan DonovanJune 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.😃

    2. How To Customize the Gravity Forms Layout in WordPress (16)

      ArvindJune 19, 2020 at 10:13 am

      Thanks for your reply . In addition to your reply I also found the following resource elsewhere on your website which had in a way already provided this functionality. I will try implementing. Thanks for all the resources.In case anyone else needs this too I am posting the github link of the snippet created by David:

      https://gist.github.com/spivurno/3a3b92bf32824a414c87c23bbf5ca335

Leave a Reply

How To Customize the Gravity Forms Layout in WordPress (2024)

FAQs

How To Customize the Gravity Forms Layout in WordPress? ›

Theme Settings

On the right side of the editor screen, click to open Form Styles and look for Form Theme. The Orbital theme includes a small number of common settings accessed via the block editor, with more on the way.

How do you change the theme in gravity form? ›

Theme Settings

On the right side of the editor screen, click to open Form Styles and look for Form Theme. The Orbital theme includes a small number of common settings accessed via the block editor, with more on the way.

How do I customize a form in WordPress? ›

When you click on an individual form field within the Form block, the toolbar has the following options from left to right:
  1. Select the overall form.
  2. Change field type.
  3. Drag the field.
  4. Move the field up or down.
  5. Ask the AI assistant to create your form.
  6. Make the field required.
  7. More options.

Where do I put CSS for Gravity Forms? ›

From your site admin dashboard, click the Appearance option. Under Appearance, choose Customize. That will be take you into the theme customizer, where you can find the Additional CSS tool.

How do I remove gravity form styles? ›

On the Forms > Settings page, just set the radio button for “Output CSS” to “No” and Gravity Forms won't output any CSS. At that point it will be up to your theme and any other plugins to style the Gravity Forms output. Give it a try and see how well your theme does styling the output of your Gravity Forms fields.

Why use Gravity Forms in WordPress? ›

From simple contact forms to the ability to create e-commerce forms, nothing you can't do.” Stores data in a logical way and notifications and conformations are intuitive and easy to use.” The ability to connect with so many third-party solutions has made it our preferred form plugin.”

How do I turn off auto formatting Gravity Forms? ›

The only purpose of the “Disable auto-formatting” setting is in fact to stop Gravity Forms adding line breaks automatically. So you would enable this setting only if you don't want line breaks. This would be the case if you plan to add your own custom HTML format to the notification content.

What is the Gravity Forms theme framework? ›

What is the Gravity Forms Theme Framework? At the most basic level, the theme framework is the system within Gravity Forms that controls form styling and appearance. It was introduced in version 2.7. 0 and provides a foundation for creating and customizing form themes.

What is the theme of gravity? ›

Themes. Although Gravity is often considered to be a science fiction film, Cuarón told the BBC that he does not consider it such, rather seeing it as "a drama of a woman in space". According to him, the main theme of the film was "adversity" and he uses the debris as a metaphor for this.

How do you reset Gravity Forms? ›

  1. Add your form ID to the filter if you want to only add the reset button to one form (i.e gform_submit_button_11)
  2. Change the button text by modifying the value on line 31 (i.e value=”Button Text”)
Dec 22, 2021

How do I change the redirect in Gravity Forms? ›

Go to the Confirmation page of the form
  1. Type a name for the confirmation;
  2. Choose "Redirect" as the Confirmation Type. ...
  3. Set the Redirect URL: Paste the URL from your new View and add /entry/{entry_id}/ to the end of the URL;
Dec 25, 2023

Top Articles
Latest Posts
Article information

Author: Terrell Hackett

Last Updated:

Views: 6083

Rating: 4.1 / 5 (52 voted)

Reviews: 91% of readers found this page helpful

Author information

Name: Terrell Hackett

Birthday: 1992-03-17

Address: Suite 453 459 Gibson Squares, East Adriane, AK 71925-5692

Phone: +21811810803470

Job: Chief Representative

Hobby: Board games, Rock climbing, Ghost hunting, Origami, Kabaddi, Mushroom hunting, Gaming

Introduction: My name is Terrell Hackett, I am a gleaming, brainy, courageous, helpful, healthy, cooperative, graceful person who loves writing and wants to share my knowledge and understanding with you.