May 19, 2022: Updated to support GF 2.5's layout editor, GF 2.6's inline submit button and using multi-input fields (like the Name field).
By default, Gravity Forms outputs it’s forms in a vertical (or column) format. This just means that the form fields are stacked on top of one another all the way down the form. This is ideal for most forms but there are some cases where you may want to display your form with a horizontal layout instead. This means the form fields are displayed side by side, in a row, also allowing for an inline submit button.
Gravity Forms can actually get you a decent way towards this goal using the powerful Gravity Forms CSS Class and the drag and drop editor. This method of creating horizontal forms does have some limitations. Here’s an example using the helper styles we provide later in this tutorial.
How to create Gravity Forms with a Horizontal Layout
Step 1 – Align Fields Using Drag and Drop Editor
Go to whichever form you’d like to layout horizontally. Using the the Drag and Drop editor, align the fields in your form horizontally by dragging the fields into the Column Drop Zones.
To place the Submit button at the end of the form, first select it, then navigate to the Appearance tab. Set the Submit Button Location to End of the last row.
At this point your Gravity Form is now a horizontal form!
There are two additional steps we can take to make this even more streamlined.
Step 2 – Hide the Field Label and Sub Labels
In many cases when implementing a horizontal form, you are putting it in location without a ton of room. We can hide the labels and use placeholders to save a little space. Visit the Appearance tab on each field and set visibility to Hidden in the Field Label Visibility and Sub-Label Placement drop down fields.
After applying this configuration, your form should now look something like this:
Step 3 – Add Helper Styles
We’re inching closer to something good here… but you might notice that some of the fields aren’t properly aligned and the submit button is larger than the inputs. Here are some simple helper styles that can act as a starting point to get your horizontal form styled more consistently.
This code can be copied and pasted into your theme’s style.css
stylesheet file. Keep in mind, theme styles are not loaded in preview so you might want to check out Gravity Forms Live Preview for an easy way to preview your forms directly in your WordPress theme.
.gw-horizontal-form_wrapper .ginput_container input,
.gw-horizontal-form_wrapper .ginput_container select,
.gw-horizontal-form_wrapper #field_submit input.button {
height: 2.4rem;
}
.gw-horizontal-form_wrapper #field_submit input.button {
padding: 0 1.4rem;
}
.gw-horizontal-form_wrapper .gform_fields {
grid-column-gap: 1vw !important;
}
.gw-horizontal-form_wrapper .ginput_complex span:not(:first-child) {
padding-left: 1vw !important;
}
Step 4 – Add gw-horizontal-form
to the Form’s CSS Class Name Setting
Now we need to apply those helper styles to our form. We’ll do this by setting the helper class on our form settings.
Visit the Form Settings for the form you want to convert and add the gw-horizontal-form
class to the CSS Class Name setting.
After applying the helper class to your form, the final result will look something like this:
Limitations
- This method works best for simple forms with only a few fields.
- This method isn’t a “final” solution but it should get you exactly 93% of the way there.
- This method requires some additional customization to handle responsive styling e.g. for column layouts.
The pros are that it’s available with the Gravity Forms WordPress plugin out of the box and doesn’t require too much effort to get everything looking just right without using add-ons.
What questions do you still have?
Do you still have any questions about how to build horizontal forms with the Gravity Forms plugin in WordPress? We’d love to know what they are.
Did this resource help you do something awesome with Gravity Forms?
Then you'll absolutely love Gravity Perks; a suite of 46+ essential add-ons for Gravity Forms with support you can count on.
I’m looking at the current Gravity Forms documentation on gf_simple_horizontal and see this: “This class is deprecated by the submit button being built directly into the Form Editor in Gravity Forms 2.6.” I was only able to get good results by setting a fixed width on the email field, otherwise it was short.
Do you have any updated thoughts? Thanks!
Hi Jeffrey,
It seems the Submit button on GF 2.6 it’s available in the Form Editor and lets you set the width of the button in the Appearance tab. I would suggest reaching out to Gravity Forms support about this question.
Cheers.
Looks like this page: https://docs.gravityforms.com/adding-an-inline-submit-button-in-gravity-forms-2-5/ replaces the instructions on this page.
Even better: GF 2.6 does all of this in the form editor.
Thanks for the heads up Jeff, this looks slick!