Lessons In Multi-Step Form With React & Material UI - Reading Time: 4 Mins
Published: May 10, 2020
Introduction
When it comes to a multi-step form with React. I had trouble searching for related materials. On how to do it as I was implementing a survey form for one of my projects.
Fortunately, I stumbled across a great tutorial by Brad from Traversy Media on his Multi Step Form with React & Material UI with further knowledge from CSS Tricks. Despite it might be dated at the time of this writing. It was useful for me to implement it in my project.
I would suggest that you take a look at his tutorial. If you are unable to fulfil, with just basic forms that you can get it off the shelf. Like for example Typeform or Google Forms.
Breakdown of Multi-Step Form
In Brad's tutorial and CSS Tricks. It gives you enough information and concepts for you to get started. I am providing you with a breakdown on it so that it is easier to make it work for you. If you do not have the time to watch the video or read the article.
With some gotcha that you might be mindful while implementing it. In the multi-step form, you have 5 main parts that need to be created for it to work. If you are using the Create React App template by Facebook and following Brad's tutorial:
- Global State Variables - It is created under a variable name called values & step. With the purpose to store, process, transit to the next form and shared the data between all forms. While the user is filling up the form.
- Master Form Template - It is used as a template for multiple pages of the form for UI consistency.
- Form Manager - This is where you provide the routing. It includes the use of global state variables & methods namely prevStep & nextStep. Which is used for transitioning from one page to another by tracking the page number as the step global state variable.
- Individual Pages - In the tutorial by Brad, he created individual react components to represent each form to be filled.
- Form Submission & Persistent Storing of Data using an API - You need to be mindful to include persistent storing of data for the filled form pages. As form dropoff rate is a reality for anyone implementing any kind of form. It increases when there is a large number of questions, that need to be filled by the person taking it. Which is why capturing & storing these data is useful for marketing and user experience purposes.
Have a Game Plan in Mind
It was kind of daunting & wasting a lot of my time with a rough plan in my mind while I implement it. I would suggest that you have a checklist and plan for the UI design, user flow & business logic that is outlined & created.
As I became painfully aware of the gaps in my implementation. While building it out as I go along. Which I was able to address it quickly. When it is deployed with people filling up the form with tons of coffee & self-doubts to do it.
Pitfalls When Working with Material UI
Always read the documentation thoroughly and test out the various component in your master form before you implement it for each form page.
There are a lot of times, I wish I had added property like error into the master form. Before I had pasted a previous copy into the various form pages. Which it can take up a lot of time and effort to modify. When you have 30 over individual forms to be implemented.
I know I should follow the don't repeat yourself method. But I prefer the concept of move fast & break things. Especially when I had a time crunch to get it out as soon as possible.
Due to the way the React components is made using the material UI. You need to handle the validation by yourself. It provides the error property and display error messages. Which a validation method can be called. By checking the values variable for each input react component, whenever a person clicks on the continue button.
Conclusion
I hope that this will be useful for you, who is planning to implement the multiple-step form to React. Moving forward, I found that the use of React Hook Form is a better alternative to using the material UI component.
Due to the reason that it has built-in form validation and it is easy to understand for anyone to get started. Which makes me feel like I'm building an HTML instead of a React form.