How to Make a Multi-Column Form in WPForms

Do you want to create multi-column forms in WPForms?

Designing a form with multiple columns can help make a complex form more compact. And that often translates to a better user experience, meaning more conversions!

In this article, we’ll show you how to use a multi-column form layout in WPForms to reach your maximum conversion potential.

Create Multi-Column Forms Now

What’s the Benefit of a Multi-Column Form Layout?

Multi-column forms can be very beneficial from a user experience standpoint. One common scenario where multi-column forms come in handy is when you have a form long enough to have a vertical scroll.

In this scenario, you can reduce the length of the form and make it more compact by ordering your fields into two or more columns.

Similarly, when embedding a long form into a sidebar, it may fit better and reduce vertical scroll if you use a column layout.

There’s no one-size-fits-all approach to effective form design, which is why it’s so important to have different layout options available for different scenarios.

How to Make a Multi-Column Form in WPForms

Making a muti-column form in WPForms is incredibly easy. Before starting, make sure you have a WPForms Pro license because you’ll get the Layout field along with tons of useful features with this plan.

When you’ve purchased the license and installed WPForms on your site, just follow the steps below to create column layouts in your form.

Step 1. Create a New Form

Let’s start by creating a new form with a columns layout. To do that, open your WordPress dashboard and go to WPForms » Add New.

This will open the WPForms form builder interface. You can enter a name that you’d like to call your form and select a template.

For this example, let’s build a form from scratch. This will allow us to first choose a multi-column form layout and then assign different fields to each column as we see fit.

However, WPForms has several ready-made templates that use multiple columns, such as the multi-column contact form template.

To create a form from scratch, hover your cursor over Blank Form (this should be the first item in the template list) and press Create Blank Form.

WPForms will now load a blank form that you can start building using simple drag and drop controls.

Now, let’s add some fields to this form and arrange them in a multi-column layout.

Step 2. Add Fields to Column Layout

In order to split an area of your form into multiple columns, you just need to add the Layout field.

Simply look under the Fancy Fields section on the left-hand pane, and drag and drop the Layout field onto the form on your right.

Now, we’re going to add the Name, Email, and Phone field on the left-hand column and an Address field to the right column.

The easiest way to do that is by clicking a column to make it active and then clicking the fields we want to add to that column.

Let’s start by assigning fields to the left column first. We’ll click the left column to set it as active (as indicated by the upward arrow).

Now, we’ll click on the Name, Email, and Phone fields so that they get directly added to the active column one by one.

Next, we’ll repeat the same process for the column on the right and add the Address field to it.

Great! This 2-column form is now looking in good shape.

But what if you wanted different widths for the two columns? Or maybe even more than 2 columns?

WPForms makes all of that possible as we show in the next step.

Step 3. Customize the Form Layout

By default, the Layout field creates 2 equal-sized columns in your form. But you can choose from 8 different layouts and add up to 4 columns in a single form.

To select a layout preset, simply click on the Layout field after it’s added to your form.

After that, simply select a layout that works best for you. For instance, if you’d like a narrow column on the left but a wider one on the right, you can go with the 3rd layout option.

If you’d like to have 4 columns on your form, simply choose the matching layout option from the left-hand pane and drag and drop the fields to their respective columns.

We recommend experimenting with different layouts and previewing your form on the frontend to check that everything looks fine. Our guide to designing form layouts will give you a good start.

Sometimes, your chosen form layout may not go well with your page layout and lead to alignment issues. But if you do your form testing well and check everything before publishing, this shouldn’t be a problem.

Step 4. Publish Your Multi-Column Form

When you’re happy with how your form looks, press the Save button on the top right.

Now, it’s time to go to the final step of publishing it.

To begin the embed process, click on the Embed button next to Save.

After pressing the Embed button, you’ll see a modal asking whether you’d like to embed your form in an existing page or create a new one. We’ll go with the Create New Page option, but the steps are very similar in either case.

Give a name to your page and press Lets’ Go.

You’ll find the form embedded within this new page. Make any edits using the WordPress editor here, and when you’re satisfied, press Publish.

Here’s what a published multi-column will look like when viewed from the frontend:

And that’s it! You can now easily create multi-column forms in WPForms without code. Don’t forget: you can also style your forms in the block editor with ease.

Next, Utilize Net Promoter Score for Surveys

If you’re trying to gauge customer satisfaction levels, the best survey instrument you can use for that is the Net Promoter Score (NPS).

WPForms makes it really easy to create survey forms with the Net Promoter Scale as we explain in this guide.

If you’re having some challenges with users not entering their email addresses correctly, here’s how to add a confirm email address field to prevent this. Also, you might find our guide to the top ‘how did you hear about us’ survey questions interesting.

And, if you’re unsure about which spam prevention tool you should use on your forms, see our comparison on Akismet vs reCAPTCHA.

Create Multi-Column Forms Now

Ready to build your form? Get started today with the easiest WordPress form builder plugin. WPForms Pro includes lots of free templates and offers a 14-day money-back guarantee.

If this article helped you out, please follow us on Facebook and Twitter for more free WordPress tutorials and guides.