Multiple Columns for Gravity Forms

Description

This plugin requires the Gravity Forms plugin. Don’t use Gravity Forms yet? Buy the plugin and make your life so much easier!

This responsive-design plugin allows you to add multiple columns into your Gravity Forms form. Once this plugin is installed, you can create columns by using ‘starting’ and ‘closing’ Section elements which you then place your chosen column fields in-between. Each opening and closing set of Sections define a column. Use Section elements to enhance the form by adding separating rows.

Screenshots

  • Creating a Section start for the start point of column one.
  • Creating a Section end for the end point of column one.
  • Creating a Section start for the start point of column two.
  • Creating a Section end for the end point of column two.
  • Creating a Section for a new row.
  • Wide screen display of a 3 row, multiple column form.
  • Mobile/narrow screen display of a 3 row, multiple column form.

Installation

  1. In your WordPress admin panel, go to Plugins > New Plugin, search for “Multi Column” for WordPress, find the “Gravity Forms Multi Column” plugin and click “Install now”.
  2. Alternatively download the zip file, unzip, and upload the gf-form-multicolumn folder (and files) to your plugins directory, which usually is /wp-content/plugins/.
  3. Activate the plugin through your Plugins area.
  4. Create columns by adding a Standard Fields > Section directly above and below the form elements that you want to be in that particular column. E.g. for a two column form with one Drop Down in each column, create the following form elements in the order listed below:

    Standard Fields > Section – Starting Section 1

    Standard Fields > Drop Down – Column 1 content

    Standard Fields > Section – Ending Section 1

    Standard Fields > Section – Starting Section 2

    Standard Fields > Drop Down – Column 2 content

    Standard Fields > Section – Ending Section 2
  5. For starting Sections put “split-start” in the Section > Appearance > Custom CSS Class field.
  6. For ending Sections put “split-end” in the Section > Appearance > Custom CSS Class field.
  7. If you want more than one row of multiple columns, add a Standard Fields > Section with “new-row” in the Section > Appearance > Custom CSS Class field, in-between the rows of multiple columns (e.g. if you have 3 rows of multiple columns, you’ll need a “new-row” Section between rows 1 and 2, and also a “new-row” Section between rows 2 and 3).
  8. Update Form.

FAQ

Does it matter if my sections contain a Field Label in the form?

No. However you may find it useful to use Field Label text such as ‘Start of Column 1’, ‘End of Column 1’, etc. These will not be visible in the front end of your website.

How many columns can I make?

We’ve tested 2, 3, 4 and 5 columns. Theoretically you can have more, although this will depend on your theme and the amount of screen space you have.

How many rows of multiple columns can I make?

We’ve tested 2 and 3 rows, and theoretically you can have as many as you like. Go crazy, and let us know how you get on!

Can I use this plugin with multisite?

From version 2.1.0 multisite is supported.

Which version of Gravity Forms is this plugin compatible with?

It has been tested with version 2.0.7 and above, but please do contact us if you’re experiencing a problem with your version of Gravity Forms.

Reviews

Great Plugin & Help

Hi All,

I had some real trouble beyond the scope of work with integrating multiple columns in my website. I cannot say enough how amazing and awesome JJ is at webholism. JJ did not expect anything in return and just helped me because I needed it. Even though it was outside the scope we would work together on trying to make my Gravity Form work. If you did not give JJ and the team five (5) stars then you did not try and reach the team. There are always improvements in every single program so while every plugin may not be worth a five customer service will definitely help get you there. If you need something to work out of the box quickly and you do not have a complex form then this plugin is definitely for 100% worth it. If you need customization JJ may be able to offer you a different solution but this plugin will help get you by till you get a chance to customize your form with multiple columns. However, all that being said for a multi-column solution in Gravity Forms this is the best one I found and I am an amateur at coding but spent hours of time researching. Thanks JJ one million times thank you.
-Smoothness007

Awesome Plugin

Great plugin, works perfect and saved me a ton of frustration! Super fast response from support as well when I needed help with something.

Works great!

Great plugin for creating, as it says, multiple columns in gravity forms!

Does what it says, but not in prevoew

A simple plugin that does what it is supposed to be doing. However, don’t rely on Gravity Forms preview becuase it doesn’t show different columns. At least it didn’t for me. I had to put the form on a page and then I get multiple columns!

Works great

The plugin works great. A bit strange on configurations, but it does work great.

Read all 14 reviews

Contributors & Developers

“Multiple Columns for Gravity Forms” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

2.1.1

  • Fix: Removed inaccurate output code that had been used for testing multisite functionality.

2.1.0

  • Fix: Removed Network: True value to allow activation on individual multisite sites.
  • Improvement: Introduced new CSS style: li[class*=”column-count-1″] > div > ul to remove left margin and padding rules.
  • Improvement: Improved readability of the readme.txt file instructions for setup.
  • Improvement: Added Plugin URI value to reduce chances of conflict with other plugins of similar naming convention.
  • Improvement: Changed name of plugin to align with recommendations provided by WordPress.

2.0.1

  • Fix: Altered primary file as array syntax [] was not functioning on sites with PHP version < 5.4.

2.0.0

  • Improvement: Introduced row functionality. Changes to primary php file and CSS definitions.

1.0.1

  • Improvement: Alterations to readme.txt
  • Improvement: Description altered in primary file.

1.0.0

  • Initial Release