Multi-Step Form with React and Tailwind CSS (Customizable)

This React Tutorial will guide you step-by-step on how to create a Multi-Step Form with React and Tailwind CSS.
This React multi step form is highly customizable and can be used as part of a react project.
Adding Tailwind to existing React project : • Adding Tailwind to exi...
Website: www.quicknuggets.com
Prerequisites
-Tailwind Css
- React Js
Thank you for watching!!
Please subscribe to get updates on new videos :)
#Reactjs #ReactProject #MultiStepForm
Follow me:
Facebook: QuickNuggets
Twitter: QuickNuggets
Instagram: Clive.Stewart
Website: www.quicknuggets.com

[@brianb6796]

thanks mate!

[@markshin3947]

Thank you for the guidelines to create a Multi-step register.
This is exactly what I looked for :)!

[@bluecaban3855]

awesome thank you!

[@miyanhassanaraien5607]

Thank You !!

[@trananhquan7149]

Thank you so much for this great tutorial! But, how can I validate these forms? Can you help me?

[@mohamedyoussef8835]

Awesome video ++++++ 😃

[@amanpatell]

Thank you :)

[@ricardodiaz8467]

well done mate

[@Quicknuggets]

Thank you. Subscribe to get updates as i will be doing more of these videos

[@ted50282]

where do I put the and where do I close it? and the submit button?

[@cinqzez]

Can you show how to make a dropdown select menu in the form please?

[@ekenennabugwu4732]

Great video ❤
What about a link to the repo
Thanks

[@adediranoludare6530]

Very Great Tutorial, I have learned a lot at once. Do you by chance have a github repository or something to this code that i can download, I want to follow along

[@vanbayor11]

Hello, do you have the repo for this tutorial?

[@richardhendcts]

Thanks for the video, that really helped me out, may I ask what vscode theme are you using?

[@Quicknuggets]

The theme extension is called "Atom One Dark Theme"

[@mazimpakatoty445]

hey bro its a great tutorial, thank you very much,
i was wondering where we can add the API to persist the data in the state. thank you

[@Quicknuggets]

I could upload an example of using it with laravel to persist it to a database or sent out as an email, not sure what your preference would be

[@mazimpakatoty445]

@@Quicknuggets anything bro that can demonstrate how we can capture all the data in the states and persist it via api it can help a lot

[@pjborowiecki2577]

@@Quicknuggets Please do! Thank you for the tutorial

[@RushyNova]

Great tutorial! How do we ensure that the input values are not lost when switching between steps? For example, if I complete step 1 then press continue and then press back the values seem to be reset. Is there way to store the state of each step?

[@Quicknuggets]

The values are not reset, they are stores using react context ... download the github repo and run it...then let me know if you have any issues

[@RushyNova]

@@Quicknuggets My apologies! Confirming the example on your github repo works and maintains form values when navigating between steps. I'll continue debugging my code. Thanks :)

[@banuuzun5002]

@@Quicknuggets could you please share your github repo? I couldn't find it.

[@Quicknuggets]

@@banuuzun5002 github.com/QuickNuggets/multi-step-form

[@gmontanher]

Thanks for the tutorial. One doubt, I want to add a post request to this process. How could it be done.? Or in which file Should I add ?

[@dami3589]

Hi. Did you do this?

[@letstalkaboutitletstalkabo631]

how to handle this form?

[@adithyanarayanmk9388]

Where the Form data is stored after clicking conform button?

[@goromajima7975]

Hi, great tutorial! Though I was wondering how could you make it so that, if user leaves a field empty, you give them a warning, asking them to fill that field before they progress to the next form step. Similar to the "required" attribute on inputs, but it only works in forms.

[@Quicknuggets]

I will post a link or video showing how it can be done.. subscribe to stay updated

[@predatorvsprey8962]

We have being waiting

[@eazydatasolutions5800]

Learn Zod

[@alejita.jaramillo]

I would like to know how I could validate the form before taking the step!

[@Quicknuggets]

I was working on it then.. i change my day job...and don't have the time right now... but i will ..just subscribe and you will be updated

[@1LifeStudio]

what's the logic behind last border?

[@Quicknuggets]

can you be a little more specific? ....it may be use for showing the green bar

[@1LifeStudio]

@@Quicknuggets I mean last rightmost border is hidden. How's that?

[@IgorHara-bq7qn]

can you go on next form if you haven't fulfilled all the inputs?

[@Quicknuggets]

there is currently no error handing done - this will be done soon... so subscribe to get updates

[@karunakarkoyada69]

sir what is this mt-4 and mb-8 like how to use all this??

[@Quicknuggets]

they are tailwind css classes

[@karunakarkoyada69]

@@Quicknuggetsmeans they will work after installing tailwind write.

[@Quicknuggets]

@@karunakarkoyada69 yep I should have a tut on installing tailwind... so you could always follow it

[@karunakarkoyada69]

@@Quicknuggets sir can u send me suitable video link for learning tailwindcss

[@francismori7]

Your buttons durations are set à 2OO instead 200 "2-ô-ô"

[@Quicknuggets]

I noticed and did make the correction. Thanks.

[@arijkneni7574]

i want the source code please

[@Quicknuggets]

its in the comments below

[@49_KarinaBhaldar]

Source code

[@ericnganda9765]

I recieve an error step.map is undefined

[@Quicknuggets]

@ which point?

[@factzClips]

Same

[@pjborowiecki2577]

@@factzClips Just add a simple check if the newStep exists, by adding newStep &&. As in: const stepperControl = newStep && newStep.map((step, index) => { .... and so on })

[@webapple1]

its great but not responsive.

[@Quicknuggets]

Will work on making it more responsive... but if you did ..plz share