Long forms can feel overwhelming to users and take up valuable screen space. A multi-step (or progress) form breaks a long form down into smaller, more consumable pieces for the user to complete.
This component is a simplified version of a more complex marketing lead generation form. I'm sharing its core functionality here for anyone researching examples of multi-step forms, form validation, or form accessibility.
- Form validation that is easily extendable. Currently validates based on type, but it would be easy to use any other attribute.
- Accessible to screen reader and keyboard interactions (try it!)
- Adheres to good user experience and design practices
- Semantic HTML
- Vanilla JS. No libraries needed, but utilizes features from ES6 - ES8, so you might consider compiling with Babel.
- Vanilla CSS. Combines utility and BEM classes.
- Responsive (duh)