Multi Step Forms in React - Beginners tutorial

hi everyone i hope you're doing good today we're gonna be looking at creating a multi-step form so i have got here just a simple form it's got six fields on here but we're gonna break it down into three steps and that's what we're going to be going through today you know if you have six fields you're probably not going to want to break it down into these steps however it does show you the principles and exactly how to do it now i'm using a nexus application it's totally empty there's nothing specific to next in here this is styled with till and css so if you want to code along with me then you can clone the starter files in the description there's a link to those and we can we can get that going so let's get started so we're going to be using react hook form for our form so we can install that just by saying npm installed react hook phone and you know multi-step forms they're not as complicated as you know a lot of people would would seem to think so we're gonna first of all we're gonna use state um and we're also gonna import use and once we've got that installed we can run our server so if you did clone the starter files just to run npm install and then you can npm run dev um after you've installed um react hook fall so the first thing we need to do to use react.volume we're going to need to what are we going to need we're going to need register um values and errors and that's all we're going to need for now equals use form we're going to need handle submit register errors handle submit i don't actually think we need values those values i think no yeah we already get the values so it is useful so that's great now what we're going to do is we're going to break this down into three components so that it's quite easy to read and what we're actually going to do is we're going to have three totally separate forms so you can see here we've got this form with the six inputs so what i'm going to do is let's um let's make a components folder and let's make a step one step two and then let's make a step three file oh i don't want that extension okay and then once we've got that let's just export default function step one and then let's just return this for now step one and then we can do that in step two and we can do that in step three so we've now got our three steps in our index page let's what we're going to want to take out here is the whole form so if i let me just grab the whole form i'm going to pass that into step one so we take the whole form and then i'm going to remove everything except this full name div and the email div so everything except this submit button so once i've removed those this button is just going to be next it's not going to be a submit button um and what i'm going to do i'm just going to drop this button outside of the phone because i don't want it to um like a button uniform it may submit perform i've had that issue before and we're gonna need these um a react fragment because we've got two things so let's um let's do the same thing again did i post anything else i'm not sure so let's grab the form oh i just have first i think yeah let's grab the form again and we'll put that into step two we'll do the fragment first this time let's paste the form and then we're gonna want to get rid of the div for the full name and the email and then we're going to want to keep the phone and the message fields and then we're going to want to get rid of the wedding here about us and do you have any feedback let's drop the button again outside of the form so we don't submit what's going on there i'm taking the div as well let's call okay perfect and then again for step three you know what we're gonna do fragment paste everything inside and we only want to keep do you have any feedback where did you hear about us let's get rid of all the rest like so not trying to clear too much sorry guys i was a little confused do you have any feedback it wasn't um it wasn't all complete you know i wasn't sure why author man sorry so why did you hear about us do you have any feedback let's drop the button below the phone i wasn't sure step one if i took the div as well no i didn't so let's take the div down as well just so it's clear and then in our index page let's get rid of the form completely we don't need it now and what we're going to put in here let's just put in here step one and make sure that's working okay so we got step one and next so let's actually on these buttons um we can have imagine something like that give it a big gap so let me just take that and add it to these as well so it looks right there we go so we've got our form now of course it's not doing anything right now so what i'm gonna do is i'm going to get our react hook form and we're just gonna make this form inside of step one and i'm gonna do this we're not gonna cover error handling i covered that in my last video on forms so i'm not actually to take any errors here let's just take the register and handle submit um and we're going to want to do that in in all of these steps actually like i said we've got three three separate forms going on so let's bring that in let's bring that in and then let's bring the register and the handle submit into each of these as well and i just want to make a let's make a handle submit function which will um so for step one we want to do our own submits function so it's a function unsubmit and then let's console log values that's going to take values and we will do we'll change the stage so let's um let's register these so in all the form inputs we're going to say ref equals register uh so let's do that on both of those and let's just do that on the whole thumbnail while we're here so we'll just add this ref equals register to all of the inputs like so so our forms now registered all the inputs are registered sorry and they've all got a unique name so you can see full name email and that's where reactor form is taking the the input um name from the name on your field so make sure those are all unique if you're not using the start files if you are then it's all set for you so unsubmit values and then on our form tag at the top here we want to say on submit equals and we're going to say handle submit and we're going to pass in our unsubmit function to handle submit so of course this handle submit is coming from hook form and this unsubmitted is the function that we're defining here so this is what it's going to do so it's just going to come to lock the values so if i pull up the console here and we put in here some stuff um gmail.com next yeah so our um our button isn't actually um isn't actually submitting the form which is actually what i went to i'm really sorry i've got this all confused so we want to um we do want it to submit the form type equals submit okay so we hit next now okay perfect so we've now got this form log linkedin so let's do the same same thing here so we'll add this on submit function into step two and step three as well like so and then let's also add the unsubmit equals handle submit on the form so so now we should be able to and let's move these bones back inside the form um where they were originally okay perfect so we now have everything kind of working but in three different three different steps right so within our index page i i want to use that so i want to say const and then let's call this the step and set step equals use stead and we're going to start at step one and then i'm going to say const form values and set form values equals used and we'll just start that off as an empty object that's fine and then we're going to pass a lot of this stuff down into these steps so it says step one we need the set step pressing down so if you've never passed down these um set stair things uh it's it's a pretty common thing to do which will basically allow us to set this state with inside our our step one so we want to set the step we want to have the form values and i'll show you why in a second and we want to set the form values so form values except for values so we now have those things so within step one what i would like to do on submit i'm going to want to set the form values and we need to bring that stuff we need to bring that stuff in in our function so we've got our set step form values and set form values so we're going to set the form values which is an object and we're going to take the previous form values and then we're going to add here um our values like this and what we could do is we could say um yeah let's do this so if we again type in some some random stuff hit next if we go into our react components if we look at our home component we've got our state with the values of um that's not what we want we want to merge these values in as well like so so let me just refresh that what we did is we we put the the values which gave us a values object and we didn't want that um so if we do this again now we save our states we've got full name and email here and then what we also want to do is we want to set the step to two when we've done that so if we do that again you can see this this state here it changes to two so let's um let's bring up our home page again and we will now link this up so it actually has multiple steps so underneath awesome form let's just um let's just say here step and then that will be one two or three of three so we're on step two of three right now apparently um let's just wrap those in a p tag like like so step three three and then yeah let's give this a bit of a padding just so we can see a bit better give it a bit of space yeah we got a lot of um a lot of padding on uh this we don't need a lot of stuff oh it says imagine bottom twenty okay step one of three um i can't look at it like that sorry i know this isn't about styling it just it's making my eyes bleed okay so we're on step one of three again if we type in our name and email and hit next we move on to step two of three within the state however nothing's nothing's changing so let's um let's add some conditional rendering here so if we say if step equals 1 then we want to display this if step equals two then we want to display step two and we're gonna need to just copy that down a couple of times down a couple of times step two and then we want step three and then if the step equals three then we want to display step three okay and then so what's the submit button showing now so we're on step two so i just want again next and then on step three it will be submit perfect so on step three um so step two we need to do the same thing in step one where we set the form values and then we set the step to three and then on step three we need to do the same again we're not gonna set the step let's just console log out from values okay so let's go back so our name email and we hit next and step two phone number message and we broke it set form values is not defined so of course we didn't pull in this stuff unexpected talk and set step oh okay so it looks to be working let's go one more time next phone number okay i did a lot of dodgy typing into forms and then where did you hear about us um yeah i'm not gonna play anything serious okay so when we come to log now we have do lots of values so not bad not bad um we didn't get these third lots of values i think if we did it now we would yep so you can see the set form values um that console log they got it a little bit before okay so hopefully you can see the premise of this now um so we could if we wanted to when we're in step three of course we want to set the form values console.log and i think we wouldn't even have to set the form values like this i mean of course we can but if we just wanted to get it the first time we would just say form values and then we add in our values like so um so then if we go through that again on the first time that we submit it when we do that console log we will have everything so that's great and it will be available instead now of course the downside of doing it like this if someone refreshes then it's gone but hey it's a multi-step form if you want to you know keep it through refreshes you can either you know upon going between stages you would submit to a database or alternatively you could submit it to local storage so yeah so how would this work now we need a function to do our submitting so we've got an unsubmit function here so you know whatever it is that we wanted to do we could do this on submit function um so if we wanted to um i'll just show you really quickly with an api route so we might want to say in here past uh we don't even need to say that data equals request our body and then let's consolidate the data and then we'll send the data back um by response and then in this on submit we could do um is fetching the work with us um without an absolute url let's try it so our on submit let's make this async function unsubmit uh you know what it won't work let me just um let me install axios so const config equals url it's just going to be api forward slash hello the data is just going to be this um method let's just say paused and we can set content oh no sorry headers i can say content type is application json then we can set axios and we pass in the config say response equals the word axios like if response of status equals two hundred is for example we should definitely be um doing a try catch but hey ho so that should um get the data to the back end for us pretty quickly so let's just run our dev server sorry i'm just trying to rush through that so i can show you how you would get the data to the back end and actually use the data in my previous video on contact forms where we looked at you know doing the contact form on the front end we we did validation making things required we made the errors display on the ui we did regex pattern matching and then also send an email through an api route with nodemiller so if you want to get more in-depth about how to do that stuff then feel free to check out that video um but for now if we submit then you can see we got a success so this worked success came back and then we we got our response back you see this um there's a response that they were console again and then in our in our back ends on the server side you can see we actually have the data here from our form and then you could go off and do whatever you wanted with that data so you can do multi-step forms in a multitude of different ways to be totally honest however just having these three separate forms which links into um some form of state is often a a really good solution um so yeah hopefully this was good for you hope you learned something i shall see you in the next video

Channel: Adam Richardson

Views: 547

Rating: 5 out of 5

Keywords: react, forms

Id: CicQve5-uvE

Length: 24min 8sec (1448 seconds)

Published: Thu Mar 04 2021