How to make a multi column form in WPForms

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.

WPForms is the best WordPress Form Builder plugin. Get it for free!

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.

add new form

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.

create blank form wpforms

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

Blank form loaded

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.

Layout field

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.

Note: You can also drag and drop fields into the columns you want to assign them to.

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).

left column active

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

left column populated

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

right column populated

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.

click layout field

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.

wide 2nd column

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.

4 column layout

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.

WPForms automatically creates responsive multi-column forms. This means that the form will collapse into fewer columns to fit into the smaller screen when viewed from mobile devices.

Step 4. Publish Your Multi-Column Form

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

Save button to save your form

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.

form builder embed button

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.

Creating a new page to embed your form on

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

Embed in new page

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:

Multi column form published

And that’s it! You can now easily create multi-column forms in WPForms without code.

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.

Using WordPress and want to get WPForms for free?

Enter the URL to your WordPress website to install.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

This form is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.