• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ginger Coolidge

Delivering WordPress Solutions

  • Home
  • Solutions
  • Blog
  • Gear
  • About
  • Contact

Formatting Fields Into Columns in Gravity Forms

Published: July 24, 2017 - Updated: March 20, 2022

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.
screenshot of gravity form Appearance settings for gf_left_half class
screenshot of gravity form Appearance settings for gf_right_half class

The Results

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

screenshot of gravity forms contact form using built-in columns classes

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

Filed Under: Tutorials, WordPress Tagged With: Gravity Forms

About Ginger Coolidge

I'm here to offer quality, clean-reading websites using WordPress that can serve you for the long haul. If you're not sure where to start, you're in the right place!   About Me

Reader Interactions

Comments

  1. Julio says

    August 8, 2019 at 12:40

    Thanks!!!

    Reply
  2. Vintecap says

    November 6, 2019 at 02:47

    Gracias

    Reply

Share your thoughts... Cancel reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Primary Sidebar

Gravity Forms

WP Engine

Essence Pro

Mai Theme

mai theme image of a demo site

Keep In Touch

You betcha! I would be tickled pink send you my latest posts.

*I use affiliate links sprinkled throughout this site. If your click results in a sale, at no cost to you, I may earn a small commission.
To see a full list, go here to learn more.


© 2022 · All Rights Reserved · GSC Solutions LLC · Proudly Powered by WordPress & hosted on Flywheel