Formatting Fields Into Columns in Gravity Forms

Bright white decorative image of large white columns in a line

Update: The column classes discussed in this tutorial are deprecated by the column features built directly into the Form Editor in Gravity Forms 2.5.

Greetings! If you are a Gravity Forms user, today’s tutorial is for you. I wanted to share a simple tip that can improve the look of your forms using built-in column classes in Gravity Forms. These classes arrange your form fields into nice, neat responsive columns.

Default Field Placement

When creating a Gravity Form, as you add fields they are placed in a single column on the left side of the form. If you have a lot of fields to add, this can get quite long and is not very readable:

screenshot of a Gravity Forms simple contact form

Using Column Classes

Gravity Forms has two built-in CSS classes that are easy to add to your form’s field settings:

gf_left_half
gf_right_half

To apply these classes:

On your form, go to the field and click the drop-down arrow on the top-right of the title to show settings.
Click on the Appearance tab.
Enter the appropriate class name in the Custom CSS Class field.
Repeat this on all the fields you’d like in columns, and remember to click Update when you’re finished.