Column Layout

Column layouts let you arrange multiple form fields side by side instead of stacking them vertically. This creates a more compact form and can group related fields visually.

When to Use Column Layouts

Column layouts work well for:

• First name / Last name side by side
• City / State / Zip code in a row
• Start date / End date together
• Related short fields
• Creating more compact forms

How to Add Column Layouts

Ask the AI in the chat panel:

Example prompts:

• "Put first name and last name side by side"
• "Arrange city, state, and zip code in columns"
• "Put the start date and end date next to each other"
• "Create a 2-column layout for contact details"

Using the Manual Editor for Column Layouts

You can also create column layouts manually using drag and drop in the form editor's Edit mode.

Creating a Column

1. Switch to Edit mode using the Preview/Edit toggle in the form preview panel
2. Drag one field onto another field - this creates a column with both fields side by side
3. The fields will automatically share the available width equally

Adding More Fields to a Column

To add a third field to an existing column:

1. Drag another field into the column area
2. The new field will be added to the column, and all fields will share the width equally

Reordering Fields Within a Column

To change the order of fields within a column:

1. Drag a field within the column to a new position
2. Drop it in the desired location

Removing a Field from a Column

When you click on a column, an opt-out button (a circular button with an icon) appears at the top of the column. Click this button to remove a field from the column and return it to a standard vertical layout.

Layout Options

Customization Options

Two Columns (Equal)

"Put first name and last name in two equal columns"

Three Columns

"Arrange city, state, and zip in three columns"

Grouping Fields

"Group all address fields in a column layout"

Common Use Cases

Name Fields

┌─────────────────┬─────────────────┐
│ First Name      │ Last Name       │
└─────────────────┴─────────────────┘

Address Section

┌───────────────┬─────────┬────────┐
│ City          │ State   │ ZIP    │
└───────────────┴─────────┴────────┘

Date Range

┌─────────────────┬─────────────────┐
│ Start Date      │ End Date        │
└─────────────────┴─────────────────┘

Related