Back to Documentation
Core Features
Multi-Column Layout System
Build professional, responsive form layouts with flexible column structures. Drag-and-drop fields, resizable columns, and mobile-responsive design.
10 min read
Updated December 2024
Overview
The Multi-Column Layout System is a powerful feature that allows you to create sophisticated form layouts with 1, 2, or 3 column configurations. Build professional forms with visual layout control, drag-and-drop field management, and responsive design that automatically adapts to mobile devices.
🎯
Visual Control
Click buttons to split rows into columns
↔️
Resizable
Adjust column widths with drag handles
📱
Responsive
Automatically stacks on mobile
🎨
Drag & Drop
Move fields between columns
Key Features
1. Row Management
- • Add Rows: Click "Add Row" button to create new rows
- • Delete Rows: Remove entire rows with delete button
- • Reorder Rows: Drag rows using the handle icon (⋮⋮)
- • Row Toolbar: Each row has its own control toolbar
2. Column Splitting
│
1 Column
Full-width (100%)
│ │
2 Columns
50/50 split
│ │ │
3 Columns
33/33/33 split
3. Column Resizing
- • Drag Handles: Vertical bars between columns
- • Minimum Width: 250px minimum to prevent squishing
- • Live Preview: See changes as you drag
- • Overflow Protection: Prevents columns from breaking container
4. Drag & Drop Fields
- • Within Columns: Reorder fields in same column
- • Between Columns: Move fields across columns
- • Between Rows: Drag fields to different rows
- • Visual Feedback: Hover states and drop zones
Getting Started
Step 1: Add a Row
- Open your form in the builder
- Click the "Add Row" button at the top of the canvas
- A new row appears with a single column (100% width)
- The row toolbar shows column split buttons (1, 2, 3)
Step 2: Split into Columns
- Click the "2 Columns" button in the row toolbar
- The row splits into two equal columns (50/50)
- Drag handles appear between columns for resizing
- Drop zones appear in each column for adding fields
Step 3: Add Fields to Columns
- Drag a field from the left sidebar
- Hover over the desired column - it highlights
- Drop the field into the column
- Field appears in the column with proper spacing
Step 4: Resize Columns (Optional)
- Locate the vertical drag handle between columns
- Click and hold the handle
- Drag left or right to adjust column widths
- Release to finalize the new widths
Pro Tip
Column widths are saved as percentages, so your layout remains proportional across different screen sizes.
Common Layout Examples
Contact Form (2 Columns)
First Name
Email
Phone
Last Name
Company
Country
Product Options (3 Columns)
Color
Size
Material
Finish
Quantity
Add to Cart
Shipping & Billing (Mixed)
Full Name (1 column - 100%)
Address Line 1
City
Address Line 2
ZIP Code
Responsive Behavior
📱 Mobile Breakpoints
Desktop
>768px - All columns displayed side-by-side
Tablet
768px - 3 columns become 2 columns
Mobile
<576px - All columns stack vertically (100% width)
Tips & Best Practices
✅ Do's
- ✓ Test on mobile devices before publishing
- ✓ Use 2 columns for most forms (best readability)
- ✓ Group related fields in same column
- ✓ Keep column widths balanced
- ✓ Use full-width rows for long fields (textarea)
- ✓ Maintain consistent spacing
❌ Don'ts
- ✗ Don't make columns too narrow (<250px)
- ✗ Don't use 3 columns for long forms
- ✗ Don't mix too many column layouts
- ✗ Don't forget mobile testing
- ✗ Don't overcomplicate layouts
- ✗ Don't stack more than 10 rows
Troubleshooting
Columns not resizing?
- Ensure you're dragging the resize handle (vertical bar)
- Check that minimum width (250px) isn't reached
- Try refreshing the form builder
- Clear browser cache if handles don't appear
Fields not dropping into columns?
- Verify the column has a drop zone indicator
- Try dropping field in center of column
- Check that row has been split into columns
- Ensure JavaScript is enabled
Layout breaks on mobile?
- This is expected - columns stack vertically on mobile
- Test using browser DevTools mobile view
- Adjust field order for better mobile flow
- Consider using fewer columns for better mobile UX
Master Multi-Column Layouts
Watch our video tutorial on creating professional form layouts
Watch Tutorial