Improve the Layout of your Gravity Form with CSS Ready Classes

3-column list

A longstanding annoyance of mine with Gravity Forms is that it lays everything out very vertically. All fields are set one below another, and even checkboxes and radio buttons are laid out in vertical lists, even though you may have the entire page width for your form. This can make the forms very long and cause a lot of negative space. However, I just recently found out that there are CSS Ready Classes built in to Gravity Forms, so that you can adjust your layout to make better use of your space.

Columns

If you want to add fields side by side in equally spaced columns, you can use the preset CSS ready classes for halves and thirds to split them up. To add a CSS class to any field, click on the Advanced tab and enter the CSS class in the CSS Class name field.

Enter Gravity Forms CSS Class

If you want to display your fields in 2 equally spaced columns, the CSS ready classes for halves are gf_left_half and gf_right_half and it has the following effect:

Gravity Forms 2-column layout

Similarly, to split them into three columns, you can use the CSS classes gf_left_third, gf_middle_third and gf_right_third to split the fields up like so:

Gravity Forms 3-column layout

Checkboxes and lists

Instead of displaying each option below the next in a group of checkboxes or radio buttons, you can use some more CSS ready classes to space them into columns. For example, you can choose from 2, 3, 4 or 5 columns using the CSS classes gf_list_2col, gf_list_3col, gf_list_4col and gf_list_5col, which will space the options out in the following manner:

3-column list

There’s another option for creating an inline list, where the options are shown inline and continue on one line until there’s not enough space to add another, and the next option drops down to the next line. The CSS class in this instance is gf_list_inline:

Gravity Forms Inline List

A further option is to set the height of each option within a list, using the classes gf_list_height_25, gf_list_height_50, gf_list_height_75, gf_list_height_100, gf_list_height_125 and gf_list_height_150, which will have the following effect. This is useful to avoid hanging floats caused by list items with different heights.

gf_list_height_50 in use

Miscellaneous CSS classes

A couple of last remaining CSS classes include allowing a scroll box for particularly long paragraphs of text in section break fields, such as terms and conditions. The CSS class is gf_scroll_text and it works like this:

Scrolling Text

And lastly, you can use gf_hide_ampm to hide the AM/PM selector in the time field, and gf_hide_charleft to hide the character counter in paragraph text fields where you have specified a maximum character count.

So now you can make your Gravity Forms look even better with these simple CSS classes.

Gravity Forms CSS Ready Class Selector

Better yet is that there’s a plugin called Gravity Forms CSS Ready Class Selector which avoids you having to remember or look up these CSS class names by adding a button beside the CSS Class name box, which brings up a little dialog box (as shown above) for you to choose from the available CSS classes.

Get Gravity Forms

19 thoughts on “Improve the Layout of your Gravity Form with CSS Ready Classes”

  1. I am not that tech savvy Dave that I can actually play with CSS. However it sounds good for those who can actually modify CSS so thanks a ton for sharing Dave.

    1. Well, that’s the whole point. You don’t have to touch any CSS, because they’ve already put everything in place. All you need to do is add the CSS classes to the appropriate fields as shown, and Gravity Forms will handle the rest.

  2. Bob Veris says:

    Terrific article. Thanks Dave … I was searching for a way to make my Gravity Forms look/feel better! Now how about changing the default font & sizes?

    Best of luck, BV

    1. Bob, you can target certain elements with some simple CSS rules. This tutorial is a great guide for making changes to all forms, specific forms, or specific form elements: http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/

  3. eddie h says:

    Any way to hide the drop down or radial button PRICE from view on the front end? So customer cannot see the price? Thx!

    1. I’m not quite sure what you’re trying to achieve, but would changing the Visibility setting from ‘everyone’ to ‘Admin only’ fix your problem?

      1. eddie h says:

        Hi Dave, thanks for the reply. On all of my drop drown and radial buttons for product add-ons, there is a price next to the option. If I toggle on ‘enhanced user interface’ the pricing is hidden but there are some bugs with toggling this feature on so I choose not to.

        Ultimately, I just want the user to be able to make their selection of product options without staring at hundreds of different price options. I want the calculations to still take place but without showing the price on the front end.

        Thanks in advance for the help!

      2. Dony says:

        I have the same problem dave. I have a a set of product addons as a radial list, but the price is displayed next to it on the customer end of the form. Is there any way to hide the price from being displayed on the final form and just the radial options???

        thank you

        1. I’m afraid I don’t know whether these can be hidden or not. Is the “Enhanced User Interface” option still buggy?

          1. Eddie H. says:

            They have not addressed the Enhanced User Interface bug(s) and I don’t think they will, not anytime soon at least. It’s a shame because the EUI looks so much nicer but in particular, their Quantity price calculating field will not work under EUI. Not sure why.

          2. Have you ever mentioned it in the support forums? They’re usually very receptive to issues and user improvements.

  4. Eddie H. says:

    Yup. I brought it up numerous times in both WOO and GF support forums and with tickets. No one can give me a concise answer and it’s become one of those things where no one wants to take ownership for it.

  5. Lori Adler says:

    Hi, this worked great! Just what we were wanting! I was able to do implement some of our questions to be horizontally displayed using the ready css class for 3 columns.

    I am researching a second question though. The main reason my staff wanted some of our gravity form questions in horizontal columns is so when the answers come to the staff, they can be viewed horizontally and columns, making it easier for staff to go through the many applications we receive for our services and review the data.

    Is there a way to also make the answers that come through on the backend, to display horizontally just like on the form questions. Thanks in advance for any assistance. I hope there is a way but wondering if it is default to display all answers vertically no matter how the questions appear on the form?

    Thanks
    LORI

    1. Lori, to the best of my knowledge, this applies only to the front end and there is no way to edit the display of responses in the back-end, not that I’m aware of anyway. Sorry!

  6. Lori Adler says:

    Hi Dave, Thanks for the fast reply. I had that feeling myself but I am no gravity forms expert so trying to ask around. I Did post on the support forums too just to get some insight! thanks again and appreciate your posts!

  7. jradar says:

    thanks for your tutorial!

    with a multipage form, i’ve found that the “next” button is floated up to the top of a page when i’ve applied a two column layout … any ideas? thanks

    1. Got an example that I can look at? I’ve not encountered that issue before.

  8. Chris says:

    Thank you for your article, this was very helpful. One question though, is there a class which will increase the width of the label column? Some of my form questions are long, and are wrapping to 2 or 3 lines, which makes it very hard to read.

    1. Chris,

      Yes, but not in the way that this article addresses. Each Gravity Form element has a very specific CSS class, so you can target all labels, or just a single label if you need to. You can use Chrome’s Inspector tool to find the class of the element that you’re trying to adjust.

Leave a Reply

7ads6x98y