Blog / General / How I Build 2 (or Even Multi) Column Forms The Easy Way

How I Build 2 (or Even Multi) Column Forms The Easy Way

2 column forms
Carmen Carstoiu
Last Updated: 31/07/25

Nobody enjoys lengthy, disorganized forms, let’s face it. Whether it’s a checkout form or a registration page, users are much more likely to finish it if it seems brief and easy. In this case, 2 column forms might save the day.

In this post, I’ll explain why they are a wise choice for improved user experience, what to avoid when creating them, and how to quickly set them up in WordPress using the Form Fields in Columns add-on and Profile Builder. Simply drag, drop, and publish (no code is required).

Let’s get started.

Why Use 2 Column Forms?

If you have ever filled out an endless form, you are familiar with the sensation of scrolling, scrolling, and then… quitting. When forms seem excessively lengthy or haphazard, users leave.

However, 2 column forms allow you to:

  • Cut down the vertical space to make the forms appear shorter
  • Create a cleaner, more professional look (especially on desktop)
  • Group related fields next to each other to improve flow
  • Improve completion rates by making the form easier to scan

Tips for Structuring a 2 Column Form

Here are some important best practices to remember before you start using columns to build your form. These can assist you in avoiding typical usability errors and guarantee that your forms perform better rather than merely look better.

Maintain top-to-bottom logic

Even in a multi column form, users still scan from top to bottom. The field order should make sense vertically, not just left-to-right.

  • For example, a bad layout would look like:
form fields in columns
  • Whereas a better layout should look something like this:

Only group related fields

For the sake of symmetry, it is tempting to put two fields in each row. However, that only functions if the fields make sense. For instance:

✅ First & Last Name

✅ City & ZIP Code

❌ Email & Password (different mental steps = cognitive friction)

Stick to logical groupings that reduce your users’ effort, not increase it. Also, make sure to only include the custom fields you actually need, and not overcrowd your form.

Use headings to break up sections

Use distinct headings to divide your form into sections if it is lengthy or gathers a variety of information. This way, users will find it easier to read and feel less overwhelmed. For instance:

  • Credentials
  • Personal Info
  • Account Details
  • Billing Info

Additionally, this gives the form a more structured and professional feel.

Use pre-made templates if possible

Instead of starting from scratch, many form plugins provide pre-built templates that offer you a good starting point. These templates help you get the structure right faster and can be fully customized to match your layout and field needs.

Using these types of templates, besides making everything easier for you, they also leave less room for error in displaying the form, since multi-column structures can be very tricky.

Always test on mobile

While multi-column forms can look clean and efficient on desktop, they often don’t translate well to smaller screens. Most mobile devices simply don’t have enough space to comfortably display form fields side by side, and forcing columns can lead to cramped layouts, hard-to-read inputs, or even broken forms.

That’s why I think it’s generally best to stack fields vertically on mobile, ensuring that everything remains readable, accessible, and easy to complete. That’s why I like Profile Builder, because it takes care of this automatically.

If you’re really set on keeping columns on mobile, you can still do it with some custom CSS.

Just a heads-up though: it can be risky. Since screen sizes vary so much, it can be tricky to make sure everything looks great everywhere. So if you go this route, be prepared to test things out on multiple devices to make sure the form still feels clean and easy to use.

How I Build a Multi Column Form in WordPress (The Easy Way)

For this tutorial, I’m using Profile Builder Pro and the Form Fields in Columns add-on. With just a few simple clicks, it’s by far the easiest method for creating 2-column forms and even more complex layouts like multi-steps forms.

Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Get Profile Builder

Step 1: Install Profile Builder Pro and activate the Form Fields in Columns add-on

Profile Builder installs and is activated just like any other WordPress plugin. All you have to do is:

  • Go to the official website and choose your preferred plan. After purchasing the plugin, you’ll be able to download it from your Account page (you’ll need to download both the main plugin and the pro version).
  • In your WordPress website, navigate to Plugins → Add New and hit the Upload Plugin button at the top.
  • Choose your downloaded files, hit Install Now, and make sure to also Activate them after.

