Multi-step Form using React, Formik and Framer-motion!
Design comparison
Solution retrospective
This was fairly the most challenging project I've done. Figuring out how to change the state and how to change components. its not perfect but I'm happy with how it turned out! My only question is this:-
- When the user is selecting a plan, if the decide to go back to the previous page. they will be unable to go forward and must refresh the page. I was unable to get formik to go past the error formed. how can I avoid this? is there a better solution to that problem?
Community feedback
- @visualdennissPosted over 1 year ago
Hey there,
Congrats on completing project successfully! Looks great and responsive too!
I've gone through all the steps and they all work well including the nice animations you have added. One little suggestion would be that to go back to 2nd page when click on "Change" on last page as it looks like the link is related to changing the plan. But that's optional of course. Additionally, you can have a default selected option for the users, which is a common practice, for example the 2nd plan could be selected by default.
Keep up the great work!
1@mohsin316Posted over 1 year ago@visualdenniss Hey! thanks for the feedback. I agree with you on the change button, I should probably change it to redirect to the plan page as that seems like the proper intention of the button. I've tried adding a default selected option on react but it was causing a few issues so I didn't add it in, Tho ill see if I can figure it out.
0@visualdennissPosted over 1 year ago@mohsin316 Fair enough. Looks like you used Formik, with which i'm not super familiar with. (have seen before but never tried it myself) In my solution with React i just used states and contextAPI to store the data and i had simply a default value set with useState(..) to have default selected options. I'll upload my solution to frontendmentor.io sometime soon, feel free to check it out.
Hope this was helpful!
1
Please log in to post a comment
Log in with GitHub
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