It is possible to create 2 and 3 column responsive layout in Gravity Forms without any CSS coding with the help of Grid Layout plugin. In this tutorial, I will explain and demonstrate all the steps in detail by which you can create a multi-column layout for your form.
- Gravity Forms
- Gravity Forms CSS plugin
- Grid Layout addon.
- First, you need to install Styles & Layouts plugin. This free plugin lets you design your form without any CSS coding. You can read more about it here.
- Once you have ‘Styles & Layouts’ plugin activated and installed then you need to install Grid Layout plugin. This plugin lets you convert your Gravity Form fields into multiple columns with a live preview of changes.
Steps to Create a 2 and 3 Column Layout in Gravity Forms
- Login into WordPress admin account and then go to Forms and click on edit link of the form for which you want to create 2 and 3 column layout.
- Now click on ‘Styles & Layouts’ option from the form editor menu. This will open the form preview along with ‘Styles & Layouts’ customizer options.
- Go to Grid Layout section and here you will see all the fields of your form along with the option to align them in 2 or 3 columns.
- To align a field on the left side in a 2 column layout select the position from dropdown as ‘Left ( 2 Column)’ and to align the next field to the right side you have to select ‘Right ( 2 Column )’. This will put the two fields side by side in desktop and tablet view and in mobile view they will take full width so, this is completely responsive.
- To align a field on the left side of a 3 column layout you should select ‘Left ( 3 Column )’ position , for moving the next field to center of 3 column layout you should select its position as ‘Middle ( 3 Column )’ and to align the next field in 3rd column you should change its position to ‘Right ( 3 Column )’.
Note: To align a field to right in 2 column layout, its previous field must be aligned to left else the settings won’t take effect. Same goes for 3 column layout, where the three consecutive fields should be given left, middle and right positions.
Here is a tutorial for creating 2/3 layout in Gravity Forms.
Is it possible to have some fields aligned in 2 columns and others in 3 columns in a single form?
Yes, you can use 2 column layout for some fields and 3 column layout for others.
Will the columns break into a single row in Mobile devices?
Yes, the columns will break into a single row in mobile devices so that your fields don’t become so small in width that it becomes difficult to fill them.
On how many forms can you apply multi-column layout?
You can apply multi-column layout on any number of forms on your website.
Which fields are supported by the Grid Layout plugin?
The grid layout plugin supports all the available ( Standard, Advanced, Pricing, Post ) fields.
Will this also work for radio and checkboxes?
Yes, it works for radio and checkbox fields as well. You also get special layouts for them like 4 column layout, 5 column layout, and inline display.