Would you like to condense your forms by displaying fields in multiple columns? WPForms makes it easy to split forms into halves, thirds, or even more complex layouts.
In this tutorial, we’ll show you how to use our multi-column layout settings to help your forms look their best.
- Creating Multi-Column Forms with Visual Layouts
- Adding Multi-Column CSS Classes Manually
- Additional Notes for Using Multi-Column Layouts
Creating Multi-Column Forms with Visual Layouts
WPForms includes a visual layouts tool that enables you to create multiple columns without code.
To access this tool, click on any field in the builder to open its Field Options panel. Then click on the Advanced tab.
Open the visual layouts tool by clicking Show Layouts next to the CSS Classes option.
This will reveal several pre-made layout options that you can use in your form.
For our example, we want our Name and Email fields to appear next to each other, and for each to take up half of the form’s width. To create this layout, we’ll select the option that shows two evenly sized boxes.
Once we select this layout, we need to choose which column we want this particular field to appear in. Since our Name field is first in our form, we want it to appear in the left column.
When you click on a column in the visual layouts tool, the corresponding classes are automatically added to the field’s CSS Classes setting. The
wpforms-one-half class tells the field to take up half of the available width, while the
wpforms-first class tells the field that it needs to start a new row.
Next, we need to carry out the same process for our Email field. However, we’ll put it in the right column.
When you’re done adding your fields to your layout, be sure to save your changes in the form builder.
Here’s how our multi-column layout example looks on the frontend of our site:
Adding Multi-Column CSS Classes Manually
If you would prefer not to use the visual layouts tool, you can manually type CSS classes into the relevant field in the Advanced tab of the Field Options panel.
Here are all of the available CSS classes for multi-column layouts:
The image below shows 3 different common multi-column layouts. The labels indicate which CSS classes were used from the list above.
Note: The first field in each row in the image above also uses the
Additional Notes for Using Multi-Column Layouts
When using column classes there are a few important things to note:
- Columns do not apply in the form builder. They are only visible when viewing the form on the frontend of your site. Always test your forms before publishing them to make sure you’re happy with their layouts.
- The first field in each row must have the
wpforms-firstclass in addition to its column class. This tells the plugin it’s the first item and resets any other previous columns in the form.
- In most cases, when using column classes you should set the Field Size (also in the Advanced tab of the Field Options panel) to Large. This lets the field fill all available space in its column and keeps right and left spacing even against neighboring fields.
That’s it! You can now optimize your forms with multi-column layouts.
Next, would you also like to make your forms look great on mobile devices? You can configure your form to have a multi-column layout that changes to display fields in a single column on mobile, so it’s user-friendly on every device.