Skip to content
Submitted over 1 year ago

Multi-Step Form using REACT

Suleman•750
@legion40216
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Multi-step form
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

Hello everyone,

I would like to share my experience of creating a multi-step form this challenge was hard if done properly i made some improvemnts in this challenge of not hard-coding the steps, I took a more robust approach to ensure scalability in the future. By utilizing components in react, I made it possible to easily scale the form without having to rewrite the entire code were reduced or increased.

In addition, I made a deliberate choice to avoid using the position:absolute property for the navigation. Instead, I used a grid layout. This decision was made to prevent any obstruction of the form if it ever exceeds the size of the viewport.

I am open to feedback and suggestions from the community to further improve the project. Your input is highly appreciated.

Thank you!

Community feedback

  • Aryan Kumar•390
    @aryanda1Posted over 1 year ago

    Why clicking the change button in the summary page, doesnt lands me to the second page where i can change the plan rather than toggling between monthly and yearly?

    1
    Suleman•750
    @legion40216Posted over 1 year ago

    @aryanda1 i just made it that way XD i will add another button to take people to that page soon...

    0
  • Abdugafor•240
    @AbdugaforPosted over 1 year ago

    Hi there )

    You have made a great job. But there no navigation if I click on steps on navigation-bar. I also did this challange but with Angular. I did like , If user click on steps , get step number and set it on "currentStep" (in your situation) and display this step-content. I hope it can help to solve this problem.

    1
    Suleman•750
    @legion40216Posted over 1 year ago

    @Abdugafor thanks for informing me on that i got the functionality running again take a look, is this what you were taking about? I never used angular but this functionality isnt that hard to do if you map the number of step component with its length you can get the index of it and pass it down to the sidebar step buttons onClick funtionality and change the currentStep with it...

    1
    Abdugafor•240
    @AbdugaforPosted over 1 year ago

    @legion40216 I also did the same. I looked at your app again , it works perfectly! And I notice that in number field I can write words and there wouldn't be any error. Better to fix it with changing input type="number". And in the summary step when user click change I think it should go back to plan step ( to chose another plan). Good luck)

    Marked as 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