Build a Multistep Form in NextJs Using react-hook-form and ZOD

This video will look at building a multistep form in NextJs (React) using react-hook-form for form state, ZOD for schema validation, and framer motion for animation between steps.

👉🏼 The Ultimate NextJs Course

👉🏼 Project source code (GitHub)

👉🏼 Work with me

Chapters
0:00 Intro
0:44 Project setup
1:40 Add the form shell
6:30 Add react-hook-form
10:00 Add form validation
15:30 Add animation
20:10 Recap

[raillyhugo]

Thank you, that's what exactly I was looking for. Concise and clear explanation! Keep up the good work!

[longsuabc]

Really great and amazing video.
Very clear explanations all the time. I am not a native English, but I can hear his English very clearly!!
I respect you and your business!!!
Cheers!!!
From China! 💪💪✨✨👍👍👏👏

[alirzana]

thank you so much for this video
it really helped me implement it in my own project
your videos are great and I hope you great success

[siebe]

This was something I was searching for! Thank you!

[ammarhaidar]

Awesome, just in time🎉🎉, appreciate your content, thanx.

[alextwine]

Thank you very much! It helped me a lot. Great content!

[yogawithaaron]

This video was tremendously helpful. Ty!

[almaducatel]

Thank you verry much for your time. You are a blessing.

[kyle-andrewgovinder]

Always providing us with amazing content, Hamed
It's safe to say you taught me everything I know about Next

[jeremiahchinwe]

This video has really helped me achieve my task

[sundayucheawaji]

Thanks for this. It was really helpful.

[BreadfortheSoul-lbzr]

Thank you for taking the time to share this. The Lord Jesus bless you.

[htetlinlinnaing]

Thank you for your amazing Next.js content! If you have time, could you make a tutorial on adding/removing multiple fields dynamically on button click? It would be super helpful!

[leonardorocchini]

Nice video. that would be great to implement app routing in the multistep form so that we have a separate page for each step.

[SanderCokart]

We need a version that cam scale infinitely using lazy and pre loading but idk how you preload component 3 while component 2 is showing for example.

[trusht]

Thanks sir for the detailed explanation. I have tailwinds subscription so decided to apply this to my app. I am thinking to save input data to local storage just in case if the user navigates away with tons of information typed and when they come back to the form without frustration. What do you think?

[ivandamyanov]

Thanks for the great video. I really like react-hook-form but there seem to be very few videos about an important integration - custom inputs + react hook form. I read 3 different articles for different versions of the library and it is all implemented differently and some things don't work. Especially with a Typescript environment. I like that library but it proves to be very complicated for beginners to use it in a reusable way (custom components). Would be awesome if you could do a short video on that or redirect me to any good example you might know of for the latest version.

[saiguna]

Thank you for the amazing video but if i have optional fields it's not working for that one how to solve it sir

[dm-bnnq]

Hello, i added a button to submit the data to the API, but i can't even see my data in the console, i can't even log them and there is no error at all. Can someone help please ?

[tomasburian]

What always gives me hard time is trying to figure out some extra features that would fit into the process because as a pro I tend to get tasks that are easily out of the ordinary use case. For example, I want the user to input his company number on the first step and then not only validate that the input is not empty, but also that the number they provided is real and not made up.
Is there a way to run a custom function for each step that would do something before it would let the user go on to the next step?