There's a ton of HTML multi-step form examples out there: see https://csshint.com/multi-step-html-forms/ for instance. So why create another one? Simply put, I couldn't find a form that satisfied my two main requirements:
1) Responsive. The form should look good on a phone, a desktop, and everything in between. It's 2021 and most web traffic now goes through mobile devices, so making your pages responsive should be a top priority.
2) It should be easy to change the number of steps, and the form should look good and stay responsive regardless of how many steps you have.
I was also looking for the following:
3) You choose be able to choose an icon to represent each step.
4) Clicking on a step indicator should navigate to that step.
Here's what I came up with:
The labels will disappear when there isn't enough horizontal space for them, but the form isn't smart enough to figure out the perfect breakpoint on its own: you'll have to manually specify that value in multi-step-nav.css.
Why add next and previous buttons in each step instead of reusing the same buttons everywhere? Doing it like this actually helps with the tabbing behavior: if you've tabbed to a next/previous button and press Enter, tabbing again will move you to the top of the new section, instead of tabbing out of the form towards the bottom of the document.
There's one accessibility feature I couldn't seem to figure out, however. When using NVDA (the most popular desktop screen reader according to the latest WebAIM survey) in browse mode, using the down arrow after pressing the Next or Previous button won't start reading at the top of the newly selected section. Anyone out there know how to fix this? 🙂
Cover photo by Kelly Sikkema on Unsplash
Top comments (0)