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 Tailwind and Next.js

Refer59 190

@Refer59

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


Hello 🖐, this is my solution for this challenge.

I built this component in a way that let devs add as many forms as they need by making this component as layout container, letting the individual form logic does not depends upon this component, so we can manage validations directly in the given forms components, and these validations are called once the MultiForm's Next button is pressed.

Also I added a form transition animation and a country code modal selector.

The most challenging things were the Country Code and the Transition animation system

Feel free of making any comments 🎉

Community feedback

@Jake-Oz

Posted

Hi. I am in Australia and couldn't get the country code to work for the phone number on Page 1. It comes up with Australia as the option at the top of the form but nothing loads in the list below that element.

0

Refer59 190

@Refer59

Posted

@Jake-Oz Seems that the problem is the API Fetching. Notice me if the problem persists

1

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