Submitted 3 months ago

Multi Step Form

Muhammad Zohaib•190

@zohaibxJackie

Preview site View code

This is a solution for...Multi-step form

HTML
CSS
JS

4advanced

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud to make this multi-step form. It was a new experience and I have made this type of form for the first time in my life. Next time when I am making this form, I will focus on efficiency and security more.

What challenges did you encounter, and how did you overcome them?

The biggest challenge was to maintain the states when the user goes back after selecting everything, and what if the user wants to change the plan after changing their mind. I still don't have the good solution, but what I did was to reset the total price and the user have to select from it again. Not efficient, I know.

What specific areas of your project would you like help with?

I would like help with managing the states when user changes the plan after going to the last page.

Community feedback

Sarah•280
@Sarah-okoloPosted 3 months ago
Hi, I believe you are having trouble managing state because you are treating the form as multi-page rather than a single-page multistep form.

This approach is also what is affecting your site's URL where if it is reloaded in a certain step the page becomes non-existent resulting in a 404 error, and also what causes the resetting of all the data when the user decides to go back a step. I mean, it's not really a multistep form if the user's data keeps resetting from step to step.

You are already using React, whose main feature is to dynamically update changes to the UI without reloading the site, so my advice is to remove the routing, make the form a single page, create a component for each step, and simply display the component for the corresponding step as the user moves back or forth in the form.

You can then manage the values from each component by setting them in state and passing them through context. I hope you find this helpful.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord