Skip to main content

Creating Forms With Multiple Columns Using Gravity Forms

Written on . Posted in WordPress.

Editors Note: This article was updated on 21st Sept 2016.  To make life easier, we wrote a plugin to do the job for you, so you no longer need to get your hands messy with CSS code (hence why the lower part of this blog post has the text crossed out).  Simply install the plugin from the WordPress website (or search for Multi Column through your WordPress website Plugins area, find our Gravity Forms Multi Column plugin and install it), activate the plugin, and follow the instructions to create multiple columns in a flash!

 

Gravity Forms is (in our opinion) the best form plugin there is for WordPress, however it can sometimes be a little tricky to split your form in multiple columns.

 

The Inbuilt Gravity Forms CSS-Ready Classes

If you only want to spread two or three fields or a group of checkboxes/radio buttons across 2, 3, 4 or 5 columns, then Gravity Forms have inbuilt functionality to handle this with a guide here: https://www.gravityhelp.com/css-ready-classes-for-gravity-forms/.  The short version: edit the affected fields and for 2 columns put gf_left_half (for the field you want to be on the left) and gf_right_half (for the field you want to be on the right) in the CSS Class Name box.  For 3 columns put gf_left_third (for the field you want to be on the left), gf_middle_third (for the field you want to be in the middle) and gf_right_third (for the field you want to be on the right) in the CSS Class Name box.

 

But That Doesn’t Work For Sections

If you want to spread multiple sections (with each section containing one or more fields within it) across multiple columns, then this is a different matter and requires a different solution.

Our solution is as follows:

  1. Backup your website.
  2. Install the following plugin: Gravity Forms Multi Column (Please make sure you have Gravity Forms installed first).
  3. Activate the plugin and follow the plugin directions to set up multiple columns in the blink of an eye.
  4. Navigate to your form in Gravity Forms.
  5. Go to Form Settings > Form Layout > CSS Class Name and enter either two-column or three-column depending on the layout you would like.
  6. Click Update Form Settings button.
  7. Go to the Form Editor.
  8. Keep (don’t delete) your existing Section elements and add new placeholder Section (Standard Field) elements (be aware that the number of placeholder Sections will need to mirror either two or three based on what you picked in step 5).  Note that these will not be used to display anything to the screen, so if a section header is required, it should be placed after each new placeholder Section element.
  9. For each of the Sections added in step 8, go to Appearance > Custom CSS Class and enter gform_column .
  10. Organise the rest of your form elements to sit below their relevant Sections (if needed).
  11. Then, just style your form as needed by editing the CSS stylesheet for your template (ideally in a custom.css file, if your template supports this) through either FTP or through the WordPress Theme Editor.  A good starting point for a three column form would be to add the below code to your CSS file:

ul.gform_fields.top_label.form_sublabel_below.description_below.gform_column { display: block; padding: 0 2%; float: left; width: 30%; }

 

Have Questions?

Pop them in the comments box below and we’ll get back to you as soon as possible.

Sara Thornton

Sara is a Jack (or Jill) of many trades. A web designer and developer, an ethical SEO implementer, an AdWords advocate, as well as being our in house user-guide creator and trainer. In her spare time she loves a bendy/stretchy yoga session, and feels most happy when she's near the ocean (ideally with a ridiculously absorbing book).

Comments (4)

Leave a Reply

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