How to Create Multi-Column Form Layouts in WPForms

Would you like to clean up your forms by displaying fields in multiple columns? WPForms makes it easy to split fields into halves, thirds, or even more complex column layouts.

In this tutorial, we’ll show you how to leverage our multi-column layout settings to help your forms look their best.

To open the layout setting, you can click on any field in the builder to open its Field Options screen. From here, you’ll need to open Advanced Options. Columns are configured using the CSS Classes setting.

CSS Classes field

There are two ways to create layouts for your forms:

For either option, please also refer to our Additional Notes section which includes some details to ensure your multi-column form looks its best.

Add CSS Classes with Visual Layouts

It’s easy to structure your columns with our visual layouts tool.

Add CSS classes with visual layout tool

Here, we’ll discuss how to do this step by step.

From the Advanced Options section of the Field Options screen, you can select Show Layouts to see all available column options.

Select Show Layouts under Advanced Options

We want our Name and Email fields to appear next to each other, and for each to take up half of the form width. For this layout, we’ll select the option that shows two even-sized boxes.

Select a field layout option

Once we select this layout, the next step is to choose where in the layout we want this field to appear. Since our Name field is first on our form, we want it to appear on the left column.

Select the display column for a field

By clicking on a column, the corresponding classes are automatically added to our CSS Classes field. 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.

CSS classes for our layout

Next, we just need to do this same process to put the Email field in the right column. When you’re done, be sure to save the changes in the form builder and you’re all set to publish the form on your site.

Here’s how the form looks with the multi-column layout on the frontend of the site:

Multi column form

Add CSS Classes Manually

If you would prefer not to use the visual builder, you can type in CSS classes manually instead.

Here are all of the available CSS classes for 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-five-sixths

The image below shows three different common column layouts. The red text below each field CSS classes that were used from the list above. You can click the image for a larger view.

Available column classes in WPForms

Additional Notes for Layouts

When using column classes there are a few things to note:

  • Columns will display when viewing the form on the frontend of your site. The columns do not apply inside the form builder; however, that is something on our radar for the future.
  • The first element in each row needs to have the wpforms-first class in addition to the column class. This tells the plugin it is the first item and lets us reset any other previous columns in the form.
  • In most cases, when using the column classes you should set the Field Size(also under Advanced Options) to Large. This allows the field to fill all available space in its column and keeps right and left spacing even against neighboring fields.

Select a field size

That’s it! You can now optimize your form space with multi-column layouts.

Would you like your forms to also look great on mobile devices? You can absolutely configure your form to have a multi-column layout that changes to display fields in a single column on mobile, so your forms are beautiful and user-friendly on every device.

Related Articles