Dressing Up Gravity Forms

Published: December 2nd, 2015

By: Diane Millican

Category: Apollo Theme (Web sites)

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.

Gravity Form Editor with the Appearance Tab Active

 

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.

Gravity Forms preview with vertical layout

Vertical Layout

Gravity Forms Preview Horizontal layout

Horizontal Layout

 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. 

Gravity Forms Inline List

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. 

Gravity Forms Inline List

 For more Ready classes and some more detailed information check out CSS Ready Classes for Gravity Forms

About the Author

Diane Millican

Diane Millican

Business Analyst

Diane is the Trainer for UF Health Web Services. She provides training and support for anyone using the WordPress UF Health template.

View profile | Find more posts by Diane Millican »