Gravity Wiz

Magically enhanced tutorials, snippets and plugins for Gravity Forms!

  • Gravity Perks
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    • Documentation
    • Support
    • Account

How to Build Horizontal Forms with Gravity Forms

Last updated June 25, 2020 | Written by Jordan Smith 44 Comments

  • October 18, 2016: Fixed typo in CSS snippet.

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 horizontally instead. This means the form fields are displayed side by side, in a row. You can do this with Gravity Forms classes.

Gravity Forms can actually get you a decent way towards this goal using the powerful Gravity Forms CSS Ready Class. This method of creating horizontal forms does have some limitations. Here’s an example using the helper styles we provide later in this tutorial.

gw-horizontal-forms-previewHorizontal Gravity Form w/ Helper Styles

Steps

  1. Add “gf_simple_horizontal” to the Form’s CSS Class Name Setting
  2. Add “gf_inline” to each Field’s CSS Class Name Setting
  3. (optional) Hide the Field Label and Sub Labels
  4. (optional) Add Helper Styles

1. Add “gf_simple_horizontal” to the Form’s CSS Class Name Setting

For this tutorial, we’ll assume you’ve already used the Gravity Forms form builder to create a form. To get started, visit the Form Settings for the form you want to convert and add the “gf_simple_horizontal” class to the CSS Class Name setting.

gf-simple-horizontal-class

2. Add “gf_inline” to each Field’s CSS Class Name Setting

Next, visit the Appearance tab of each field in the form and add the “gf_inline” class to the Custom CSS Class field.

gf-inline-class-for-horizontal-form

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.

3. (optional) 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. Go ahead and follow our tutorial on how to hide Gravity Form field labels when using placeholders.

Once you’re added support for removing field labels and sublabels, visit the Appearance tab on each field and set visibility to “Hidden” in the Field Label Visibility and Sub-Label Placement dropdown fields.

It will look something like the screenshot below:

set-field-visibility-to-hidden-gravity-forms

4. (optional) Add Helper Styles

Things are looking good 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 form styled how you want.

Basically, it involves using Gravity Forms alignment settings (column layout) using gf_left_half (left column), gf_right_half (right column), gf_middle_third, gf_left_third, or gf_right_third based on how you’d like to align it. This is an easy way to play around with the form layout and column layout. You can also use gf_list_2col to turn a checkbox list into an equally-spaced two-column format on the front-end.

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 GP Live Preview for an easy way to preview your forms directly in your WordPress theme.

Show CodeDownload Code
.gf_simple_horizontal_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_first,
.gf_simple_horizontal_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_middle,
.gf_simple_horizontal_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_last {
padding-top: 0 !important;
}
.gf_simple_horizontal_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text],
.gf_simple_horizontal_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select {
margin-bottom: 0 !important;
}
.gf_simple_horizontal_wrapper li.hidden_label input {
margin-top: 0 !important;
}
body .gf_simple_horizontal_wrapper .top_label div.ginput_container {
margin-top: 0 !important;
}
.gf_simple_horizontal div.gform_footer.top_label {
width: auto !important;
vertical-align: top !important;
}
.gf_simple_horizontal div.gform_body {
width: auto !important;
}
.gf_simple_horizontal div.gform_footer.top_label input[type="submit"] {
line-height: 26px;
font-size: 13px;
padding: 0 24px;
text-transform: uppercase;
letter-spacing: 1px
}
view raw gw-gravity-forms-horizontal-forms.css hosted with ❤ by GitHub

Limitations

  1. This method works best for simple forms with only a few fields.
  2. This method isn’t a polished solution but it will get you (exactly) 93% of the way there without add-ons.
  3. 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. Unfortunately, we are not able to provide custom styling assistance.

Did this resource help you do something awesome with Gravity Forms? Then you'll absolutely love Gravity Perks; a suite of 32+ essential add-ons for Gravity Forms with support you can count on.

  • View All Perks
  • Buy Gravity Perks

Filed Under: How To, Tutorials css gf_inline gf_simple_horizontal gp live preview horizontal forms styling

