Formatting Fields Into Columns in Gravity Forms

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:

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.

The Results

Using the same, simple contact form above, when I added the column classes, it improves the look:

That’s all there is to it! I hope you’ve found this tutorial useful today.