Skip to main content
Arcanflows

Multi-Step Forms

Create multi-page forms with progress tracking and conditional navigation.

Overview

Multi-step forms break long forms into manageable pages, improving completion rates and user experience. Arcanflows supports progress tracking, conditional navigation, and per-page validation.

Basic Multi-Step Setup

Configuration

json
{
  "multiStep": {
    "enabled": true,
    "pages": [
      {
        "id": "personal",
        "title": "Personal Info",
        "fields": ["firstName", "lastName", "email"]
      },
      {
        "id": "address",
        "title": "Address",
        "fields": ["street", "city", "state", "zip"]
      },
      {
        "id": "review",
        "title": "Review",
        "fields": ["summary", "terms"]
      }
    ]
  }
}

Visual Structure

┌─────────────────────────────────────────────────────┐
│  ● Step 1 ─── ○ Step 2 ─── ○ Step 3                │
│  Personal      Address      Review                  │
├─────────────────────────────────────────────────────┤
│                                                     │
│  Personal Information                               │
│                                                     │
│  First Name              Last Name                  │
│  [________________]      [________________]         │
│                                                     │
│  Email Address                                      │
│  [________________________________________]         │
│                                                     │
│                            [Next →]                 │
│                                                     │
└─────────────────────────────────────────────────────┘

Progress Indicators

Styles

StyleDescriptionVisual
dotsSimple dots● ○ ○
numbersNumbered steps① ② ③
barProgress bar████░░░░ 50%
stepsNamed stepsStep 1 of 3
breadcrumbClickable pathHome > Address > Review
json
{
  "multiStep": {
    "progress": {
      "style": "steps",
      "showLabels": true,
      "showPercentage": false,
      "position": "top"
    }
  }
}

Progress Configuration

json
{
  "progress": {
    "style": "bar",
    "showPercentage": true,
    "color": "#6366F1",
    "backgroundColor": "#E5E7EB",
    "height": "4px",
    "animation": "smooth"
  }
}

Navigation

Navigation Buttons

json
{
  "multiStep": {
    "navigation": {
      "showPrevious": true,
      "showNext": true,
      "previousLabel": "← Back",
      "nextLabel": "Continue →",
      "submitLabel": "Submit",
      "position": "bottom",
      "alignment": "space-between"
    }
  }
}

Custom Button Labels Per Page

json
{
  "pages": [
    {
      "id": "info",
      "title": "Information",
      "navigation": {
        "nextLabel": "Proceed to Payment →"
      }
    },
    {
      "id": "payment",
      "title": "Payment",
      "navigation": {
        "previousLabel": "← Edit Info",
        "nextLabel": "Review Order →"
      }
    },
    {
      "id": "review",
      "title": "Review",
      "navigation": {
        "submitLabel": "Place Order"
      }
    }
  ]
}

Keyboard Navigation

json
{
  "multiStep": {
    "keyboard": {
      "enabled": true,
      "nextKey": "Enter",
      "previousKey": "Escape"
    }
  }
}

Page Validation

Validate on Next

json
{
  "multiStep": {
    "validation": {
      "validateOnNext": true,
      "preventInvalidNavigation": true,
      "scrollToError": true
    }
  }
}

Per-Page Validation

json
{
  "pages": [
    {
      "id": "contact",
      "title": "Contact",
      "validation": {
        "required": ["email", "phone"],
        "custom": "(values) => values.email.includes('@company.com') || 'Must use company email'"
      }
    }
  ]
}

Cross-Page Validation

json
{
  "multiStep": {
    "validation": {
      "validateAllOnSubmit": true,
      "highlightInvalidPages": true
    }
  }
}

Conditional Pages

Show/Hide Pages

json
{
  "pages": [
    {
      "id": "type",
      "title": "Account Type",
      "fields": ["accountType"]
    },
    {
      "id": "personal",
      "title": "Personal Info",
      "fields": ["name", "email"],
      "conditions": {
        "show": {
          "field": "accountType",
          "operator": "equals",
          "value": "personal"
        }
      }
    },
    {
      "id": "business",
      "title": "Business Info",
      "fields": ["companyName", "taxId"],
      "conditions": {
        "show": {
          "field": "accountType",
          "operator": "equals",
          "value": "business"
        }
      }
    },
    {
      "id": "review",
      "title": "Review",
      "fields": ["summary"]
    }
  ]
}

Dynamic Page Order

json
{
  "multiStep": {
    "dynamicNavigation": {
      "enabled": true,
      "calculateNext": "(currentPage, values) => { if (currentPage === 'type' && values.accountType === 'business') return 'business'; return 'personal'; }"
    }
  }
}

Page Sections

Sections Within Pages

json
{
  "pages": [
    {
      "id": "contact",
      "title": "Contact Details",
      "sections": [
        {
          "title": "Primary Contact",
          "fields": ["primaryName", "primaryEmail", "primaryPhone"]
        },
        {
          "title": "Billing Contact",
          "fields": ["billingName", "billingEmail", "billingPhone"],
          "conditions": {
            "show": { "field": "separateBilling", "operator": "equals", "value": true }
          }
        }
      ]
    }
  ]
}

Review Page

Summary Display

json
{
  "pages": [
    {
      "id": "review",
      "title": "Review",
      "type": "summary",
      "summary": {
        "showAllFields": true,
        "groupByPage": true,
        "allowEdit": true,
        "editStyle": "inline"
      }
    }
  ]
}

Custom Review Template

json
{
  "pages": [
    {
      "id": "review",
      "title": "Review Your Order",
      "template": "custom",
      "content": "<div class='review-section'><h3>Personal Info</h3><p>Name: {{firstName}} {{lastName}}</p><p>Email: {{email}}</p></div><div class='review-section'><h3>Shipping</h3><p>{{street}}<br>{{city}}, {{state}} {{zip}}</p></div>"
    }
  ]
}

State Management

Persist Progress

json
{
  "multiStep": {
    "persistence": {
      "enabled": true,
      "storage": "localStorage",
      "key": "form_{{formId}}_progress",
      "expiry": "24h",
      "resumePrompt": true
    }
  }
}

Resume Dialog

json
{
  "persistence": {
    "resumeDialog": {
      "title": "Continue where you left off?",
      "message": "You have a saved form in progress.",
      "continueLabel": "Continue",
      "startOverLabel": "Start Over"
    }
  }
}

Animations

Page Transitions

json
{
  "multiStep": {
    "animation": {
      "type": "slide",
      "direction": "horizontal",
      "duration": 300,
      "easing": "ease-out"
    }
  }
}
TypeDescription
noneNo animation
fadeFade in/out
slideSlide left/right
scaleScale up/down
flip3D flip

Events

Page Change Events

json
{
  "multiStep": {
    "events": {
      "onPageChange": "handlePageChange",
      "onPageValidate": "handlePageValidate",
      "onComplete": "handleComplete"
    }
  }
}

Event Handlers

javascript
function handlePageChange(event) {
  console.log('Moving from', event.from, 'to', event.to);
  // Track analytics, update external state, etc.
}

function handleComplete(event) {
  console.log('Form completed', event.values);
}

Examples

Registration Wizard

json
{
  "multiStep": {
    "enabled": true,
    "progress": { "style": "steps", "showLabels": true },
    "pages": [
      {
        "id": "account",
        "title": "Account",
        "icon": "user",
        "fields": ["email", "password", "confirmPassword"]
      },
      {
        "id": "profile",
        "title": "Profile",
        "icon": "profile",
        "fields": ["firstName", "lastName", "avatar"]
      },
      {
        "id": "preferences",
        "title": "Preferences",
        "icon": "settings",
        "fields": ["newsletter", "notifications", "theme"]
      },
      {
        "id": "complete",
        "title": "Complete",
        "icon": "check",
        "type": "confirmation",
        "content": "<div class='success'>Welcome aboard!</div>"
      }
    ]
  }
}

Checkout Flow

json
{
  "multiStep": {
    "enabled": true,
    "progress": { "style": "breadcrumb" },
    "pages": [
      {
        "id": "cart",
        "title": "Cart",
        "fields": ["cartItems", "coupon"]
      },
      {
        "id": "shipping",
        "title": "Shipping",
        "fields": ["shippingAddress", "shippingMethod"]
      },
      {
        "id": "payment",
        "title": "Payment",
        "fields": ["paymentMethod", "cardDetails"],
        "conditions": {
          "show": { "field": "paymentMethod", "operator": "notEquals", "value": "paypal" }
        }
      },
      {
        "id": "review",
        "title": "Review",
        "type": "summary",
        "navigation": { "submitLabel": "Place Order" }
      }
    ]
  }
}

Best Practices

  1. Limit pages - 3-5 pages is ideal
  2. Logical grouping - Related fields on same page
  3. Clear progress - Show where users are
  4. Allow back navigation - Let users review/edit
  5. Save progress - Persist for long forms
  6. Validate incrementally - Per-page validation
  7. Clear labels - Descriptive page titles
  8. Mobile friendly - Test on small screens