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