Form Layout

Overview

Good form layout improves usability and completion rates. Arcanflows provides flexible layout options to organize your forms effectively.

Layout Components

Sections

Group related fields under a heading:

┌──────────────────────────────────────────┐
│ § Personal Information                    │
├──────────────────────────────────────────┤
│  First Name         Last Name            │
│  [____________]     [____________]       │
│                                          │
│  Email Address                           │
│  [____________________________________]  │
└──────────────────────────────────────────┘

Configuration:

jsonCopy
{
  "type": "section",
  "title": "Personal Information",
  "description": "Please enter your details below",
  "collapsible": false,
  "defaultExpanded": true,
  "fields": ["firstName", "lastName", "email"]
}

Columns

Place fields side by side:

┌─────────────────┬─────────────────┐
│  First Name     │  Last Name      │
│  [___________]  │  [___________]  │
└─────────────────┴─────────────────┘

┌──────────┬──────────┬──────────┐
│  City    │  State   │  ZIP     │
│  [_____] │  [_____] │  [_____] │
└──────────┴──────────┴──────────┘

Column Options:

Configuration:

jsonCopy
{
  "type": "columns",
  "layout": [50, 50],
  "gap": "md",
  "columns": [
    { "fields": ["firstName"] },
    { "fields": ["lastName"] }
  ]
}

Field Width

Individual field width within a row:

jsonCopy
{
  "type": "text",
  "label": "First Name",
  "width": "half"
}

Responsive Behavior

Columns stack on mobile:

Desktop:                    Mobile:
┌─────────┬─────────┐      ┌─────────────────┐
│ Field 1 │ Field 2 │      │ Field 1         │
└─────────┴─────────┘      ├─────────────────┤
                           │ Field 2         │
                           └─────────────────┘

Configuration:

jsonCopy
{
  "type": "columns",
  "layout": [50, 50],
  "stackOnMobile": true,
  "mobileBreakpoint": 768
}

Multi-Step Forms

Page Breaks

Split forms into multiple steps:

┌─────────────────────────────────────────┐
│  Step 1 ──●── Step 2 ──○── Step 3       │
├─────────────────────────────────────────┤
│                                         │
│  Personal Information                    │
│                                         │
│  Name: [_____________________________]  │
│  Email: [____________________________]  │
│                                         │
│              [Next →]                   │
└─────────────────────────────────────────┘

Configuration:

jsonCopy
{
  "multiStep": {
    "enabled": true,
    "showProgress": true,
    "progressStyle": "dots",
    "allowNavigation": true,
    "validateOnNext": true
  },
  "pages": [
    {
      "title": "Personal Info",
      "fields": ["name", "email", "phone"]
    },
    {
      "title": "Address",
      "fields": ["address", "city", "state", "zip"]
    },
    {
      "title": "Review",
      "fields": ["summary", "terms"]
    }
  ]
}

Progress Indicators

Page Navigation

jsonCopy
{
  "navigation": {
    "showPrevious": true,
    "previousLabel": "← Back",
    "nextLabel": "Continue →",
    "submitLabel": "Submit",
    "allowSkip": false
  }
}

Dividers

Horizontal Divider

Visual separator between sections:

jsonCopy
{
  "type": "divider",
  "style": "solid",
  "spacing": "lg"
}

Divider with Text

──────────── OR ────────────

jsonCopy
{
  "type": "divider",
  "text": "OR",
  "textPosition": "center"
}

Content Blocks

HTML Content

Add custom HTML between fields:

jsonCopy
{
  "type": "html",
  "content": "<div class='info-box'><strong>Note:</strong> Your information is secure.</div>"
}

Info/Warning Boxes

jsonCopy
{
  "type": "alert",
  "variant": "info",
  "title": "Important",
  "message": "Please ensure all information is accurate before submitting."
}

Spacing & Gaps

Field Spacing

jsonCopy
{
  "layout": {
    "fieldSpacing": "md",
    "sectionSpacing": "lg",
    "labelSpacing": "sm"
  }
}

Custom Margins

jsonCopy
{
  "type": "text",
  "label": "Name",
  "margin": {
    "top": "lg",
    "bottom": "md"
  }
}

Layout Templates

Contact Form

┌──────────────────────────────────────────┐
│  Contact Us                              │
├──────────────────────────────────────────┤
│  Name                                    │
│  [____________________________________]  │
│                                          │
│  Email               Phone               │
│  [________________]  [________________]  │
│                                          │
│  Subject                                 │
│  [____________________________________]  │
│                                          │
│  Message                                 │
│  [____________________________________]  │
│  [____________________________________]  │
│  [____________________________________]  │
│                                          │
│              [Send Message]              │
└──────────────────────────────────────────┘

Registration Form

┌──────────────────────────────────────────┐
│  Step 1 ──●── Step 2 ──○── Step 3       │
├──────────────────────────────────────────┤
│                                          │
│  § Account Details                       │
│  ─────────────────                       │
│  Email                                   │
│  [____________________________________]  │
│                                          │
│  Password           Confirm Password     │
│  [________________]  [________________]  │
│                                          │
│         [← Back]    [Continue →]         │
└──────────────────────────────────────────┘

Survey Form

┌──────────────────────────────────────────┐
│  Customer Feedback Survey                │
│  ━━━━━━━━━━━━━━━━━━━━━━━━━━━ 60%        │
├──────────────────────────────────────────┤
│                                          │
│  How satisfied are you?                  │
│  ☆ ☆ ☆ ☆ ☆                              │
│                                          │
│  ────────────────────────────            │
│                                          │
│  What could we improve?                  │
│  [____________________________________]  │
│  [____________________________________]  │
│                                          │
│         [← Previous]  [Next →]           │
└──────────────────────────────────────────┘

Best Practices

1. Logical Grouping

Group related fields together:

• Personal info in one section
• Address in another section
• Payment details separate

2. Visual Hierarchy

• Important fields first
• Use sections for grouping
• Add breathing room with spacing

3. Mobile Considerations

• Test on mobile devices
• Stack columns on small screens
• Keep buttons easily tappable

4. Progressive Disclosure

• Use multi-step for long forms
• Show advanced options conditionally
• Don't overwhelm with all fields at once

5. Consistent Widths

• Align field widths logically
• Name fields: same width
• Address fields: appropriate proportions