How to Create Multi Step Form Using HTML, CSS & JavaScript

[Music] so what's up guys welcome to another video today we are going to create this multi-step form as you can see that that's a multi-step form and we have this button next we are now in the step 2 of our multi-step form and we can also go to the next and also we can come back to the previous step as you can see and in the end we have the submit button where we can submit all the our data so let's actually submit this form so next and here let's say that bro at pro.com and the number and the country is bd and the city is chittagong and the post code is this one and whenever i will submit as you can see that we are dynamically back in our step one and all the form data is cleared and if i open my console log here you can see that that's the latest submit you can see all of my data here so now you can do anything with this data and that's it what we are going to make in this video we are going to create a multi-step form so no more talk let's dive into it so welcome to day 20 of our 30 days 30 summit challenge so that's the challenge and in the day 20 we are going to create multi-step form so if you are interested to check out this repo i'll link it in the description where you can find all the interesting submits that i did in this 30 days 30 summits challenge so if you come please give it a star here and i will appreciate it so come here in our index file here is my css and also the jazz file so all are empty and for the html first of all let's get a boilerplate here and in the body let's get a section with the debuff container so we have a div with a class of container and in this div we will have our form so here we will have the form and for now we will not have any kind of action and also in this form we will have our all the step for our form so i will make a three step form so let's have a first step here so d with the class of step and also a step one so in this first step i will have three different input so let's get those so div with a class of form group and here in this form group i will have my first input so level so it will be the first name so first name and for the level i will use the first name so that's the level and also let's have the input so input here and the id will be the first name so first name and also the name will be the first name and that's it for our first input so let's actually copy this one and duplicate it so this will be the second one which will be the last name so we can copy it and ctrl d to select the same instance so as you can see that i select multiple instance of first name so let's make it last so as you can see that it made the first into the last as you can see so let's make it capital and that's for our second input and the last input for the first step is the nickname so we can just create this and make name and here also the nickname so if i save and refresh here you can see that first name last name and nickname so these are for our first step so let's create the second step so after this div let's also create the next step which is the step two so d with the class of step and step two and in this step i will have email so let's have a d with a class of form group so form group and in this form group i will have a label so that's for the email so the level actually will be the email with a capital e and also we'll have a input here so the type will be the email and also the id will be email and the name will be also email so this for the email and also let's create a next one which will be for the phone number so leave with a class of form group so and here i will have my label for the phone number so each will be for phone and here let's say that phone number and also i will have the input so input and the type will be the number so number and here i will have the id which will be the phone and the name will be the phone number phone number something like that so after that i will have the third step so let's create the third step here so d with the class of a step and also a step three so this will be for our third step and here i will have a d with a class of form group so form group and here i will have a level so level and this level will be for the country so country and here i will say that country as a level and also i will have the input for that so input type will be the text that's good and also i will have the id of country and also the name of country and this is for our country input and also let's have the city so leave with a class of form group and here i will have the level for the city so ct and also i will have the input so input here and id will be city and also i will have the level sorry name will be the city so the last input that i will need is actually the post number so d with the class of form group so in this form group i will have the level for the post code so postcode so post code here and also say that postcode and for the actual input i will have the postcode here so name postcode and also let's have the id so postcode so now you can see that all the inputs here and lastly so now you can see that these are the all inputs for our multi step form so let's actually create the buttons here so in the first step we need one button only so the button will be the next button so you can say that button the type will be the button and also the class will be button actually we can say that next ptn this is the button and also let's create the next button here so as you can see that we have the next button so in the step two we will have two buttons actually so first button will be the next and second button will be the previous so let's create those buttons so buttons and with the class of previous button and also we will have a type of button here and also the text will be the previous button so i can just say that preview and it will be similar for the next just we need to change the text and also the class name so now you can see that for the second step so these are the two fields for the second steps as you can see these have previous and next buttons and the last step which is the step three we will have also two buttons here so here inside of this step three we will have the previous button and the submit button so let's get those buttons so button with a type of button so we will have a class here so this class will be previous button so previous button so because it will be the previous button so prep button and also we will have the submit button at the end of our all the steps so we will have the submit button and the class of submit button will be the submit so submit and also this type will be the summit actually so we need to change the type for this button which is the submit now if i save as you can see that for the our third step which is the last step we have the previous and the submit button so as you can see that this is our first step and here we have the only next button because there is no previous step so that's why i need only the next button but when we are in the second step we have the previous step and also the next step so that's why i need these two button which is the previous and next so in the end we have the previous and the submit we don't have the next button because there is no next step this is the last step so that's why we don't need the next we just need the previous and submit so let's style this form so for that actually i need the style sheet so link it so link css here and in our style.css first of all let's remove all the padding here so padding will be zero and margin will be zero and also say that box sizing will be the border box and now you can see that i don't have any kind of extra gap and after that let's come to the body here and let's say that font size sorry font family i want to use is monster so monster right so i already installed this monsterart font in my pc so that's why i don't need to import it so it will be perfect as you can see that it's already applied so after that let's actually come to the section here and say that mean height will be 100 vh so 100vh and the width will be so the width will be 100 and after that i will say that display will be flex and align items will be align items will be center and justify content will be also centered so as you can see that this is the form and everything is now in center after that let's come to the container container here and i can say something like the width will be 90 percent and the max width i want about 400 pixel and after that let's actually have a background color in our section so background color here background color allies blue so now you can see that we have a background color in our section and if i give another background color in my container so background color white so background color white now you can see that that's our container and also make sure that you have a margin here so margin 0 auto so also let's have a box shadow here so box shadow 0 pixel for the x 0 pixel for the y and 20 pixel spread and also i'll have a black color with 20 opacity so now you can see that we have this and also let's have a padding inside the container so padding will be 20 pixel so now that's our container and also let's give it a border yes so border ready us will be 8 pixel yeah looking good and looking smooth so after that let's actually come here into the step so a step and i will say that every step display will be none so now we can't see the form because i just give the every step to display none so what i need actually i need to display non-fds step and i want to show one step so which is actually the active so let's actually have a class of active in our first step so i will say something like a step with a class of active i will display block now if i give that and save my file here as you can see that's the first step and we can see it so if i change the active class from the first step to the second step now you can see that i can see only the second step so that's how we are going to navigate each of our step we are going to move these active class between these three steps so for the default i wanna have the first step to show so you can see that we can see the first step so let's actually style those steps so come here in the form group so from group here let's say that which will be 100 and also let's say that margin top will be 20 pixels so we will have some space between each form inputs so after that let's come to the actual input so from group and input here let's say that the width will be hundred percent now you can see that the width of the input are 100 and also let's have a border here so border will be 1.5 pixel solid and also i will have a grayish color so if i keep gray as you can see that we have this grey color but i don't want this gray color so i'll just change it to the light gray as you can see so after that let's actually have some padding here so padding will be something like 5 pixel and looking good font family so the font size actually so font size will be 18 pixel so now you can see that whenever i will type the font size is now 18 pixel looking good after that let's actually come to the margin top so margin top here so i will have five pixel a space between the level and the input as you can see after that let's actually come to the border areas so border radius and we will have four pixel border radius here so looking good as you can see and after that let's actually style these buttons so this is the next button so let's actually grab it so button with a class of next btn and i will style it something like float right so i wanna display it here so if i give it full float right as you can see that it's now displaying in the right side of our container so after that let's actually have some margin top here so margin top will be something like 20 pixel and we'll have also padding so padding will be 10 pixel for the top and bottom and 30 pixels for the left and right as you can see also let's have a border here so butter will be none actually and also we don't want any kind of outline so outline so outline will be none and that's it as you can see and also let's have a background color so background color so as you can see that that's our background and i wanna change the font family here so phone family will be monster art and also font size will be something like 18 pixel yeah perfect and last we need to make the cursor pointer so now as you can see that that's our form next button so it's looking perfect as you can see that so actually let's move this active class from our step one to step two so now if i save as you can see that the next button is perfectly a style and also we styled each of our input here but we need to style this previous button so we can style this previous button very easily what we can do actually we can apply the same style that we did in the next button here so we can just say that button with the class of previous button now if i save as you can see that that's our next and that's our previous but as you can see that both of them have been float right but we don't want that that's mean i want to have the previous button in the left side okay so let's actually do it here so i just can see that button dot previous button i wanna have the float left so now if i give it float left as you can see that the previous button is float left and the next button is float right that's mean we are having the next button in the right side and the previous button in the left side as you can see so looking perfect for now and after that let's actually see our third step so cut the class from the step two and move it to the step 3 now if i save as you can see that this is the previous button and all the input are styled perfectly but we need to style our submit button so we can also give the similar style for our submit button so button with the class of submit button so if i save as you can see that the submit button looking good and lastly we just need to change the background color for our submit button so we just can say here button with the class of submit button the background color aquamarine so now you can see that that's our submit button and that's the previous button so all of our form step is looking good now so let's actually remove the active class from our step 3 and give it these active class in the step 1 because i want to have the step one visible by default when someone will come to our this website or web page and they can navigate all the steps through this next and previous button so now let's actually functionalize this next and previous button here so in our js before that actually here let's link our main.js file here so in our javascript first of all let's have all the steps so now we have three steps so let's grab those so constant steps and document document dot query selector all because i wanna have multiple a step here so i will grab all the steps actually so we can say something like inside the form we have a class of a step here so this will grab all the s step so if i console log by step here so console.log that step and if i save it and open my console log here here you can see that that's a node list and if i open the node list as you can see that that's our first step second and third step so you can see that that's a node list but i don't want to have the node list i wanna have an array of hour three step so for that i can simply say here at a from array.from so i will have a parenthesis here and inside this parentheses i just copy the whole code here and paste it inside this parenthesis so now if i save as you can see that that's an array as you can see it is no more the note list so now what i can do actually i can have all the prototype of array as you can see that this all are the prototype for the array and we can use it but when you have the node list you have some of them but we don't have all of the prototype for array that we have here so now let's actually get the next buttons so next button and here let's actually say that document dot query selector i wanna grab all the button which is the next button so i have actually two next buttons inside of our form so i just can grab them form and next btn now it will grab those two next buttons so we will also have the constant which will be the previous button so preview button and actually we also have the two previous button inside of our form so i can say something like document dot query selector all because i have multiple so form and i can say something like previous so now we have the all of our buttons and lastly we need the form actually so constant form i can say something like document document.queryselector and i wanna have the form i only have one form inside of our website so that's why i just can easily grab it by the form tag so now what i need actually i need to have even listener in our next button so let's actually come here in the next button dot for each and button i wanna have a function here so for each button i wanna have a even listener also button dot add even listener and it will be a click event so click event and when we will click we will run this function here so when i will say that i wanna change the step so let's actually call a function with the name of change step and here inside of our change step function we will pass the parameter which is the next so now let's actually create this function which is the change step so function change step and here let's grab the parameter by saying something like button so insert our function let's actually have a variable of index so index 0 so whenever i will call this function we will have this variable and initially the variable value will be the zero and now let's actually have our active step so constant active and let's actually set the document dot query selector and here i wanna select the active step so form with a class of active so i can say something like inside the form i'll have a step and with the s tab if anyone have active class that's the one that we are looking for so now we have the active step and what i want to do actually i want to grab the index of this active step so for that i can do something like index equals to steps dot index of active so now if i console log it or here so console.org the index now we are in the console log and if i click this next button now you can see that it's saying that the index is 0 because we are now having this active class in our first step so in array and the first step is zero and the second step is one and third step is the two because array start from the zero so that's why we are getting the zero so if i move this active class from one to the step two and save and come here and actually in our console log if i click this next i should get the one means we are in the second step now so what i need actually i wanna remove the active class from the index step so for that i can say something like step dot not dot actually we can say square bracket index so means it will grab the active step and from the class list so class list not here sorry after the square bracket class list dot remove i wanna remove the active and here after removing this active class what i wanna do actually i wanna check if we click the next button i wanna go to the next step which is the step three if we click the previous button we wanna go back to our step one so for that i wanna check so let's say that if the button means this one whenever we will call this change button we will pass a parameter here so as you can see that in the parameter i say it next means if the button is equals to the next we want to go to the next step so for that i can do something like index plus plus so it will increase the index so it will increment the index by one so now what i want to do actually i wanna add the active class to our this new index so for that i can say something like steps and the index now it is the new index because we just increased the index number here so what i can do i can say something like class list dot add active and save it and here if i click the next it's not working sorry it's not working because we have an arrow here so let's make it dot and click the next button as you can see that we are in the third step so looking good our next button is working so let's actually do it for our previous button so for the previous button we can do similar thing so here preview button dot for each and for each button what i wanna do so i wanna add even listeners so button dot id listener and here let's say that it will be a click event and here here what i need actually i want to change the step so for that i need to call the same function so change step and here now we will pass the parameter which will be the preview so now you can see that when we are clicking this next button we are giving or we are passing this next string in our change step but when we are clicking this previous button we are actually passing the previous string so now what i can do actually here in our elsif so after the if as if i can check also this pip so let's say that if our button equals prev means we are clicking this previous button what i wanna do actually i wanna change the index so i wanna decrease the number of our index so minus minus instead of plus plus now if i save so now it should work so if i click this previous as you can see that we are now in the first step because we just decrease the index and from the two now it is back in the one and if i click this next now you can see that we are coming forward means we are going to the step two and if i click one more so now you can see that it's working perfectly and we have now our previous and next button working perfectly so that's it as you can see so actually let's remove this active class from here to our step one so now sorry it should be the active class now you can see that our active step is the one and we are now in the two and that's the three so as you can see that is working perfectly fine actually and in the end let's actually test it so whenever we will submit we want to console.log all the input from our this form so for that i can do something like form dot add even listener and if we submit the form we can do something like so we can also pass the event here and here let's say that e dot prime default and also let's say that constant we will have an empty array so inputs so inputs of empty array so we will have all of our inputs inside this array so actually let's loop all the inputs so form dot query selector all and grab all the input and for each input i wanna push it into the inputs array so inputs dot push actually let's actually break it here here and let's actually say that constant name and value name and value from the input and after that let's actually push it so inputs.push and we wanna have the name and the value sorry this will be the comma and now it should work so if i go to the country and let's say that bd and submit it and after the submit if i come to the console log okay it's not working because we need to actually console log it here so console.log here and log the inputs and also clear the previous console.log from here so if i go to the last step and say that bd and submit it here console.log as you can see that we have eight of our inputs and for the fifth one we have the value of bt and the name of the input is the country so looking good actually so looking good actually and what i wanna do actually when we submit the form we wanna clear the form so we can say something like form dot reset so it will clear the form after we submit so let's actually try it one more time so first name is the shife and last name is darfun and nickname let's say that cifa and after that in next here we can say for the email is the bro bro.com and for the phone number that's my phone number and the country is the bd and the city is chittagong and also the postcode is this is my postcode now you can see that in our console we have all of our data which we just submitted by this form so we have this all this data and now you can do anything with this data so what you also do here when you submit you wanna go back to the step one so for that what you can do actually you can remove the active class from this step three and add it to the step one so for that i can say something like do these things copy this and paste it here so we are getting the index and after that we are getting the active step and we are just removing the class of our active from the active step and i wanna add it to the our first step so this is the step one so for that i can say zero and instead of remove i can add it now whenever i will submit this so let's say that pd and submit it now you can see that we are back in our step one so that's it as you can see that that's now fully functional uh multi-step form and i hope you enjoyed it and if you do please give it a thumbs up and don't forget to subscribe the channel if you wanna see more this website related video or web development related video please subscribe the channel to see upcoming those videos so my name is arfan and i will see you in the next video till then bye bye kodahafest you

Channel: WEB CIFAR

Views: 14,570

Keywords: multi step form, multi step form javascript, step progress bar, step progress bar javascript, step by step form page using html css javascript, html form, javascript, material UI, Form with Multiple Steps, Multistep Checkout Form, Css3 Form, Html Css Form, Multistep Form, Multi Step Form Example, multi step form with html, html multi step form, js multi step form, multi step form with vanilla js, web cifar, shaif arfan, how to create a multi step form, multistep form

Id: cKTgIDkRsGc

Length: 35min 56sec (2156 seconds)

Published: Sat Aug 15 2020