In today's video we'll teach you
how to create a multi-step user registration form using HTML, CSS and JavaScript. My goal with this channel is to
post videos on different topics every week this will help you
to become a full stack developer it's important to keep watching this
step-by-step tutorial until the end. Here on the screen we can able to see the
multi-step registration form with steps like account, personal, social and finish and then
below we have an account information with ste
p count says 1 of 4 which contains username, email,
password and confirm password along with this we have a next button to navigate the form to The
Next Step while clicking this it will navigate the form with animation effect to switching the
form from account to personal and it will change the color to the step as well as the root two in
our Channel I have added responsive registration form with then single view check this out after
watching this video to gain a better understanding Here i
n the next step we can see the personal
information with step counts say 2 of 4 that contains first name, last name, contact
number, date of birth with date option too along with this we have a two button here
one is previous and another one is next as we know already what next button will do while
clicking previous button this will switch back the form from personal to account and it
will remove the step and root color to while clicking the next year we'll navigate the form
from profile t
o social with the information of Step count displays 3 of 4 which contains
LinkedIn, Facebook, Twitter and YouTube too and here now we can able to see the buttons
with previous and submit as we know already what previous will do and while clicking submit the
entire form will submit here with the navigation from social to finish with the step of 4 of 4 and
it displays success with thanks for sign up with the success icon here and then text contain we
will connect you soon as of now we are no
t linked to the back end so this magic is done through
JavaScript and clicking this success icon here the form will reset and display a fresh form
again here before beginning this video I would like to introduce myself as Sharathchandar K most
of you are watching my videos without subscribing so please subscribe to our Channel and like
this video to encourage me let's build our own Here on my desktop I have already created a
project folder name called multistep form let me open this into yo
ur Visual Studio code so for
that I will drag this directory into your Visual Studio code Visual Studio code will automatically
loads all the file inside it inside the directory I have already created a index.html, style.css and
script.js in the index.html I have added a HTML boiler plate with the help of title name called
multi-step registration form by Sharathchandar K along with this I have linked two more files
with the help of link and I have linked the style.css with the help of scrip
t I have linked
the script.js along with this we have added one more link tag with the help of font awesome CDN
we are going to add the icons with font awesome and then in the style.css I have added a import
URL of the font family poppins along with that I have added a global variable with the help
of star and I'm going to reset the margin to zero padding to zero box sizing should be border
box and I have added the font family with poppins and I have added the transition to this font
famil
y poppins will get the results with the help of this import URL and now inside the body
element we are going to design the multi-step form so for that first I will create a
container with the help of div for that we have a embed abbreviation with DOT container
if we hit enter it will automatically created a div tag with the help of class attribute with
the value of container inside that we are going to add the progress bar so for that again I'm
going to add the progress bar with the help of
UL dot the value of progress bar if we hit enter
again it will create a UL tag and with the help of class attribute with the value of progress
bar inside that we are going to add the Li so inside the UL we are going to add the four steps
for the form so same as I'm going to add the four Lis so Li with * 4 if we it enter it will create
four inside that we are going to add the strong element of account and then next Li contains again
with the strong element of personal and then third Li off
again with the element of strong and I
will say the value of social the fourth one as with the element of strong and then we'll mention
it as finish and then for each Li we are going to add the IDS so the first ID contains account
the second Li ID contains personal third Li ID contains social and then fourth Li ID contains
confirm and now let us see our HTML file in action so for that we have a extension called go live
once we click this in the status board it will automatically load our pr
oject into a default
browser now we can style this with the help of style.css so for that I will jump to the
style.css in the style.css first I will add the styles to the body with the help of element
selector name called body inside the body we are going to add the forms into the center of
the screen with the help of display grid and then Place item Center we set min-height to 100vh
and then I will add the background color to Blue if I save now we can able to see the container
into the ce
nter of the screen with the background color change now we'll add the styles to
The Container so previously we have added the styles to the body with the help of element
selector name now we are going to add the styles with the class selector so with the help of dot
with the class value of container I will set the width of 450px and we'll set the Border radius
10px and then overflow should be hidden I will add the background color to white and then I
will add the padding Inner Space of top
and bottom to 20px and then right and left to 30px
if I save now we can able to see the container into the center of the screen so here I have
added 45 instead of 450 I have changed these things to 450 if I save now we can able to see
this and then now again we have added the styles to the body and we have added styles to The
Container now again we are going to add the styles to this particular UL tag right so again
with the help of class selector with DOT progress bar I will add the margin
bottom to add the outer
spacing of 30px we set overflow to hidden We'll add the color of light gray if I save now we can
able to see the color change here and then now we'll style this account to each Li so for
that again I will go here I will add the dot progress bar to Li if you add a Styles like this
so we can able to see the parent element and all the Styles applicable to the childes of Li's
so again first I will remove this list style Type To None this will remove the styles to
that
Li will add the font size to 15px and I will add the width of each Li's as 25% because
we have four Li we divided by four it will be 25 and then we'll set the float to left I will
add the font weight to 400 we'll set the text align to Center and then we'll set the position
to relative and then we'll set the Z index to one if I save now we can able to see the Li's into
the center of the list so now we'll add the icons to the each Li's for that we can able to add
the icon we can go here and w
e can set the i tag off with the class font awesome fa fa user
if I save now we can able to see the icon here right previously we have added the icons in the
HTML now for the change now we are going to add the icons with the help of CSS I will add the dot
with progress bar we are going to add the icons to the li's right with the help of Li and then we
add this ID so I will add the ID here and we set the before property and I will set the content
to /f023 and then I will set the font family
to font awesome if I save now we can able to see
the icons here so this content we can get from the I element itself and then same as others
we are going to add the icons so I will copy this I will paste it for three times and I will
change the ID value of each style property now if I save now we can able to see the icons to
all the Li's now we need to change the icons with the help of content I will say this as
F007 and then for social 0ac and then for the confirm 00C if I save now we can
able to see
the icon difference here now we'll add the styles to that icon to so again with the help
of progress bar Li I will add the before off I will set the width of 50px I will set the
height of 50px again and then I will set the line height to 50px will set display block to
set in the center of the screen display block to display this and then I will set the font
size to the icons to 20px I will set the color to white we add the background color with again
light gray will set the Bor
der radius to 50% so this will show as a circle and then we'll
add margin of top zero and then bottom to Auto 10px for right and auto to left and then
we'll set the padding inner spacing of 2px if I save now we can able to see the circle here
as I said we have added as a circle to border radius to 50 if I change to 10 we can't able
to see the circle I will change these things to again 50 now we can able to see the icons here
so we'll add the class to active here so for that if it is active
we need to show the different
color right so I will add the progress bar with sub class of active again I will add the color to
blue color itself if I save nothing will happen because we need to add this sub class to the each
li so I will set class to active if I save now we can able to see the color difference here so now
again I will jump to the style.css if it is active we need to change the color this things to write
so again in the style.css I will add the styles of progress board agai
n with li of after what
this before and after here in the element for each element we have a option to add the styles
to the before and after if I go on over here to the element now we can able to see the styles
to this so if I add the styles to the after with the help of content I will set this content to
null and I will set the width of 100% I will set the height to 2px again with the background
color to light gray I will set the position to Absolute I will set left to 25px I will set
to
p to 25px we'll set the Z index to minus one if I save now we can able to see the step
design here this was added into the after if I remove here if I save it again now we
can't able to see the step row on here I will undo this if I save here now we can able
to see the step here so with the help of class before and after we are added the styles
for the before we have added as a circle for the after we are added as a line height
so here it was an extra row right so we need to disable this so
for that again what I do in
that style.css with the progress bar this was in the confirm ID so for this particular
Li of after will set the width to zero if I save now we can't able to see that only
these three Styles will applicable for first three allies and now whenever the class should
be active the color should be changed right for that again with the help of progress bar la dot
active we'll set the before color because before is the circle We'll add the background color
again dark b
lue if I save now we can able to see the active class here now we are going to
add the forms so for that again I will jump to the index.html below the progress bar
we are going to add the four forms so for that I will create a group of div with class
value of form group into four if I hit enter it will create a four div with the class value
of form group inside that I'm going to add the row with the help of embed abbreviation
and then I will add the H2 header tag and I will mention account
information and
then again one more H3 tag with Step 1 of 4 I save now we can able to see the header here
I will add the class to the each heading tags for the first one contains form title and
then second heading class contains form step I will copy this row I will add this
inside the each form group and then I will change the value of each form group for the
first form group we have already added as a account information and then second form
group contains personal information and then s
tep value of 2 of 4 and then third
form group contains social information and then step of 3 of 4 and then fourth form group
as finish and then this step contains 4 of 4 if I save now we can able to see all the form
groups here inside the form groups we are going to add the controls so again I will add one
more div with form control with the help of class if I hit enter inside that I will add the
label for username and I will mention the value of username and then we'll add the input type
as text and then id of username I it enter it will automatically create input type the ID of
username if I save now we can able to see the label as well as the input box so I will copy
this and I will paste it for two times because we are going to change this instead of username
We'll add the email and then instead of again this one we'll change these things to password and
we'll copy this one more time and we'll change this label to confirm password and then instead
of label for username w
e'll change these things to email I will change the ID to email here we
change the label again to password we'll copy and change the ID two and then confirm password we
mention as password1 and then for each input we'll change the type to email for the email for the
password and confirm password to type as password if I save now we can able to see the forms here
so the same as the second form group contains personal information for the personal information
I will paste the same form group h
ere again for four times I will change the first label as
first name and then second label as last name and then third label as contact number and then
fourth label as date of birth and same as ID and label for we need to change I will change this
type to first name I will copy and paste the id here and we'll change the type to text the
second label as last name I'll copy and change the idea and we'll change the type to text next
and then third control as contact number we'll mention this i
nput type as number and then fourth
one as DOB and we'll mention the type as date if I save now we can able to see the date and
then number here for the third form group again I will paste the form control here with four
times again first form control has LinkedIn and I will change the label to LinkedIn and
then we'll add the type to URL so the same as the second form control as Facebook I
will change the for and ID to here again with the type of URL and then third form
group contains Twit
ter and then label as X and then same type as URL and then fourth one
as YouTube and then again type should be URL if I save now we can able to see the forms
here, here along with the form control we are going to add the button control to because
each of the forms we have a buttons to right so in the next to the form control of account
information I will add the button here with class value of next and I will mention the
text as to next if I save now we can able to see the next button here
the same thing we
need to add for the next form too for the next form we need to show the two buttons one
is previous and one is next so for that I will create one more class with the class
value of button control inside that I will paste that next and then I will change the
value two previous and then class two prev I will copy this again I will paste it
in the end of social information to if I save now we can able to see the buttons
here and then in the social information the first Butto
n as previous and then second
Button as submit because after this form three we are going to submit the form so after
submitting the form in the Finish What content we are going to show so for that again in
the form submission of success I will add the header value of H2 inside that I will
add the strong element to show the text as bold the value of success and then one more h2
tag here I will mention thanks for sign up and then right below we are going to add the icon
with the class of fo
nt awesome fa check Circle zero and then I will add the paragraph tag with
the help of P will say we will connect you soon if I save now we can able to see all the four
forms here the first form contains username, email, password and confirm the second form as
first name, last name, contact and date of birth third form as LinkedIn, Facebook URL and Twitter
and then fourth form as finished with that success message along with this form we have the separate
buttons to now we'll style this so
for that I will jump to the style.css so in the style.css I'm
going to add the styles to the all the form groups right so I will use this form group as
a main class Style I will set display to none if I save we can't able to see all the form
groups here now again with the help of form group We'll add the class of sub class called
form active and then we'll set display block this will help us to show only that particular
form so I will copy this class and I will add the sub class here to the
first form if I
save now we can able to see only the first form here so this will help us to style easily
to better understanding so and then inside that form group we have a row to style this within
a line so again with the help of dot row we'll set the display Flex We are going to add
this content into the center of the div so I will add the Align item Center we'll set
the justify content to space between We'll add the padding bottom of outer spacing to 10px
if I save now we can able to
see the account information and the step it is in the single
liner and then I will add add the color to this header tag to show the differentiate of
the account information and then step so for that I will add again row with H2 We'll add
the color to blue color and then we'll set the font weight to normal if I save now we can
able to see the font weight as normal and then color should be blue color now we are going to
add the colors to the steps so again with the help of row H3 We'll add t
he color to gray again
in font weight should be normal if I save now we can able to see the differentiate of each one
so I will remove this display none to block if I save now we can able to see all the
information of accounts should be center of the do and we can able to see the differentiate
of the colors again I will change to display none and then now we'll add the styles to the form
control then form control I will set the position to relative will add the margin outer spacing
of top
and bottom 1rem and right and left to 0 if I save now we can able to see the space
between here and then now we are going to add the styles to the label as well as the
input again with the help of form control with label I will set the font size to 13px
we set the position to Absolute because we are going to set this label on top of the
input I will set the height of 19px will set the padding inner spacing 4px and 7px
we'll add the top of -14px we'll set the left to 10px we'll add the color
to light gray
color We'll add the background color to white if I save now we can able to see the label
on top of the input box with the color of light gray and now I will add label Style again
we'll set the display block here and then we'll set the margin bottom to 0.5rem if I save now we
can able to see the margin space here now we are going to add the styles to the input to all
the forms so I have added the styles to the input directly to the element selector I will
add the input of dis
play block and then with of 100% then I will add the padding to 0.75rem
we set the border to 1px solid light gay color and then again I will add the Border radius to
0.25rem I will add the I to 50px if I save now we can able to see the input box as well as
the label here now we'll style the button we are going to add the styles to all buttons so
I will directly set the button selector name called button wherever we have used as a button
this style should be applicable again with the padding
of 0.75rem we'll set display block
again text decoration To None we'll add the background color to blue color again we'll
add the text color to light gray color and then we'll set the text align to Center We'll
add the Border radius to 0.25rem we'll set the cursor to pointer We'll add the transition to
this button 0.3 second we'll remove the border with the help of Border none we'll remove the
outline with the help of outline none we'll add the margin left to Auto we'll set the width
of 5
0% and then we'll set the font size to 15px if i save now we can able to see the button into
the margin left to Auto and now whenever we have over or we click we need to add the Box Shadow to
it so again with the help of button with over I will set the Box Shadow to 0 0 and 0 2px with
white color and then again 0 0 and 0 3px with color of blue if I save if I go on over now we can
able to see the border color shows with animation effect with the help of transition so now again
if I change th
is display none to block now we can able to see all the forms here the button is
collapsed right so for that we are going to add the styles to this particular button control
here we have the button control with the div I will add the class to this button control
I will set the display flex here this will set this content into the center of the screen
and then I will add the gap of 10% each so if I save now we can able to see the buttons here and
then here something is missed for the social
the class value as button control I save now we can
able to see all the Styles uniformly now I will go here and again I will change these things
to display none if I save now we can able to see only a single form whenever we click this
we need to navigate to the next form and in the next form we have a previous button whenever
we click that we should be navigate to the previous form right this operation we are going
to do with the help of JavaScript so for that I will jump to the script.js
here we'll add the
Declarations with the help of const first We'll add the Declaration to the progress bar again
I will jump to the index.html I will copy this progress bar value here we are going to add the
Declaration with the help of document document is the owner of all your web page with the help
of document with query selector all because we are going to get all the Lis inside the progress
bar with the help of progress bar dot with li if I go and do the console.log here for Progress
bar if I save if I go on insert element here the console tab we can able to see all the four
node list so this is the first one, second one, third one and fourth one because we are
directly getting all the query selector with the help of Li this is how the Dom tree will
work and then we'll add the another declaration with the help of same const will assign form
group here again with the document dot query selector all I will set this dot form group
and if I copy and I will paste it here aga
in if I save now we can able to see all the four
form groups here and then next declaration we are going to add for the buttons here we have
added the buttons value with the help of class I will add the Declaration name called Next form
with the document dot query selector because we are going to select only that particular button
right so we need to use query selector if that is a group of element we need to use query
selector all for the previous button again I will use this preview form
equal to document
dot query selector again with the help of dot preview now we need to add the for each to find
where the button is so for that I will add the form group dot for each to find all the buttons
for each we are going to find the button I will add the parameter as button inside the function
selection I will add the console.log with button if I save foreach is not an function why because
we have added only four query selector as I said if we need to find all the elements we need
to use Query selector all if I save now we can get all the buttons see now we have a buttons
with next only three if I copy this if I paste it here instead of next if I check these things
to previous if I save we have only two previous button now we can get all the buttons with the
help of class so now why we have find this button now we are going to to add the event listener to
each buttons so with the help of button. add event listener we'll mention this as click We'll add
the alert to 1
for the next if I save if I click next here now we can able to get the alert now
the button event is working here if I click if I next again now we can able to see that the same
thing we need to add to the previous form to so now whenever we click this we need to navigate
this things to the next form right so for that will create one more function with the help of
function keyword with the value of move next form function is a group of scope which should
work inside the function so here ins
ide the move next form we need to get all the forms right
so again we have a declaration of form group here with the form group dot for each now we
are going to find the form here again with the help of console.log we'll find the form if
I save if I go to the inspect element again if I click next now we are getting only the alert
the function is not firing because whenever we create the function we need to invoke this I will
go here and I will invoke this function with the help of function
bracket if I save now if I go on
hit next now we can get all the forms here now we need to remove the form active from the first form
and we need to set the form active to the second form so how we can calculate this if it is first
or second form so for that I will add one more Global variable with the help of let declaration
I will set form steps count initially I will set this for zero and here if it is next button I
will add ++ if it is a previous button I will set these things to -- whe
never we click this
it will add 0 to 1 and 1 to 2 1 to 3 based on the click if you are going to click the previous
button 3 to 2 2 to 1 and 1 to 0 so with the help of this let declaration we can find the form and
we can able to set the active and inactive for that we need to find the form first right so we
are already having the form group with the help of form group we have a array of value I will
set the form step count here in console.log if I save if I it now we can able to see
the sec
ond form here the second form is a contains of personal information if I click
again now we can get the form row of social information this is how we are going to
add the class to the particular forms so before that we need to remove the class on the
current form right so for that I will add the form dot class list dot contains we are going
to remove the form active right so we need to check if the form active is present on the
form we can use this && so this will execute on the second line
and we can set the class
list dot remove and then value of form active if I save if I click next now we can't able to
see the first form because we have removed the class from the forms now we need to add the form
active class to the next form right so again as I mention with the help of form group I will add
the array value of form step count we can simply add the class directly to the form with the help
of class list add we'll set the form active here if I save if I click next now we can
able to
see the personal information if I click next we can able to see the social information if I hit
submit now we can able to see the finish here if I refresh again if I click next it is going to
the next if I click previous how cool is this right we can able to see next and previous as
well as the previous and next now whenever we click next we need to show this active and I of
the steps two right so for that we'll create one more function with the function keyword with the
value of
update progress bar inside that already we have added the Declaration of progress bar
again with the help of for each we'll get the Li and index of each Li's all right and then
inside that if I do a console. log of Li I will copy this function and I will call this function
inside the move next function so again I will go to the insert element if I go to the console tab
if I hit next now we can able to see all the Li's here so based on this we need to set this active
to this particular Li sa
me thing what we have done for the move next to so here l do class list
dot add directly will set the class to active if I save if I hit next now we can able to
see all the form step is active now we are in the second personal information right this
should active only account and then personal this other two things should be grade out right
we need to fix this so only we have added the index of we'll check with the help of I less
than form step count we set plus one because we are going to
add this as ++ right whenever we
happen this then only we need to set this class to active if I click next see now only this is
setting active and other two is disabled if I go to next if I submit now we can able to see
if I click next if I go to previous still it was active we need to disable this to right
so here in the else part We'll add the same line of code here instead of add we'll set to
remove if I save if I click next and next if I click preview now we can able to see the step
fo
r is there right how simple is this and now whenever we click this we need to add the colors
to the step route two right because then only we can know this is going from account to personal
and personal to social here inside the function of update progress bar We'll add one more progress
bar dot for each with the same parameter of Li and then I with the function bracket off now we are
going to set only the step count without plus one because we are not going to add Plus one to the
next next
steps right we need to add only for the next step if it is two and then we are going to
add this two for one if it is confusing right I will explain you clearly I less than equal to step
count I will add Li dot class list do add to we'll set the new class name called Next and then in
else part we'll remove the same class here again if I save nothing will happen I will go here in
the style.css we have added the styles to that active the same thing we need to add to the next
so I will copy t
his I will add the comma and I will set these things to next if I save if I go
on it next still we can't able to see the color here so I will go here and I will check if the
class is added here or not so here it was added why because we have added this Li this particular
root as in the after right not in the before so I will change these things to after if I save now we
can able to see the color here if I refresh here now we are in the account if I hit next now we can
able to see the colors
for account and personal as well as the root two if I go to next we can able
to see the social if I submit now all the forms has filled with the root color to what this script
contains here we are in the first step of zero we are going to add the class to this personal if
it is 1 + 1 to two if we hit next we are going to set the colors to the personal here the here
the case is different because we are added the first Li and we are going to set the root of
first Li only if you have set this
plus one it will be set to here so I will add this
example here if I save if I click next see now as I said now it is going to the second to
this should not happen because we are in the personal information once we have filled
this after clicking this then only this should be complete right so only here I have
not added plus one if I save it again go and click next now we can able to see this now
the pending thing is animation whenever we click next the form should have a animation so
for
for that again I will jump to the style.css in the form group I will add the key frames
with the name of animate I will set the from transform scale to 1 to 0 and then I will set to
two again the transform scale to one and one with the opacity of one if I save nothing will happen
because we have created this animate we need to initialize this animate into the form group so
I will copy this with the help of property name called animation and I will assign the animation
value to this of the
key frame if I save if I click next nothing will happen because we need
to add the duration of 1 second if I save now we can able to see the animation effect scale
from 1 to zero and 1 to 1 with the opacity of one and then if I click next if I click next now
we need to style this finish tool so in the end of list we are going to add the styles to the
finish so for this this a finish special form I will add the sub class to success I will copy
this class name I will jump to the style.css her
e I will set all the content inside this into
the center of the form right and then I will add the colors to blue color if I save I will jump I
will jump jump and submit now we can able to see all the content into the center of the screen
and now I will add the styles to the checkbox here so for that I will copy this class name and
I will set the font size to this 155px this will not set because it was taken the default font
size we need to set this as important now we can able to see the i
con here so if I refresh
now we are in the account we can able to type all the information if I click next we'll
get the cool animation with first name, last name contact and with date of birth with
date object if I click next we get the social information if I click submit now it will shows
the form as submit made and thanks for the sign up and all the steps has completed if I refresh
all the steps has disabled except the current form next and next and next and it will be finished
finally
we have completed this multi-step user registration form using HTML CSS and JavaScript
I hope this video will be helpful for you please like and share this video and also subscribe to
my channel Sharathchandar K to watch more like this one if you are interested in JavaScript
projects like this I have created and added a playlist Link in the description please do check
it out now I want to hear from you if you have any questions or what JavaScript topics do
you want us to cover in future vi
deos drop your suggestions in the comments below thank
you so much for watching until next time keep coding and keep learning see you in the next
video Happy coding bye for now have a nice day
Comments
❤
From ph here love this content <3
simply superb,Great Explanation please make more videos Brother, and also please make videos of creating responsive webpages using html,css,js it will help us a lot❤Thank you so much sharing your knowledge.