Gravity Forms seemed to have one design issue that made the forms, although very functional, less than optimal as far as layout was concerned.
But, it turns out that Gravity Forms has built in classes that can be used to create alternate layouts. Fields can be displayed two or three in one row rather than each field on it’s own row. Radio buttons or check-boxes can be displayed horizontally instead of just vertically. This layout capability comes from using Ready Classes. The Ready Classes are class names you can add to each form field to add pre-defined styles to that field.
Some ready classes that can be added are:
Halves (2 Columns)
- gf_left_half
- gf_right_half
Thirds (3 Columns)
- gf_left_third
- gf_middle_third
- gf_right_third
List Classes
To make a horizontal list of radio button or check-box choices use:
- gf_list_2col
- two evenly spaced items
- gf_list_3col
- three evenly spaced items
- gf_list_4col
- four evenly spaced items
- gf_list_5col
- five evenly spaced items
- gf_list_inline
- this will make an inline list of unevenly spaced items. It will fill the row and move down to the next row if necessary.
All that is required to change the layout is to add Ready Classes to the form fields. The area to add a Ready Class is in the Appearance Tab for each form field. To see the effect of the Ready Classes you will need to preview the form, they do not show in the Form Builder.
In order to take a vertical layout of three fields showing in three rows to three fields showing in one row, add gf_left_third to the first form field, gf_middle_third to the second field and gf_right_third to the third field.
See the Vertical layout below on the left and the Horizontal layout on the right below.
To turn a vertical list of days of the week in check boxes to a one row horizontal list evenly spaced out use gf_list_5col.
To turn a vertical list in check boxes to a one row horizontal list not evenly spaced out or more than 5 items use gf_list_inline.
For more Ready classes and some more detailed information check out CSS Ready Classes for Gravity Forms.