Next, simply head over to Profile Builder → Add-Ons, and activate the Form Fields in Columns add-on.

add-on for creating 2 column form in wordpress

Step 2: Start with a form template and customize your fields

Now, before we get to the form structure, let’s customize the form’s overall look and feel.

Templates are a great way to save time because they give you a good structure right out of the box, giving you the possibility to tweak them however you like. To access Profile Builder’s form templates, just go to Profile Builder → General Settings tab in your WordPress dashboard, and locate the Design & User Experience section.

profile builder form templates

Choose the template that best matches your website’s design, and then, if you want to customize it some more, you can do so from the Color Switcher. To enable the Color Switcher, navigate to the Advanced Settings tab, and go to the Forms subtab.

Once your form looks exactly like you envisioned, head over to Profile Builder → Form Fields to set up your desired form fields. In this area, you can manage all your fields, no matter if they are registration forms or edit profile forms.

You can:

  • Add standard fields like First Name, Email, or Password
  • Drop in more advanced fields like File Uploads, GDPR Consent, Date Pickers, or even Repeater fields
  • Rearrange field order, change visibility settings, and fine-tune the layout.

Quick note: if you want to create multiple registration forms, for example, you can also customize each and every one of them to match your desired layout.

Step 3: Use column groups to customize the layout

After activating the add-on, you will have access to the following options:

  • Create column intervals – Clicking on the “˄” and “˅” icons allows you to turn your Profile Builder Registration and Edit Profile forms into column-based forms.
  • Remove column breakpoint – By clicking on the same icons, you can unset the column start/end.
  • Enable or Disable Form Fields in Columns – Choose to enable or disable Form Fields in Columns only on specific forms.

So, let’s start simple. To create a 2 column form, I will group the First Name and Last Name fields in columns by clicking on the dedicated icons.

It should look like this in the back-end:

2 column form in wordpress using profile builder pro

And something like this on the front-end:

2 column form on website front end

The same process goes for a 3 column form.

This is how it will show in the back-end:

And this is on the front-end:

3 column form on website front-end

But what if you want to have a multi column form, with both 2 and 3 columns? That’s easy.

Just group your fields however you want. Like this, for example:

And then view it on the front-end:

As you can see, you can freely mix 2 and 3 column sections in the same form. This gives you full control over how your form is organized.

Start Testing Now And See What Works Best For You

Improving your forms is one of the easiest (and most overlooked) ways to increase signups, improve engagement, or simplify the onboarding process.

So if you’ve been looking for a way to make yours more user-friendly, 2 column forms are a simple, effective upgrade.

Give it a try, and let me know in the comments how your form looks after the switch!

Profile Builder Pro

Create beautiful front-end registration and profile forms with custom fields. Setup member directories, custom redirects, cutomize user emails & more using the all in one user management plugin.

Get Profile Builder
From the blog

Related Articles

Create Divi Membership Site using Paid Member Subscriptions

How To Create a Divi Membership Site

Author: Maria
Last Updated: April 23rd, 2024

If you’re thinking of building a membership site in WordPress, you’ll need a solid theme and a membership plugin that pairs well with it. In this complete guide, we’ll show you how to create a Divi membership site using the popular Divi theme in combination with the Paid Member Subscriptions plugin.

Continue Reading

How to Hide Products by User Roles in WooCommerce?

Author: Rishi Lodha
Last Updated: September 25th, 2024

Do you want to easily hide products by user roles in WooCommerce? Some WooCommerce store owners have a unique requirement where they want to hide certain products from all but a few specific groups of users. There may be many reasons for this, including selling exclusive products only to the more loyal customers, with a […]

Continue Reading

WordPress User Registration

Author: Cristian Antohe
Last Updated: February 24th, 2020

Have you hit a road block when it comes to WordPress user registration? You probably would like to have new users register before being able to take certain actions (for example, posting reviews or commenting) but do not want them to have access to the WordPress Dashboard? Truth is, WordPress User Registration doesn't have to […]

Continue Reading

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.