Multi-Step Form Wizard
A multi-step form with progress indicator, per-step validation, sessionStorage persistence, and a review summary. Vanilla HTML, CSS, and JavaScript — no libraries.
Copy → Paste → Ship
Live Preview
Stepper · Validation · PersistenceA working example of what the prompt generates — a four-step wizard with inline validation, animated progress, and session persistence (refresh the page and your input is restored). Click any completed step to jump back.
The Prompt
Build a multi-step form wizard with progress indicators, per-step validation, sessionStorage persistence, and a review summary. Vanilla HTML, CSS, and JavaScript only — no libraries, no frameworks, no CDN scripts.
STRUCTURE
- 4 named steps in a single <form>:
1. Basics — text input "Project name" (required, 3–60 chars) + optional textarea "Description" (max 240 chars)
2. Team — radiogroup with 4 cards (Solo / Small / Medium / Enterprise), exactly one required
3. Stack — checkbox chips with 8–10 options (React, Vue, Svelte, Next.js, Astro, Node, Python, Go, Rust, Postgres), at least one required
4. Review — read-only summary of all entries with an "Edit" link per row that jumps back to that step
- After successful submit, replace the form body with a success panel ("Project created" + restart button)
STEPPER UI
- Horizontal row of numbered dots above the form, one per step
- States per dot: pending (muted outline), active (cyan glow + ring), complete (filled emerald with check icon)
- Connectors between dots fill from left to right with a green→cyan gradient as the user advances
- Animated 2px progress bar across the top of the form, width = (currentStep / totalSteps) * 100%
- Dots for completed steps are clickable to jump back; pending dots are not clickable
VALIDATION
- Validate per-step on Next click — never validate forward (don't validate fields the user hasn't reached)
- Show error text below each invalid field via aria-live="polite" regions
- Disable the Next button while the current step is invalid (validate on input/change, debounce text inputs at 100ms)
- On Enter key inside a text input, advance to next step if step is valid
- Trim whitespace before validating text fields
PERSISTENCE
- Save the entire form state to sessionStorage under key "wizard-state" on every change
- Save the current step index too
- On page load, hydrate the form and jump to the saved step
- Wipe storage after successful submit
ANIMATIONS
- Step transitions slide horizontally (right→left for Next, left→right for Back) with a 0.3s cubic-bezier easing
- Step dots animate state changes (scale pop on complete, glow on active)
- All animations honour prefers-reduced-motion: reduce — fall back to opacity fades
ACCESSIBILITY
- Each step panel is a <section role="group" aria-labelledby="…"> with a heading
- Active step dot has aria-current="step"
- Radiogroup uses role="radiogroup" with arrow-key navigation and Space to select
- Checkbox chips use real <input type="checkbox"> — Space toggles
- Visible focus rings (2px cyan outline, offset 2px) on every interactive element
- Required fields marked with <span aria-hidden="true">*</span> plus a real "required" attribute
- Success panel announced via role="status" aria-live="polite"
VISUAL DESIGN
- Dark theme: form bg #131316, body bg #0a0a0a, 1px white/8% border, 14px border-radius, 12px shadow
- Inputs: rgba(255,255,255,0.04) background, 1px white/10% border, cyan focus ring
- Primary buttons (Next, Submit): cyan gradient (#00d4ff → #00a4d8) with dark text and a soft glow shadow
- Secondary button (Back): transparent with subtle outline
- Card max-width 580px, footer pinned at the bottom with a top border
OUTPUT
- Single self-contained HTML file with embedded <style> and <script>
- No dependencies, no build step
- Should work as a drop-in inside any container, mobile-friendly down to 320px wide
- Production-grade aesthetic — should feel like a polished SaaS onboarding flow
Anatomy
Step Indicator
Numbered dot per step that switches between pending, active, and complete states with smooth transitions.
Progress Bar
2px gradient fill across the top of the form that grows as the user advances through the flow.
Step Panel
Scoped fieldset for each step with a heading and aria-labelledby. Only one is visible at a time.
Validation
Per-field rules evaluated on every change. Errors appear inline below the field via aria-live regions.
Next / Back
Footer controls that advance or rewind the wizard. Next is disabled until the current step is valid.
Summary Step
Final read-only review of every entry, with inline Edit links that jump straight back to a specific step.
Persistence
Form state and current step are mirrored to sessionStorage so a refresh doesn't lose progress.
ARIA Live
Inline error regions and the success panel announce changes to assistive tech without yanking focus.
Transitions
Steps slide in horizontally with a 0.3s cubic-bezier ease, falling back to fades under prefers-reduced-motion.
Success State
Animated check, confirmation copy, and a restart button shown in place of the form after submit.
Usage Guidelines
Use This When
- Onboarding new users, account setup, or any "create" flow with more than ~6 fields
- You want users to focus on one decision at a time without scrolling fatigue
- Drop-off recovery matters — sessionStorage saves work-in-progress between visits
Not Ideal When
- The whole form fits comfortably on one screen — a single page is faster to complete
- Users need to compare fields across steps — one long form is easier to scan
- You need server-side validation between every step — the round trips will feel slow