Multistep Forms in React with Awesome UX

04 Aug 2021

2 minute read


Multi-step forms are a common phenomenon on the web. And for good reason! They offer a lot of UX benefits:

However, multi-step forms have some technical challenges that need to be addressed to make it a pleasant and accessible experience for your visitors, especially if you’re using a SPA framework like React:

These challenges are all surmountable, and the benefits are frequently worth it. I’d like to take you through my thought process when implementing forms like these, both from a technical perspective, as well as the ethical and user experience (UX) perspectives as well. These forms shouldn’t simply work, they should work well!

So! Let’s explore how to make an accessible multi-step form in React. There are a lot of topics to cover, and they’re all broken down by chapter.

Let’s get all the benefits, minimize any technical snags, and make our UX as good as it can be.

The first stop on the journey is the tech stack that we’re building the form with. Let’s get started: Part one: Your tech stack

Table of contents:

This is a series of blog posts which will cover each aspect of a great multi-step form experience separately. Check back for a new post each Monday until they’re all done!

Leave a comment

Related Posts