How to Build Horizontal Forms with Gravity Forms
Want to display your form’s fields horizontally, instead of vertically? Learn how in this quick step by step guide.
By default, Gravity Forms stacks form fields vertically. That works well for most forms, but shorter forms — like newsletter signups or simple lead forms — can also work nicely with the fields and Submit button on one row.
Gravity Forms can handle most of this directly in the form editor. In this guide, I’ll show you how to build a horizontal layout with drag-and-drop columns, place the Submit button at the end of the row, and make a few optional styling tweaks.
Using gf_simple_horizontal?
This Ready Class was deprecated in Gravity Forms 2.6. Use drag-and-drop columns and the Submit Button Location setting instead.
How to create Gravity Forms with a Horizontal Layout
Step 1 – Align Fields Using Drag and Drop Editor
Open the form you want to lay out horizontally. Drag each field into a Column Drop Zone to place the fields on the same row. You can also use the column handles to adjust their widths.
Then select the Submit button › open the Appearance tab › set Submit Button Location to End of the last row.
At this point your Gravity Form is now a horizontal form!
Don’t see the column controls?
Your form may still be using Legacy Markup. Disable Enable legacy markup under Form Settings › Form Options first.
If it’s an older form, test the change before publishing to make sure any existing styling or custom code still works as expected.
Step 2 – Hide the Field Label and Sub Labels
Horizontal forms are often used where space is tight, so keeping your field labels short can help make the layout more compact.
You can also use placeholders as an extra hint for what to enter. I’d keep the field labels visible whenever possible, though. Gravity Forms recommends visible labels for accessibility, since placeholders disappear once someone starts typing.
Step 3 – Add Helper Styles
We’re getting close, but depending on your theme, you may notice that the fields and Submit button don’t line up quite the way you want.
These helper styles give you a starting point for tightening up the layout.
We’ll add them through Code Chest, a free Gravity Wiz plugin that lets you add CSS directly to a form. You can install it for free through Spellbook.
Open Settings › Code Chest, then paste the CSS into the CSS field. Leave Scope CSS to this form only enabled so these helper styles stay limited to this form.
</span>
<div>.ginput_container input,</div>
<div>.ginput_container select,</div>
<div>.gfield--type-submit button[type="submit"] {</div>
<div>height: 2.4rem;</div>
<div>}</div>
<div></div>
<div>.gfield--type-submit button[type="submit"] {</div>
<div>padding: 0 1.4rem;</div>
<div>}</div>
<div></div>
<div>.gform_fields {</div>
<div>grid-column-gap: 1vw !important;</div>
<div>}</div>
<div></div>
<div>.ginput_complex span:not(:first-child) {</div>
<div>padding-left: 1vw !important;</div>
<div>}</div>
<span style="font-size: 1.125rem;">
Want to see the form with your frontend styles applied?
Gravity Forms Dev Tools includes Preview Tools, which let you preview your form as it will appear on the frontend.
A Few Things to Keep in Mind
- Horizontal layouts work best for shorter forms with only a few fields.
- Gravity Forms supports up to four resizable columns.
- The Submit button can’t be placed inline on multi-page forms.
- Depending on your theme, you may still need a little CSS to fine-tune spacing or responsive behavior.
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.
Comments
Comments are closed.
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!
Hi –
Any thoughts on how to make validation errors (like required field needs to be entered) not mess up the formatting of horizontal forms?
Thanks!
Hi Chris,
This is possible with custom CSS but will differ per theme and form. With Gravity Form 2.5 you will be able to setup the fields as blocks which will make it even easier.
Please some one to help me ? Sub-Label Placement not appear…How could I inlude it ?
Hi Aimé,
If you have a Gravity Perks license, drop us a line in Support and we’ll be happy to dig into this for you.
Applied one of the codes mentioned above and now at least the field and button are aligned and centered.
(Green newsletter signup form at) https://www.alettahelena.com
Now, I would like to have fields and button using the entire available space.
Any suggestion would be honestly appreciated.
Thanks in advance!
Hello Rudd, Thank you for writing in. I do see that your page has gf_simple_horizontal set for the form but I do not see gf_inline set for each inline item. Also, it looks like you may want to edit your CSS files to center the form as a whole. Here is a tutorial from Gravity Forms on how to do that.
Hi, I’m getting some strange behaviour with this one. I apply the css classes as described. It then “hides” my email field label and reduces the size of the email field box.
any thoughts on why that would be and how to rectify?
Thanks, Stuart
It’s not working for me either, maybe GF have changed something on the CSS side that is causing issues with this?
Label placement must be Top aligned in form settings/form layout (step 1).
Hey Jason, Excellent question. This seems to be a default interaction with gf_simple_horizontal. This only works with the “top label” form layout option. When added to “CSS Class Name” in your form settings will create a very simple horizontal form layout (think simple email address field and inline form button). The field label is hidden so using the placeholder option for the field is recommended. Please note that this works best on very simple, single-input field types. Also, it works best if you set the input size to “large” in the field settings. Let us know if you have any other questions.😀
Is it possible to do this for mobile? Obviously wouldn’t make sense with a lot of fields, but we have 1 field and a “send” button.
I would expect this to work in mobile now. Do you have an example of what you’ve implemented with this so far?
http://ampauto.kinsta.cloud/inventory/delray-buick-gmc-delray-beach-fl/used-2014-chevrolet-traverse-1gnkrgkd3ej187931/
In the section, “Send Seller a Message”
It doesn’t seem to work on firefox for me – everything is left justified and smaller: https://www.dropbox.com/s/uwgqem17s7hznje/Screenshot%202019-11-15%2023.10.28.png?dl=0 Looks like this on Safari and Chrome: https://www.dropbox.com/s/ctxdf2kcetls8yz/Screenshot%202019-11-15%2023.11.14.png?dl=0
Any advice for mozilla? thank you!
Do you have a URL where I could view this form?
Hi Annette, thanks for reaching out to us via Gravity Perks support. I wanted to follow up here for the benefit of other folks having this issue.
The difference in styling between Chrome and Firefox was due to some existing CSS in the site’s theme. If you run into this, you can simply add this to your theme’s style sheet to force the form to 100% width in both browsers:
http://snippi.com/s/13yiw81
Is there a way to just make the submit button inline with the very last field?
Like I want my whole form to be three lines. The first two lines would each have two questions, the last line would have one question then the Submit button.
This is possible with custom CSS but will differ per theme and form.
Thanks for this tutorial.
I’m trying to add the form to a newsletter template that came with my theme. When I added the “gf_simple_horizontal” and “gf_inline” appropriately, the email field became smaller.
Is there a way to increase the length of the email field (it’s in large already)?
Hi Chris, the form-level classes override some of the styles on the form elements. You would need to use CSS to set a desired width on your Email field.
How can I accomplish the same look for a multi-page form so that the next button would be in place of the submit button with same inline style?
We don’t have a solution for this one.
Thank you. Works perfectly.
What would be the CSS to centralize this?
Come again?
Naturally the form appears to be aligned to the left. Is there a container or ready class to centralise this?
I’m looking to do this too.
I think I’m still misunderstanding? The “gf_simple_horizontal_wrapper” is the class to use to centralize this behavior.
I’m having the same issue, I have have the gf_simple_horizontal set with gf_inline on all 3 input fields and the form is left justified left rather than center.
https://termitetiger.com/test/
I’m using Divi theme.
Any clue why it is left rather than center justified?
Hi Brian, this is the default behavior of the gf_simple_horizontal ready class. You would need additional custom CSS to center it.
I centered it by adding the following code:
http://snippi.com/s/zm5l5o5
Thanks for sharing, JaxRachel!
Fantastic Tip. Works perfectly. TY!
how do you change the size of the fields for horizontal forms? I want only an email field with a button. The field size never changes. I tried selecting “small”, “medium” and “large”
Looks like Gravity Forms doesn’t support this in this context. You would need to use CSS to set the sizes manually.
Do you have anything in your kit to add a modal box helper at the end of a field title for the person completing the form, much in the same way that the admin panel has them with the ‘?’ and when you hover additional explanation comes up. As some fields only display conditionally it needs to be in with the form title. I don’t want to swamp the form with extensive text in the description field that is offered. Thanks
Hi Ed, sounds like you’re looking for tooltips? This is a great plugin for that: https://github.com/norcross/gravity-tooltips
[…] Source: How to Build Horizontal Forms with Gravity Forms – Gravity Wiz […]
[…] Jungs und Mädels von Gravitywiz empfehlen zusätzlich auch noch dem gesamten Formular die […]
Do you know if there’s a way to make only part of form horizontal?
Two or three fields can be placed on the same line with the “thirds” or “halves” style options — but not the submit button. So I have, for instance, some HTML fields I want above, and then a name, address, and submit button below that I’d like to be in a line. I can get the name and address on the same line, but I can’t seem to control the placement of the submit button.
(Also, your readers should be aware that under normal circumstances, hiding the field labels and relying on placeholder text alone is bad practice. Screen readers, etc. used for accessibility purposes won’t read the placeholder; they need the label.)
Thanks, Rachel, I thought we had a mention in here about accessibility but it was actually on this other article.
In regards to your question, I do not know of a ready solution for making only part of the form horizontal outside of the ready classes you already mentioned. You’d have to write some custom CSS to wrangle the submit button into it’s desired location.
Well, drat. I was hoping there might be an easy way. This CSS newbie is struggling with all the CSS wrangling to get a decent-looking form. .lol
Thank you!
Line 17 is missing a :
Fixed. Thanks, David!
Hi, I tried gf_simple_horizontal with just an email field. But the field does not resize–it stays at small whether I select large or medium.
Any suggestions? Thx!
Hi Makil, the gf_simple_horizontal class overrides some of GF’s other styles, including the size setting. You can manually override the width for any input by adding a custom style to your theme’s stylesheet:
input#input_1418_1 { width: 500px; }
Where “1418” is your own form ID and the “1” is your field ID. Template: input#input_FORMID_FIELDID
I would like to Create 4 column table in Gravity form can you provide me the code
Local Guardian (If Any): S.No Name Relationship Address (w/ tel. no.)
Form & output should be like Table
Sorry, Faith. We’re not able to provide bespoke code pro bono.