NOTE:We have released an updated drag and drop multi column layout builder addon using which you can created 2, 3, 4, 5, 6 column Layout. You can check it here.
Creating a multi-column layout form is a great strategy to make your forms look shorter. This is great for large screen devices like desktops, laptops and tablets but it is not so good for mobile phones. If multiple columns are displayed on mobile devices then the form fields will be too small to be easily view able. So, the best user experience is to have multiple ( 2 or 3 ) column layout to large screens and one column layout on phones.
2 and 3 column Layout in Gravity Forms without CSS coding?
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.
Requirements:
- 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 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 )’.
Settings for Grid layout.
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.
Video Tutorial for Creating 2 or 3 Columns in Gravity Forms
Below is the video tutorial showing you all the steps to convert your existing form form one column to multi column layout.
FAQ
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.
Which field will get focused on pressing TAB key?
Consider that you have created a 3 column layout for your form. Now, when you will press TAB key from the the first field ( left ) then the focus will shift to middle field. Pressing the TAB key in middle field will shift the focus the right ( last column ) field. So, the flow of fields is from left to right which is very intuitive.
Still stuck? Need custom solution? We can help
