Creating Forms With Multiple Columns Using Gravity Forms

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.

This entry was posted in WordPress on by .

About 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).

Leave a Reply

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

4 thoughts on “Creating Forms With Multiple Columns Using Gravity Forms

  1. Bob

    I am using the four column layout in Gravity forms. However I need the 5 column layout. I modified the CSS to accomodate the 5 columns, but it still does not work. Is there something else I should be doing? Functions Php?

    /* 5 columns – fifths */

    .gform_wrapper .top_label li.gfield.gf_first_fifth:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm),
    .gform_wrapper .top_label li.gfield.gf_second_fifth:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm),
    .gform_wrapper .top_label li.gfield.gf_third_fifth:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm),
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm),
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth:not(.gfield_time_hour):not(.gfield_time_minute):not(.gfield_time_ampm) {
    width: 20%;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    float: none;
    }

    .gform_wrapper .top_label li.gfield.gf_first_fifth,
    .gform_wrapper .top_label li.gfield.gf_second_fifth,
    .gform_wrapper .top_label li.gfield.gf_third_fifth,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth {
    margin-bottom: 8px;
    }

    .gform_wrapper .top_label li.gfield.gf_first_fifth div:not(.ginput_container_date) input:not([type=’radio’]):not([type=’checkbox’]),
    .gform_wrapper .top_label li.gfield.gf_second_fifth div:not(.ginput_container_date) input:not([type=’radio’]):not([type=’checkbox’]),
    .gform_wrapper .top_label li.gfield.gf_third_fifth div:not(.ginput_container_date) input:not([type=’radio’]):not([type=’checkbox’]),
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth div:not(.ginput_container_date) input:not([type=’radio’]):not([type=’checkbox’]),
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth div:not(.ginput_container_date) input:not([type=’radio’]):not([type=’checkbox’]),
    .gform_wrapper .top_label li.gfield.gf_first_fifth div:not(.ginput_container_date) select,
    .gform_wrapper .top_label li.gfield.gf_second_fifth div:not(.ginput_container_date) select,
    .gform_wrapper .top_label li.gfield.gf_third_fifth div:not(.ginput_container_date) select,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth div:not(.ginput_container_date) select,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth div:not(.ginput_container_date) select {
    width: 100% !important;
    }

    .gform_wrapper .top_label li.gfield.gfield_error.gf_first_fifth,
    .gform_wrapper .top_label li.gfield.gfield_error.gf_second_fifth,
    .gform_wrapper .top_label li.gfield.gfield_error.gf_third_fifth,
    .gform_wrapper .top_label li.gfield.gfield_error.gf_fourth_fifth,
    .gform_wrapper .top_label li.gfield.gfield_error.gf_fifth_fifth {
    width: 19.75%;
    }

    .gform_wrapper .top_label li.gfield.gf_fifth_fifth:after {
    content: “”;
    display: table;
    clear: both;
    }

    .gform_wrapper .top_label li.gfield.gf_first_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_first_fifth input.large,
    .gform_wrapper .top_label li.gfield.gf_first_fifth select.medium,
    .gform_wrapper .top_label li.gfield.gf_first_fifth select.large,
    .gform_wrapper .top_label li.gfield.gf_first_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_second_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_second_fifth input.large,
    .gform_wrapper .top_label li.gfield.gf_second_fifth select.medium,
    .gform_wrapper .top_label li.gfield.gf_second_fifth select.large,
    .gform_wrapper .top_label li.gfield.gf_second_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_third_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_third_fifth input.large,
    .gform_wrapper .top_label li.gfield.gf_third_fifth select.medium,
    .gform_wrapper .top_label li.gfield.gf_third_fifth select.large,
    .gform_wrapper .top_label li.gfield.gf_third_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth input.large,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth select.medium,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth select.large,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth input.medium,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth input.large,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth select.medium,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth select.large,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth input.medium {
    width: 97.5%;
    }

    .gform_wrapper .top_label li.gfield.gf_first_fifth+li.gsection,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth+li.gsection {
    padding: 10px 0 6px 0;
    }

    .gform_wrapper .top_label li.gfield.gf_first_fifth+li.gfield,
    .gform_wrapper .top_label li.gfield.gf_second_fifth+li.gfield,
    .gform_wrapper .top_label li.gfield.gf_third_fifth+li.gfield,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth+li.gfield,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth+li.gfield,
    .gform_wrapper .top_label li.gfield.gf_first_fifth+.gform_footer,
    .gform_wrapper .top_label li.gfield.gf_second_fifth+.gform_footer,
    .gform_wrapper .top_label li.gfield.gf_third_fifth+.gform_footer,
    .gform_wrapper .top_label li.gfield.gf_fourth_fifth+.gform_footer,
    .gform_wrapper .top_label li.gfield.gf_fifth_fifth+.gform_footer {
    clear: both;
    }

    Reply
    1. Sara Thornton Post author

      Hi Bob,

      Thanks for your post. We’ve just written a plugin that will automatically do multi-columns for you. We’ve tested that 2, 3, 4 and 5 columns work, and theoretically more than this should also work (providing you’ve got the page space). We’re currently waiting for wordpress.org to approve the plugin, which can take up to 7 days, so here’s the link in the meantime, in case you’re on a deadline: http://www.webholism.com/extensions/wordpress/plugins/gravityforms-multicolumn/1.0.0/gravityforms-multicolumn-1.0.0.zip

      The plugin instructions will be visible in the Plugins > Installed Plugins area, once you’ve installed the plugin.

      Please do let us know how you get on?

      Best wishes,
      Sara

      Reply