How to create multiple columns in Gravity Forms

Home / Gravity Forms / How to create multiple columns in Gravity Forms

If using Gravity forms, It is likely that you will require columns sooner or later. The reason is simple – gravity forms are normally not used for simple contact forms, given their power and the fact that they are not free, so licenses for GF are being purchased by clients who know exactly what are they looking for.

Some forms tend to be very big, spanning over multiple pages. Thankfully, this feature is built in into gravity forms by default, but creating columns is not. You may be tempted to try any of CSS ready classes, but I’m not really sure how convenient they are for any advanced layout with multiple fields in each column.

As it is the case with most great WordPress plugins, Gravity Forms also offers a wide variety of hooks and actions enabling you to extend its functionality. If you tried to Google something like “GF multiple columns”, there is chance that you stumbled upon this solution, created by some great folks in Jordan Crown Web Design. Afterwards, this solution was slightly altered and published on Stack Overflow. They suggest that you should put this code into functions.php,  but I prefer wrapping the whole thing into plugin, because having multiple columns in Gravity Forms is not a matter of the theme, but a matter of a plugin and I bet that sooner or later you will change the theme and in that case you would lose the column functionality.

1. Add a plugin

So this is how it goes – first we have a plugin ( you can download it here) – not much code added, only plugin headers.

2. Form settings

The combination of section breaks and few CSS classes is what activates this thing. First of all, you need to add CSS class name on the whole form. Use either two-column or three-column, depending on what kind of layout you want to achieve.

gravity1

3. Section breaks

Once you did this, you can refer the following image – for every column you need, you’ll want to add custom CSS class on section break. That CSS class needs to be gform_column. Be aware that if you don’t put brakes on a page, nothing will appear on that page, so these are kinda mandatory.

gravity2

4. Custom CSS

Eventually, you’ll need some CSS. This is just an example for two columns, so you will likely want to add margins, padding, etc.

That’s all folks!