All projects · UI Components & Interactions
FlowForm — Multi-Step Form
A polished three-step inquiry wizard covering contact info, project details, and budget/timeline, capped by a review-and-submit screen and a…
A polished three-step inquiry wizard covering contact info, project details, and budget/timeline, capped by a review-and-submit screen and a success state. A single state object preserves entered values across back-and-forth navigation, and per-step validation gates forward progress with inline error messages.
- Single-source-of-truth state object retains data when moving between steps
- Per-step required-field validation with email and min-length rules, plus inline error clearing on input
- Animated progress bar and check-marked step indicators track completion
- Review screen summarizes all answers before a simulated submission and success confirmation
Built with: HTML, CSS, Vanilla JavaScript, client-side form validation (regex email check), animated progress bar and step indicator, Google Fonts (Sora, Outfit)