Multi-column layouts allow you to place fields side by side instead of stacking them vertically.

This is useful when you want to:

• Create compact forms
• Place First Name and Last Name on the same row
• Group related fields
• Improve visual balance

In this guide, you’ll learn how to create 2-column and 3-column layouts.

Understanding Column Width

Each field has a Column Width setting inside Field Settings.

By default, fields use Full Width (100%), which means they take the entire row.

To place fields side by side, you change their width.

For example:

• 50% width + 50% width = two fields on one row
• 33% width + 33% width + 33% width = three fields on one row

Creating a Two-Column Layout

Let’s create a common example: First Name and Last Name side by side.

Step 1: Add Two Text Fields

1. Go to Basic Fields.
2. Click Text twice.
3. Rename them:
   • First Name
   • Last Name

Step 2: Set Column Width to 50%

For the First Name field:

1. Click the field in the Structure tab.
2. Go to Field Settings.
3. Find the Column Width option.
4. Select 50%.

Repeat the same for the Last Name field.

Both fields will now appear side by side in the preview.

Creating a Three-Column Layout

Let’s create three fields on one row.

Example:
City – State – ZIP Code

Step 1: Add Three Fields

Add three fields from Basic Fields (Text or Number).

Rename them accordingly.

Step 2: Set Column Width to 33%

For each field:

1. Open Field Settings.
2. Set Column Width to 33%.

All three fields will now appear on the same row.

Mixing Column Widths

You are not limited to equal columns.

You can mix widths for custom layouts.

Example:

• 70% width for a large field
• 30% width for a small field

Or:

• 50% + 25% + 25%

As long as the total does not exceed 100%, fields will align properly on the same row.

Responsive Behavior

On smaller screens (mobile devices):

• Multi-column layouts automatically stack vertically.
• This ensures your form remains easy to use.

You do not need to configure mobile behavior separately.

Best Practices for Multi-Column Layouts

✔ Use columns for related fields
✔ Keep forms visually balanced
✔ Avoid placing too many small fields in one row
✔ Always test the preview before publishing

Good examples:

• First Name / Last Name
• City / State / ZIP
• Start Date / End Date

Avoid:

• Long message fields in narrow columns
• More than three columns in most cases

Common Mistakes

Fields Wrapping to the Next Line

If a field moves to the next row:

• Make sure total width does not exceed 100%.

For example:
50% + 50% + 50% will push the third field down.

Uneven Spacing

If spacing looks off:

• Double-check column width settings.
• Ensure all fields on the same row use compatible percentages.

Example: Complete Contact Form Layout

Here’s a practical layout you can try:

Row 1:

• First Name (50%)
• Last Name (50%)

Row 2:

• Email (100%)

Row 3:

• Phone (50%)
• Subject (50%)

Row 4:

• Message (100%)

This creates a professional, balanced contact form.

Saving Your Layout

After adjusting column widths:

1. Review the live preview.
2. Click Save Form.

Your multi-column layout is now ready.

What to Learn Next

Now that you understand layout control, you may want to explore:

• Using Conditional Logic
• Customizing Form Width
• Editing Email Notifications
• Using Advanced Fields