Form Fields in Columns

Form Fields in Columns add-on lets you organize your form layout by placing multiple fields in a single row, creating a clean, column-based structure.

Activating the Form Fields in Columns add-on

Form Fields in Columns is an Advanced add-on, available with a Profile Builder Basic, Pro, or Agency license only.

After purchasing a premium version of Profile Builder, you can check the following guide on how to install Profile Builder.

Modern Form Builder

To put fields side by side, insert a Columns block and drag two or more field blocks into it. They render as a horizontal row on the front end, and the editor shows the same layout.

The Form Fields in Columns panel has a single option, Render columns on the front end. Switching it off renders your Columns blocks as a normal vertical stack, which lets you disable the layout temporarily without pulling the blocks apart.

Columns blocks must sit at the top level of the form. They can’t be nested inside a Repeater or another block.

Classic Form Builder

To create forms with columns, after you install and activate the add-on, go to Profile Builder -> Manage Fields, and 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

Create column intervals

To set the column start, go to Profile Builder -> Form Fields -> Hover over a field, and you will see the “^” sign that you will need to click in order to add the start of the column.

Here’s an example of how it looks when column intervals are properly configured:

Back-end:

Front-end:

Remove column breakpoint

To remove a column breakpoint, simply hover over the one you want to delete and click on it.

Enable or Disable Form Fields in Columns

To enable or disable Form Fields in Columns on Profile Builder Registration and Edit Profile Forms, you will need to go to Profile Builder -> Manage Fields -> Form Fields in Columns -> Enable on.

After you check an option, click on the “Update Form Fields in Columns” button.

Multiple Registration and Edit Profile Forms integration

Inside Profile Builder Pro, we have 2 modules called Multiple Registration Forms and Multiple Edit Profile Forms that are used to create Custom Registration and Edit Profile Forms with different fields for different user roles.

Inside the settings page, we can choose if we want to enable Form Fields in Columns on our Custom Registration or Edit Profile Forms. You can enable or disable Form Fields in Columns for each individual form. It only works with Profile Builder Pro.

For both the Multiple Registration Forms and Multiple Edit Profile Forms, to enable the Form Fields in Columns functionality, you will need to enable it from its respective form.

Multiple Registration Form Settings

Publish the form before adding the column intervals.

Multiple Edit Profile Form Settings

Publish the form before adding the column intervals.

Multi-Step Forms integration

You can use the Form Fields in Columns functionality together with the Multi-Step Forms add-on to create step-by-step forms with fields neatly organized into columns on each step.

Here’s an example of how these two functionalities can be used together:

Back-end fields:

Front-end Step 1:

Step 2:

Step 3: