MultiStep Form Wizard
$17.00
Fully customizable, responsive, and accessible, ship lead‑gen, onboarding, surveys, and demo request funnels in minutes.
Live Preview: https://multistepformwizard.framer.website
Includes a step‑by‑step PDF on connecting Formspree.
About this Component
MultiStep Form Wizard breaks complex forms into clean, focused steps that reduce friction and boost completion rates. Define fields and steps with an easy JSON schema or use presets, validate per step, autosave progress, review answers before sending, and post submissions to Formspree, Zapier/Make, or any webhook. Designed for conversion, built for teams, and polished for accessibility.
Perfect for
Lead generation and quote requests
SaaS onboarding and product qualification
Demo/consultation booking funnels
Waitlists, surveys, and newsletter quizzes
Contact forms that actually convert
Key features
Multi‑step UX that converts
Steps or progress bar, step titles, Back/Next, optional confirm checkbox
Review & Submit screen before final submission (Submit appears only here)
Schema‑driven fields (no code needed)
Text, Email, Tel, URL, Number, Textarea, Select, Radio, Checkbox, Checkbox‑Group, Date, Time, Range, Toggle, Hidden
Global placeholder map for better UX/SEO, plus per‑field placeholder overrides
Rock‑solid validation and guidance
Required checks, patterns, min/max and length rules
Step‑level error banner (“Action is required…”) + inline errors
Scroll/focus to first invalid field
Autosave & resume
Save progress to localStorage with expiry; resume where you left off
Review & Submit step
Read‑only summary (grouped by step), label/value pairs, edit links
Mask email/phone, date and currency formatting
Integrations that just work
Webhook POST (JSON/FormData), headers, field‑name mapping
Meta capture: UTM, referrer, page path, user agent, time‑to‑complete
Email relay ready (optional) for Resend/SendGrid/Postmark via your serverless endpoint
PDF included: step‑by‑step guide to connect Formspree (free)
Mobile‑first polish
Sticky footer actions, safe‑area insets, collapsed progress on small screens
Design tokens and theming
Full control of colors, radius, spacing, shadows, rings, inputs, buttons, success CTA styles
Accessibility by default
Labels, described‑by help text, aria‑live error announcements, focus rings, reduced‑motion support
Performance
60fps transitions (transform/opacity only), no layout shift, zero external dependencies
Controls (what you can customize)
Content & Schema
Presets (Lead Gen, SaaS Onboarding, Newsletter Quiz)
Form title/description, JSON schema (steps + fields)
Global placeholders map, apply placeholders to select, use placeholder as help
Validation & Navigation
Validate on blur/next/submit, require valid step to advance
Back/Next behavior, reset button, keyboard shortcuts
Step‑level error banner (messages customizable)
Review & Submit
Enable/disable review step, title/description
Group by step, edit buttons, show/hide empty/hidden fields
Resolve option labels, mask email/phone, date format, currency fields
Layout: auto/one‑column/two‑column, dividers, confirm checkbox
Integrations
Webhook URL, POST/GET, JSON/FormData, headers, field‑name map
Include UTM/referrer/page path/user agent/time‑to‑complete
Success action: inline success screen or redirect URL
Email relay (optional): provider, relay URL, to/from/subject
Labels & Messages
Back/Next/Submit/Loading/Reset
Success title/description/CTA label+URL (with customizable CTA styles)
Error title/description
Step Indicator
Variant (Steps/Progress/None), position (Top/Bottom), step count
Styles & Theme
Font, radius, spacing, max width
Surface/Card/Input, text/muted/placeholder, borders, ring + width
Buttons (primary/secondary text/bg/border), success/error colors
Input height, gaps, button radius, divider and sticky footer colors
Motion
Step transition (Slide/Fade/None), duration, easing, respect reduced motion
Mobile
Sticky footer, safe‑area insets, collapse step indicator
Accessibility
Announce errors, scroll to first error, focus‑trap per step
How it works
Drop the component anywhere in your canvas.
Choose a preset or paste your JSON schema (add fields/steps in seconds).
Customize labels, placeholders, validation, and styles to match your brand.
Connect submissions:
Paste your Formspree endpoint (recommended quick start).
Or set any webhook URL (Zapier, Make, Pipedream, custom API).
Preview, test a submission, and publish.
What’s Included
Quick start: Formspree (PDF included)
The included PDF walks you through this with screenshots and best practices.
MultiStep Form Wizard component (no dependencies)
PDF guide: Connect to Formspree (AJAX, headers, verification, troubleshooting)
Preset schemas (Lead Gen, SaaS Onboarding, Newsletter Quiz)
AI prompt for fast JSON schema generation
Inline success/error screens and optional redirect
Use cases you can ship today
“Request a demo” with qualification questions + review step
Quote request with budget/date fields and currency/date formatting
Newsletter quiz with preferences, UTM capture, and autosave
SaaS onboarding with team size, industry, and feature selection
Contact form with masked email/phone and step‑level error guidance
Best practices baked in
Submit appears only on the Review & Submit step (less accidental submits)
Step validation gates progression, with scroll‑to‑first‑error and focus
Placeholders for better UX and SEO, while labels remain visible for accessibility
Mobile sticky footer keeps actions reachable; safe‑area insets supported