Form Builder Guide

Master the NexusForm builder with this comprehensive guide to all its features and capabilities.

Builder Interface Overview

Header Bar

The header contains:

• Form Name - Click to edit
• Undo/Redo - Go back or forward through changes
• Device Preview - Switch between mobile and desktop views
• Preview - See your form as customers will see it
• Save - Save your form
• Publish - Make form available on your storefront

Left Sidebar Tabs

Switch between different panels:

Tab	Purpose
Elements	Browse and add form fields
Structure	View form structure as a tree

Right Sidebar Tabs

Configure your form and fields:

Tab	Purpose
Elements	Field properties and validation
Appearance	Colors, styles, and layout
Settings	Form behavior and success actions
Email	Email notification settings

Working with Fields

Selecting Fields

• Single click on a field to select it
• Selected fields show a blue border
• Right sidebar updates to show field properties

Field Properties

Every field has these common properties:

Basic Settings

Property	Description
Label	Text displayed above the field
Placeholder	Hint text inside empty fields
Description	Help text below the field
Name	Technical identifier for submissions
Show Label	Toggle label visibility
Label Alignment	Left, center, or right align

Validation

Rule	Description
Required	Field must be filled
Min Length	Minimum characters (text fields)
Max Length	Maximum characters (text fields)
Min Value	Minimum number (number fields)
Max Value	Maximum number (number fields)
Pattern	Custom regex validation

Custom Error Messages

Override default validation messages:

Required: "Please enter your name"
Min Length: "Name must be at least {{minLength}} characters"
Pattern: "Please enter a valid format"

Available placeholders: {{label}}, {{minLength}}, {{maxLength}}, {{min}}, {{max}}

Responsive Layout

Column Span

Control field width using the 12-column grid:

Span	Width	Use Case
12	100%	Full width (default)
6	50%	Half width - two fields per row
4	33%	Third width - three fields per row
3	25%	Quarter width

Responsive Overrides

Set different layouts for different screen sizes:

• Mobile (sm) - Phones and small screens
• Desktop (lg) - Laptops and larger screens

Drag and Drop

Adding New Fields

1. Find the field in the left sidebar
2. Drag onto the canvas
3. Drop indicator shows where field will be placed
4. Release to add the field

Reordering Fields

1. Hover over a field until cursor changes
2. Click and drag to new position
3. Drop indicator guides placement
4. Release to move the field

Multi-Row Layouts

Fields can be arranged side-by-side:

1. Set Column Span to less than 12 on multiple fields
2. Fields automatically flow into rows
3. Example: Two 6-span fields = one row with two fields

Canvas Features

Viewport Preview

Switch between device sizes:

• Mobile - 370px width
• Desktop - Full width

Selection Toolbar

When a field is selected, a toolbar appears with:

• Settings - Open field properties
• Duplicate - Copy the field
• Delete - Remove the field

Grid Overlay

Enable grid overlay to see the 12-column layout grid while building.

Undo/Redo System

How It Works

• All changes are tracked automatically
• Up to 50 changes stored in history
• Keyboard shortcuts for quick access

Types of Changes Tracked

• Adding fields
• Removing fields
• Reordering fields
• Changing field properties
• Changing validation rules
• Form settings changes

Using Undo/Redo

• Undo: Ctrl+Z (Windows) / Cmd+Z (Mac)
• Redo: Ctrl+Shift+Z / Cmd+Shift+Z
• Or use the buttons in the header

Form Preview

Preview Modal

Click Preview to see your form as customers will see it:

• Tests validation in real-time
• Shows all styling and colors
• Simulates form submission flow

Device Preview

Toggle between mobile and desktop views to ensure your form looks good on all devices.

Best Practices

Form Design

1. Keep forms short - Only ask for essential information
2. Group related fields - Put related questions together
3. Use clear labels - Avoid jargon and abbreviations
4. Add descriptions - Help users understand what you need

Validation

1. Mark required fields - Be clear about what’s mandatory
2. Use appropriate validation - Email fields should validate email format
3. Custom error messages - Write helpful, specific error messages
4. Test thoroughly - Try submitting with invalid data

Layout

1. Mobile-first - Design for mobile, then enhance for desktop
2. Logical flow - Arrange fields in the order users expect
3. Consistent widths - Use consistent column spans for visual harmony
4. Breathing room - Don’t cram too many fields in one row