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.
Thanks!!!