Gravity Forms Grid Layout plugin lets you create a multi-column layout with drag and drop. You can create 2, 3, 4, 5 and 6 column layouts using it. There are 20 different column layout designs you can choose from. You can also change the order of fields in it and all the changes you make are automatically synced with Gravity Forms editor as well as in the frontend.
In this article, I am going to show you how you can create a multi-column layout with Gravity Forms Grid Layout plugin.
- Once you have installed and activated ‘Gravity Forms Grid Layout’ plugin then edit the form for which you want to create the multi-column layout.
- Go to the ‘Grid’ option from the toolbar and then click on the ‘Enable Grid Layout’ checkbox. Now you will see your existing form arranged in the single column layout.
- Each row has 3 icons. The first icon is for selecting the layout, the second icon is to save the layout and the third one is for deleting the row.
- Once you have selected the layout for the row then you can drag and drop fields inside empty columns. Empty rows will automatically get deleted once you save the layout.
- You can also add a new row by clicking on the ‘Add Row’ link.
- You can also leave some columns in a row as empty and in the frontend, it will appear as you have created the layout in the backend.
- Checkbox and radio fields can be further divided into multiple columns.
- Each checkbox and radio field have a column layout icon. Clicking on it will give you the option to select one, two, three, four and five column layout option.
- There are no additional steps or shortcodes to show the grid in frontend. Whatever changes you make here will automatically show wherever you add the form in frontend.
- The grid design is fully responsive and will automatically get converted into a single column layout in mobile devices.
Here is the video tutorial for the above steps
FAQ’s for Gravity Forms Grid Layout Plugin
What happens when you add or delete fields after creating Grid?
Grid Layout plugin automatically tries to adjust the fields in columns if you delete or add fields from form editor. However, it is not perfect and you should always check the layout after making changes in the form editor.
Can multiple fields be added in one column?
In the current version, it is not possible to add multiple fields in a column. However, we are working on this feature and it will be available in upcoming versions.
Can fields be moved from one page to another?
You can’t move fields from one page to another. However, you are free to move fields in any given page.
Can I also arrange or move to submit button using this plugin?
Moving Submit button is not possible as of now and it will always appear at the bottom of the page.
Is it compatible with other Gravity Forms addons?
Yes, it should work with other official and 3rd party Gravity Forms addons without any issue. We have specifically tested it with material design and field icons addons and it worked flawlessly with them.