Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Multi-step form with vanilla CSS and React

@redstar504

Desktop design screenshot for the Multi-step form coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


This turned out to be a bit of work. I have completed a few smaller projects now and wanted a bit more of a challenge.

Building the multi-step form out with React took the most effort, because I wanted it to be possible to return to steps and alter data without losing any subsequent progress. I did not use any CSS libraries and all of the form controls are custom.

Feel free to test it out. The fields on the first page accept any values as long as they aren't blank. I'd be interested in hearing about any layout or logic bugs anybody finds so I can fix them. I tested it out on desktop Chrome, iOS Safari, and Android Chrome.

There's a special effect on the success page if you finish out the process!

Community feedback

Please log in to post a comment

Log in with GitHub
Discord logo

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