Form Builder

Overview

The ArcanFlows Form Builder is a visual drag-and-drop interface for creating forms. Build anything from simple contact forms to complex multi-step applications without writing code.

Builder Interface

┌─────────────────────────────────────────────────────────────────┐
│  [← Back]  My Contact Form                    [Preview] [Save]  │
├─────────────┬───────────────────────────────────┬───────────────┤
│             │                                   │               │
│   FIELD     │         FORM CANVAS               │   SETTINGS    │
│   PALETTE   │                                   │               │
│             │  ┌─────────────────────────────┐  │   Field       │
│  ┌───────┐  │  │  Your Name                  │  │   Settings    │
│  │ Text  │  │  │  [___________________]      │  │               │
│  └───────┘  │  │                             │  │   Label: Name │
│  ┌───────┐  │  │  Email Address *            │  │   Required: ✓ │
│  │ Email │  │  │  [___________________]      │  │   Placeholder │
│  └───────┘  │  │                             │  │               │
│  ┌───────┐  │  │  Message                    │  │   Validation  │
│  │ Number│  │  │  [                    ]     │  │   - Min: 0    │
│  └───────┘  │  │  [                    ]     │  │   - Max: 100  │
│  ...        │  │                             │  │               │
│             │  │  [Submit]                   │  │   Conditional │
│             │  └─────────────────────────────┘  │   Logic       │
│             │                                   │               │
└─────────────┴───────────────────────────────────┴───────────────┘

Getting Started

Create a New Form

1. Navigate to Forms in the sidebar
2. Click Create Form
3. Enter a name for your form
4. Click Create

Add Fields

Drag and Drop:

1. Find the field type in the left palette
2. Drag it onto the canvas
3. Drop it where you want it to appear

Click to Add:

1. Click a field type in the palette
2. It's added to the bottom of the form
3. Drag to reorder if needed

Configure Fields

1. Click on any field in the canvas
2. The right panel shows field settings
3. Configure label, placeholder, validation, etc.
4. Changes save automatically

Canvas Operations

Selecting Fields

• Single click: Select field, show settings
• Ctrl/Cmd + click: Add to selection
• Shift + click: Select range

Reordering Fields

• Drag handle: Grab the ⋮⋮ icon to drag
• Keyboard: Use Alt + ↑/↓ to move selected field

Duplicating Fields

• Right-click → Duplicate
• Ctrl/Cmd + D: Duplicate selected
• Duplicated field appears below original

Deleting Fields

• Select + Delete/Backspace: Remove field
• Right-click → Delete
• Confirmation required for fields with data

Field Settings Panel

Basic Settings

Validation

Appearance

Conditional Logic

Show/hide fields based on conditions:

Show this field when:
  [Country] [equals] [United States]

  [+ Add condition]

  Match: ○ All conditions  ○ Any condition

Toolbar Actions

Preview

Click Preview to see how the form looks to users:

• Test field interactions
• Check validation messages
• Verify conditional logic
• Test on different screen sizes

Save

• Auto-save: Changes save automatically
• Manual save: Ctrl/Cmd + S
• Save status: Shows "Saved" or "Saving..."

Version History

Access previous versions:

1. Click ⋮ menu → Version History
2. View list of saved versions
3. Click to preview any version
4. Restore to revert to that version

Form Settings

Click the ⚙️ icon to access:

• Form name and description
• Submit button text
• Success message
• Redirect URL after submit
• Notification settings

Keyboard Shortcuts

Form Structure

Sections

Group related fields into sections:

1. Drag Section from palette
2. Add fields inside the section
3. Configure section title and description
4. Collapse/expand in builder

Columns

Create multi-column layouts:

1. Drag Column Layout to canvas
2. Choose 2, 3, or 4 columns
3. Drag fields into each column
4. Columns stack on mobile

Pages (Multi-step)

Create multi-page forms:

1. Drag Page Break between fields
2. Each page has its own validation
3. Progress indicator shows current step
4. Navigation: Next, Previous, Submit

Form Settings

Submission Settings

On Submit:
  ○ Show success message
  ○ Redirect to URL
  ○ Show custom content

Success Message:
  "Thank you for your submission!"

Redirect URL:
  https://example.com/thank-you

Notification Settings

Send notification on submit:
  ☑ Email to admin
  ☑ Slack notification
  ☐ Webhook

Admin Email:
  admin@company.com

Include Fields:
  ☑ All fields
  ○ Selected fields only

Integration Settings

Connect to agents and workflows:

Process with AI Agent:
  ☑ Enabled
  Agent: [Customer Support Agent ▼]

Trigger Workflow:
  ☑ Enabled
  Workflow: [Lead Processing ▼]

Best Practices

1. Keep Forms Short

• Only ask for essential information
• Use multi-step for longer forms
• Remove optional fields when possible

2. Use Clear Labels

• Be specific: "Work Email" not just "Email"
• Add help text for complex fields
• Use placeholder as example, not instruction

3. Group Related Fields

• Use sections to organize
• Keep related fields together
• Use logical field order

4. Mobile-First Design

• Test on mobile devices
• Use appropriate field widths
• Consider touch-friendly inputs

5. Validate Early

• Show errors inline
• Use real-time validation
• Provide helpful error messages

Importing Forms

From JSON

1. Click ⋮ menu → Import
2. Paste JSON configuration
3. Click Import

From Template

1. Click Templates in the toolbar
2. Browse available templates
3. Click Use Template
4. Customize as needed

Exporting Forms

Export as JSON

1. Click ⋮ menu → Export
2. Choose JSON
3. Download configuration file

Export as Template

1. Click ⋮ menu → Save as Template
2. Enter template name
3. Add description
4. Save to your template library