Comments

  1. Ruud says

    May 10, 2020 at 4:46 pm

    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!

    Reply
    • Ryan Donovan says

      May 11, 2020 at 9:57 am

      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.

  2. Stuart says

    March 12, 2020 at 3:20 pm

    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

    Reply
    • Jason says

      March 18, 2020 at 10:41 pm

      It’s not working for me either, maybe GF have changed something on the CSS side that is causing issues with this?

    • Jason says

      March 18, 2020 at 10:58 pm

      Label placement must be Top aligned in form settings/form layout (step 1).

    • Ryan Donovan says

      March 19, 2020 at 9:31 am

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

  3. Robert Norcross says

    December 26, 2019 at 4:16 pm

    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.

    Reply
    • David Smith says

      January 7, 2020 at 3:35 pm

      I would expect this to work in mobile now. Do you have an example of what you’ve implemented with this so far?

    • Robert Norcross says

      January 29, 2020 at 11:04 am

      http://ampauto.kinsta.cloud/inventory/delray-buick-gmc-delray-beach-fl/used-2014-chevrolet-traverse-1gnkrgkd3ej187931/

      In the section, “Send Seller a Message”

  4. Annette says

    November 16, 2019 at 2:14 am

    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!

    Reply
    • David Smith says

      November 16, 2019 at 7:58 pm

      Do you have a URL where I could view this form?

    • Scott Buchmann says

      November 20, 2019 at 10:40 am

      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

  5. Andrew Peters says

    September 26, 2019 at 12:57 pm

    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.

    Reply
    • David Smith says

      September 26, 2019 at 3:59 pm

      This is possible with custom CSS but will differ per theme and form.

  6. Chris says

    July 11, 2019 at 8:50 pm

    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)?

    Reply
    • David Smith says

      July 12, 2019 at 8:10 am

      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.

  7. Shmuel says

    April 4, 2019 at 5:37 pm

    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?

    Reply
    • David Smith says

      April 4, 2019 at 9:52 pm

      We don’t have a solution for this one.

  8. Gary says

    March 17, 2019 at 7:03 pm

    Thank you. Works perfectly.

    Reply
  9. Cavtec says

    March 7, 2019 at 10:14 am

    What would be the CSS to centralize this?

    Reply
    • David Smith says

      March 7, 2019 at 10:38 am

      Come again?

    • Cavtec says

      March 7, 2019 at 11:31 am

      Naturally the form appears to be aligned to the left. Is there a container or ready class to centralise this?

    • Lawrence says

      March 10, 2019 at 8:37 pm

      I’m looking to do this too.

    • David Smith says

      March 11, 2019 at 8:10 am

      I think I’m still misunderstanding? The “gf_simple_horizontal_wrapper” is the class to use to centralize this behavior.

    • Brian says

      April 3, 2019 at 8:26 pm

      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?

    • David Smith says

      April 3, 2019 at 9:19 pm

      Hi Brian, this is the default behavior of the gf_simple_horizontal ready class. You would need additional custom CSS to center it.

    • JaxRachel says

      November 7, 2019 at 2:01 pm

      I centered it by adding the following code:

      http://snippi.com/s/zm5l5o5

    • David Smith says

      November 7, 2019 at 2:45 pm

      Thanks for sharing, JaxRachel!

  10. KO says

    October 18, 2018 at 12:40 pm

    Fantastic Tip. Works perfectly. TY!

    Reply
  11. Marianne says

    March 28, 2018 at 5:04 pm

    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”

    Reply
    • David Smith says

      April 11, 2018 at 11:37 am

      Looks like Gravity Forms doesn’t support this in this context. You would need to use CSS to set the sizes manually.

  12. ed says

    January 30, 2018 at 4:48 am

    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

    Reply
    • David Smith says

      February 2, 2018 at 9:39 pm

      Hi Ed, sounds like you’re looking for tooltips? This is a great plugin for that: https://github.com/norcross/gravity-tooltips

  13. Rachel R. says

    November 23, 2016 at 6:53 pm

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

    Reply
    • David Smith says

      November 23, 2016 at 8:52 pm

      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.

    • Rachel R. says

      November 23, 2016 at 9:04 pm

      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!

  14. David Quinanilla says

    October 18, 2016 at 1:14 am

    Line 17 is missing a :

    Reply
    • David Smith says

      October 18, 2016 at 8:16 am

      Fixed. Thanks, David!

  15. makii says

    August 13, 2016 at 12:39 pm

    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!

    Reply
    • David Smith says

      August 14, 2016 at 7:45 am

      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

  16. faithbegins says

    June 15, 2016 at 9:19 am

    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

    Reply
    • David Smith says

      June 30, 2016 at 9:18 am

      Sorry, Faith. We’re not able to provide bespoke code pro bono.

Trackbacks

  1. How To: Horizontal Forms – Pinnacle Pools & Spa says:
    January 3, 2017 at 2:06 am

    […] Source: How to Build Horizontal Forms with Gravity Forms – Gravity Wiz […]

    Reply
  2. Gravity Forms Felder horizontal anordnen › Tips und Tricks für WordPress, WordPress, WordPress Plugins says:
    December 5, 2016 at 4:01 am

    […] Jungs und Mädels von Gravitywiz empfehlen zusätzlich auch noch dem gesamten Formular die […]

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Categories

  • How To (64)
  • News (21)
  • Plugins (14)
  • Releases (7)
  • Resource (3)
  • Snippets (58)
  • Tutorials (57)
  • Updates (104)

Recent Posts

  • How to Send a Follow-Up and Pre-Fill Information
  • How to Update Posts with Gravity Forms
  • Gravity Wiz Weekly #104
  • The Complete Guide to Using Gravity Forms With Zapier
  • Gravity Wiz Weekly #103

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

Copyright © 2021 · Powered by WordPress · Gravity Wiz LLC

  • Support
  • Affiliates
  • About
  • Sitemap
  • Gravity Perks
    ▼
    • Gravity Perks
    • Tutorials & Snippets
    • About
  • Support
    ▼
    • Documentation
    • Support
    • Account