Multi Step Form With Progress bar Using HTML, CSS & JavaScript [Project 32/100]

hey there what's going on my name is basipanda and in this video we are going to create a multi-step registration form using only html css and vanilla javascript all right so this is what we're going to be building throughout this entire video you can see that it's got like four steps starting from the intro all the way to the address so when i click this next button it's gonna go from the intro to the contact section here and likewise finally the address all right so without any further ado let's dive right into it and translate this to code okay so back in here i'm going to create the index.html file and then followed by that i'm going to create the style.css file and for the javascript script.js and back into index.html the html boilerplate and obviously i want to link this to style.css and in here link it to script.js as well all right and for the title i'm going to simply call this registration form like that okay so in the body i'm gonna have a form with a glass of form and it's not gonna go anywhere and then form step and form step dash active so it's gonna be the active form step here and then input group and it's going to be a label so it's the username it's going to be username and then input type of text the name is username and the id is also username there we go and then i'm gonna create one more here so that's the input group with the label i'm gonna call this position the label is position input type of text this also position and the id is also position okay and then right here you're going to just simply place a button okay anchor tag with the class of button and button next here it's not going to go anywhere and you're going to just call that as nick so if i run this in live server so you'll see this is how it's going to look like okay so i'm going to just zoom this in a little bit and then back in here and style the css i'm going to get the b4 likewise the after and set a box sizing of border box for this okay i'm gonna change it to css and then for the body i'm gonna add a font family the phone family that i like and then i'm gonna go with seagull ui as a fallback phone family i'm gonna set the margin to be zero and then display this as great then place the items to the center alright so this way everything is in the center and you can notice that i didn't put a minimum height of 100 vertical height here all right so this is how it's going to look like i'm going to zoom this out a little bit and then right here okay for some reasons my css snippet is not working okay so this is going to be for the farm so i'm going to specify a weight for this a minimum weight of 320 pixels uh 30 percent that's the idea which we want for the form and 420 or 30 pixels for the maximum width here okay and the margin of zero and auto then we're gonna also add a border of one pixel solid some kind of gray color here and also border radius of like point three five rim here okay so the corners are a little bit around it i'm gonna also add some inner padding here 1.5 rim there we go so this is how it is going to look like then uh we also need to style this input groups the label and the input as well so right here i'm going to say some global stylings are going to go right here so for the input it's going to have a display of block okay and going to have a width of 100 percent then a padding of 0.75 ring and uh let me see a border of one pixel solid triple c and i bought a radius of point two five rim let's check it out how's that gonna look like okay so it kind of looks good and for the label right here label we're gonna display this as block as well and then a margin bottom in this case i'm gonna go with point five rim so there is a little bit of room between this username and the position right here okay so back in here i'm gonna capitalize this username and for the input group input dash group so i'm gonna go back into index.html this is the input group that's going to serve as a wrapper for the label in the input okay so i'm just going to have a margin of like let's say true rim and zero so just that to make sure that there's a little bit of space between the label and the input between those okay so yeah that's it it looks good and then down below right here some styles for the button here i'm gonna get the button at a padding of like point seven uh five rim and uh i'm gonna also display this as block then i'm gonna get rid of its border uh well it doesn't has any border indeed i'm gonna get rid of text decoration and set that to none so this is how it is going to look like you will also want to add that background color for that too okay so here is that okay so what i'm going to do is background color let's see i'm gonna first just comment this out right here and then go all the way up until here i'm gonna create a variable in the state root and then primary color and then right here let's say red okay so what i mean to use is some kind of color like this okay okay what is that there we go so the primary color we're gonna reference it right here from the variable dash primary color there we go so go back and that's how it's gonna look like so i'm gonna also add a color for this it's gonna be totally white and takes the line to the center okay so go back and that is it uh obviously we want to add a cursor of pointer too and a border radius of 0.25 rim here okay so there we go and then an index.html i'm going to add some additional classes here with 50 because i want this to be like 50 percent and mlr2 to position it at the right side so these are going to go in the global styling section right here so with 50 what that mean is going to have a width of 50 and then ml-auto it's going to say margin lift set that to auto there we go so now you can see that the next button is positioned right here at the very right side and then down below i'm going to go button when i hover on that i'm going to also add a box shadow of like zero zero 0 2 pixels i'm going to go with a white color and then 0 0 0 3 pixels ah come on and then again from the variables it's going to go with that primary color so now when i hover on that and here's this little nice effect for the button okay i'm going to also add a transition of 0.3 second so that looks a little bit better whenever we are hovering on that all right so this is it and then back into here i also need to add an h1 right here we're going to call this as registration form and i'm going to also add a class right here i'm going to say text center okay and style the css all the way to the uh global stylings right here i'm going to say text center so it's going to just text the line everything to the center whatever that has that class indeed all right so this is it we just created the very first step of this and then back into index.html i'm gonna also create the rest of that okay so i'm gonna duplicate this down below right here but this time in a state of username it's gonna be different i'm gonna call this phone okay and then this is gonna be the email all right and in here i'm gonna call this buttons group okay so earlier there's only one button that has to be positioned at right side but now we have to position two buttons so i'm going to duplicate this down below uh obviously i need to get rid of these as well with 50 and ml auto and then change this to be previous and then instead of button next i'm going to call this to be button priv okay so go back and there we go this is the phone and the email but you can see that these are kind of hooked on top of each other so what i'm gonna do is go back to style the css all the way to the bottom uh maybe above the button class right here so buttons group i'm gonna display this as great and then great template columns to repeat to one fr i'm gonna add a gap of 1.5 rim here okay so that there is a little bit of space between these two buttons okay so there we go the previous and the next button uh you can see the phone and the email indeed i need to go back here and capitalize this all right so that is it we just created it successfully and now we're gonna also just duplicate this down below but this time it's gonna be for um i'm not sure it's gonna be for the date of birth i think d-o-p for date of birth so it's date of birth come on so instead of takes this time we're gonna go with date here okay and i'm gonna also replace email with um an id and then it's gonna be a type number okay so yeah this is it i'm gonna indeed call this to be national id okay and then i'm gonna also duplicate this down below and this is gonna be for the password okay and the type is also password and in here i'm gonna call this confirm password okay so the text is confirm password and i'm going to replace date of birth with password there we go and we got got to change this to password as well and this time instead of that next we're going to go with an input or a button with the type of submit and the value of that is going to be submit it's going to have a class of button and button yeah only button that's it okay so going back to here so we have the username and position then we phone that we have the phone and email part here then password and confirm password all right so yeah that is it and then now uh we also need to do some extra steps right here and that is to add the progress bar as well okay first i'm going to hand a list and i will add that progress bar as well okay so going back to here we have this form step dash active so i'm gonna go right here step dash actually that is form dashes tip i'm gonna display this as none and then we have this form step dash active which has display of block here okay so in here remember that only one of these steps right here can have this class of form step dash active so the rest of that that don't need this so i'm just gonna delete it from there okay so this three doesn't need that so i'm gonna delete it and that is it so we are only left with the username and position all right so now we also need to add that progress bar as i said earlier okay so down below here i'm going to say that these are going to be the steps and then here this is the progress bar all right so again i'm gonna create a class of progress bar and within that it's gonna be this class of progress step four times okay so that is it and if you go back you can see that visually nothing has changed but we're gonna add all the things that we added earlier using css okay so i'm gonna go back into style.css and that's something that's gonna go below right here so it's the progress bar there we go so this progress bar itself is going to have a position of relative and then down below here for the progress dash step okay so these are the one that's going to matter so i'm going to add a width of like 35 pixels that gets converted to rim like that so that's the height it's also 35 pixels and then i'm gonna add a background color in this case dc dc it's kind of grayish background color though and i'm going to also add a border radius of 50 so that it's totally around here so going back i'm going to go back here you can see that all the progressive tips are showing up like this in here and then for this one i'm gonna display this as flicks okay see and justify content to be a space between like that so now you can see that all these are positioned like this and then we also need to go with the progress bar i'm going to get the b4 so the content to be just nothing it's going to have a height of 4 pixels and then it's going to have a width of 100 obviously it need to be positioned as absolute from the top it is 50 and transform translate y to a negative 50 percent to um let's see i also need a background color i'm gonna go with this background color so both are the same so there we go and now what we need to do is to add a number right here so one two three and four and some title below these right here so it is intro or info whatever okay so going back into here in order to add those numbers i'm gonna use the counter css property okay so with that i'm gonna say counter reset and set this to step and down below right here progress step and i'm gonna go with the b4 right here i'm gonna say counter increment for this step right here and for the content of that i'm gonna go with the counter of step so now if i go back you can see that the number is created right here so it's one one one and all of that but okay there seems to be a small problem actually this counter step this has to be come on this has to go right here okay yeah there we go so now you can see it is incremented from one all the way to the four so the way that this counter work is that uh okay so a better way to understand it is that with counter reset think of this that in here we are uh initializing a variable we are declaring a variable okay although it's not a variable but it's a better way of understanding so think of it like you are gonna either create or reset a counter using this counter reset property and you're gonna name it so in this case we're gonna name this a step and then down below right here we're gonna increment this by one so it's always gonna go from zero i believe and then we're gonna increment that by one and using this counter and passing in that variable or that step here then you can see that it's going to pass all the way in here and now we need to somehow position this right in the center in here so it's not at the edges there so uh i think we can simply say display flicks justify content to the center and align items to the center and go back okay so i'm gonna just indeed cut this off of here and paste it right there okay so going back now you can see that these are positioned in the center and somehow it looks like that this line is on top of that so we can get rid of that just by specifying a z index of like negative one like that all right so one two three and four that is it now we need to also add that text beneath this below right here so it's for example intro id or whatsoever so for that i'm going to go in index.html right here and then i'm going to add a data title of so it's going to be different for all of these so this could be like the intro and this is the contact this is the id and finally this one it is the password here okay so if i go back uh you can see that those changes are not reflected in here because we haven't used these so i'm going to go back into a step excuse me style the css and in progress this tape i'm going to get this progress step after and see this content from the attribute so this at method is gonna just refer back to the attributes is like you know class progressive state these are the attributes okay so i'm gonna pass in this data title and then it's gonna grab the value of that okay so i'm gonna just paste that right here and then go back now you can see that the intro contact id and password are all showing up now we need to just style the and position this right below here okay so for that i'm gonna position this command position this is absolute and from the top i'm gonna go with this caulk and then let's say 0.75 rim and then i'm gonna also decrease the phone size of that to eight five frame or something and go back now you can see intro contact id and password deal all showing up really nice right here i kind of think that this is a little bit more and i'm gonna also give it a slightly uh less dark color here okay and a little bit of a space too so in here i'm gonna say margin of like tree raymond zero and go back and yeah so now it looks a little bit better uh however you can say like to rim and then this is like 4m here okay go back and yeah so this is looking better much better now okay so now we need to handle it through javascript so first let me just go to a 100 person view so this is how it looks like when it's 100 okay so i'm gonna use javascript now in order to go from the first step to the second step and meanwhile i'm gonna animate this section of the form step as well and with that i'm gonna also update this progress bar right here too okay before going to the javascript i i just remembered that this intro it has to be active so i'm going to go back into index.html i'm going to say progress step dash active so in this case it's just gonna make sure that the intro is active here okay so i'm gonna go back and progress step dash active um active and then i'm gonna add a background color for this it's going to be that primary color and then the color of the text is going to be whitish color here so now you can see that it's already saying that step 1 is active the intro is active this is the intro step okay so then now back into here in script.js i'm gonna go and get the previous buttons and the next buttons here so pre buttons it's document.queryselectorall and then here i'm gonna pass in that button dash brief there we go and then i'm gonna also get the next buttons too so that's document.queryselectorall and then button dash next there we go and down here i'm gonna also get that progress this document.getelementbyid i just remember i haven't yet created it so i'm just gonna do it real quick here so this is the progress bar and right here i'm gonna create progress and then progress again so if you're wondering what is this this is actually the line that is going from the first step to the second statement from second to third and fourth okay so this is that line and it really doesn't need much styling it's basically going to go with all these stylings of this one here and in addition to that from what we know it has that background color from the variable of this primary color and yeah that's it this can have a width of zero person so that is it and script.js back again let me see if i okay i didn't break anything and then i'm gonna go and get all the form steps too so in this case that's document.queryselectorall and then dot form dash step okay back into index.html just a formstep and then down below here i'm going to say next buttons dot for each so looping draw each one of those buttons individually and then i'm going to say button.event listener in this case when i click on that i'm going to run this arrow function and this arrow function was going to do basically is gonna die from the first step to the second step but before that there is something that we have to take care of how do we tell the computer the javascript that we are going from the first form step to the second one okay so we can keep track of that by creating a variable of i'm gonna call this as form steps num okay so i'm gonna set this to zero but whenever i'm clicking on that i'm gonna just increment it by one okay and then i'm gonna call a function called update form steps there we go so then down below right here i'm gonna create another function called that update form steps and what is this gonna do basically is that it's gonna just get the form steps right here and then pass in that index that we are looking for so dot class class list dot at and then we're gonna add that active class which was this form step dash active okay let's just copy this so i don't make any typo so i'm gonna paste that in now if i click that next okay so it is not working make sure that it's connected to script dodges and there is no spelling typo here next buttons okay on click we're gonna yeah this is form steps number here i'm gonna copy this and then paste it right here and then go back and click that okay there we go so it's showing up the next step and you click that it's also showing the previous steps as well okay so now we need to handle it that whenever we are going to the next step we all we want all the previous and the out of future steps to be hidden okay so the way we can do that is just i'm gonna go right here and say form steps dot for each again i'm gonna go through all the form step look through all of them and then i'm gonna say formstep.classlist.contains so if it contains the class or form step-active okay so if that is true then i'm gonna say or remove formstep.classlist.removed class of form step dash active so then if i go back here now i click next you can see that now only one of those step is active at a time like so there we go so yeah it is looking nice we also need to handle the previous pattern as well so we just need to replace the next button with previous button and instead of incrementing we are going to decrement this time okay yeah there we go and also maybe you want to add a little bit of animation i don't know if you like this animation but if you don't you can escape this this one and don't add it here okay i'm going to say 0.5 second and then keyframes animate it's going to go from transform and scale of wine 1.0 and an opacity of zero two okay to transform and it's gonna scale one point one here and it's gonna have an opacity of one like that okay so now if i click next um something is wrong so i'm gonna go back here yeah i also need to add a transition as well i think uh no seriously yeah it's just nonsense i add that right here so i'm just gonna go yeah this is the progress step active okay okay so this is supposed to go for the form step okay i'm gonna also cut this off from here and then paste it down below here and now what's gonna happen is that okay so that is working but the transform origin is from the bottom or maybe from the center and what you can do is say that transform dash origin i'm gonna specify for the top here so now you can see it is animated from the top you go to the next and it's gonna animate that okay phone and next date of birth and next the password and the confirm password all right so yeah it is working nice so uh the mistake was that i was adding it for the progress step after okay so yeah that should be for the form step indeed okay so back into here now that we updated the form steps we also need to somehow update these as well so it can go from the intro to the contact an id and a password okay so the way we can do that is that we can create one more variable right here and start from one but if you want this to be simple okay so we only use this variable to keep track of which state we are and in which progresses that we are so i'm gonna use this one here okay but i'm gonna just call uh another function i'm gonna say update progress bar okay so then just gonna copy that out and then paste it right here and then down below i'm going to create another function update progress bar and basically what is this going to do is that so let's just make sure we get all those progress steps okay so these are the progress step we need to get all of these so i'm gonna go down below here progress steps that's equal to document.queryselectorall and then dot progress step there we go so then i can use this right here say that progress steps start for each of these uh progress step and i'm gonna also get the index you'll get to know that in a little bit why do we need that so if the index is less than the form steps number okay plus one okay and then right here we're gonna say progress step dot class list dot add the class of progress step dash active otherwise anything else we're gonna just simply remove that okay so instead of add we're going to say remove so then if i just go back and click that you can see it it successfully go from the intro to the contact and likewise to the id and finally the password and the reason why we are adding this plus one right here that's because even if we are in the very first step right here so now you can see it's already one of those or active so uh the way this condition works is such that it's always looking if the index of that current progress step is less than form steps number plus one so it always somehow this has to be at least one number greater than that for it to work okay and the final step is that we also need to update the line that's going from the intro all the way to the password as well so for that i already get that progress here you can see get element by id if i go back here you'll see that this this div right here okay so i'm going to go and then i'm going to say progress.style.with and that is equal to yeah i also need to get the current active number of progress step active here so constant of progress uh active whatever document.queryselectorall and then dot i'm gonna add that right here okay so i'm gonna get the progress active dot okay dot length negative one and then divide that by the progress steps dot length negative one and then multiply it by 100 plus i'm gonna add this percentage at the very end of that as well okay first let's see if this is working yeah so there we go i just need to go to style.css and for the progress right here we're going to add a transition of 0.3 seconds so then go back and there it is so finally this is working really nice and the reason why we are decrementing negative one from the progress active uh from here uh that is because we are already in this step okay let me see so when we start the progress the registration form from i mean when we are loading it we are already in this one right here so this is active okay so uh somehow we need to specify the width of the progress bar to be zero percent okay so that it starts from the zero person this progress active dot lint this is gonna return one and then one negative one that is equal to zero and zero divided by any number is again equal to zero so that is why we want this progress bar to start from zero percent because we are not making any progress right now but when we are clicking that it's gonna go one two two and then uh this formula is going to work for the rest of that as well okay so i hope it is clear okay so just repeating okay because we want this progress to start from zero person we are doing this trick so that it goes from zero percent all the way to 100 or 99.999 percent all right so i'm gonna click next and see if there is anything else we have to cover yeah so that is it i think there is nothing else to cover all right so that was it for this video everyone i hope you enjoyed it and if you did don't forget to hit the like button subscribe to my channel and turn on the bell notification for more videos like this and i will see you guys in the next one thank you for watching

Channel: Basir Payenda

Views: 10,361

Keywords: basir payenda, basir, css project, css javascript project, html css project, javascript projects, javascript projects for beginners, html css projects, javascript app, web app, javascript project tutorial, multi step registration form, mult step form, multi step form javascript, multi step form html css and javascript, progressbar tutorial html css javascript, how to create multi step form using html css and javascript

Id: JFfVilQSius

Length: 33min 11sec (1991 seconds)

Published: Sun Jun 27 2021