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: Continue reading