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

Living multistep form - Made with Tailwind, Framer Motion and NextJS

#next#react#react-router#redux
P
Dat Do Tat 190

@datproto

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


Overall:

Such an interesting challenge. Help me learn a lot about Javascript ES6 and some advanced HTML such as formId to trigger Form Child component. My animation skill is better after few challenges as well, so I will probably come back to add some exit animation.

Also, I'm really appreciate any feedback or ideas to improve my challenge result!

Never losing fun of learning new knowledge and beating up challenges!

Connect with me:

Community feedback

Jo89 😈 380

@AhmadYousif89

Posted

Hey there, you have done a great job on the animation part and styling of your app 👍. However, I'm seeing some major logical issues with your application and I hope by bringing them to your attention would improve the overall experience of your app.

  • I can go through the whole subscription form without filling up my personal info!
  • I can go through the whole subscription form without choosing any plan!
  • I can click multiple times on any add-on and add it many times to the checkout page on step 4.
  • the plan is missing the detail about the 2-month free gift if the user chooses to subscribe annually.
  • the purpose of the "change" button is to cycle between the two billing cycles not to navigate the user back to step 2.

have a nice day 👍

Marked as helpful

1

P
Dat Do Tat 190

@datproto

Posted

@AhmadYousif89 Hi there,

Thank you for your amazing comment. The form validation is really a missing part of my solution.

Let me update the solution, and I will ping you asap when there is updated version!

Best regards,

Dat, Proto

1

@CarlPericles18

Posted

Looks good.

0

P
Dat Do Tat 190

@datproto

Posted

@CarlPericles18 Thanks, man!

0

@CarlPericles18

Posted

@datproto No problem

0

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