How to Create Multi-Column Form Layouts in WPForms

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.

First, make sure you have WPForms installed and activated on your site. Then you can create a new form or edit an existing one to follow the steps below.

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.

Opening the Advanced Field Options panel

Open the visual layouts tool by clicking Show Layouts next to the CSS Classes option.

Opening the visual layouts tool

This will reveal several pre-made layout options that you can use in your form.

The multi-column options in the WPForms visual layouts tool

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.

Selecting a two-column layout

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.

Setting the first field in a multi-column layout

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.

Multi-column CSS classes applied to a field

Next, we need to carry out the same process for our Email field. However, we’ll put it in the right column.

Adding a field to the second column in a two-column layout

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:

A two-column form layout

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:

  • wpforms-one-half
  • wpforms-one-third
  • wpforms-one-fourth
  • wpforms-one-fifth
  • wpforms-one-sixth
  • wpforms-two-thirds
  • wpforms-two-fourths
  • wpforms-two-fifths
  • wpforms-two-sixths
  • wpforms-three-fourths
  • wpforms-three-fifths
  • wpforms-three-sixths
  • wpforms-four-fifths
  • wpforms-four-sixths
  • wpforms-five-sixths

The image below shows 3 different common multi-column layouts. The labels indicate which CSS classes were used from the list above.

Common multi-column form layouts, including two-column, three-column, and uneven two-column layouts

Note: The first field in each row in the image above also uses the wpforms-first class.

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-first class 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.

Changing the field size for a text field in a multi-column layout

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.