✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Multistep Form With Progress Bar Using jQuery And CSS

Last Updated : Jul 1, 2023

IN - jQuery CSS HTML | Written & Updated By - Dikshita

In this tutorial we will create Multistep Signup form with progress bar using jquery and css. You may also like File Upload Progress Bar Using jQuery And PHP

Multistep Form With Progress Bar Using jQuery And CSS

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Multistep Form With Progress Bar it takes only three steps:-

  1. Make a HTML file and define markup for form
  2. Make a Js file and define script for form
  3. Make a CSS file and define styling for form

Step 1. Make a HTML file and define markup for form

We make a HTML file and save it with a name multi_form.html 

<html>
<head>
<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="multi_form.js">
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body>
<div id="wrapper">
  <br>
  <span class='baricon'>1</span>
  <span id="bar1" class='progress_bar'></span>
  <span class='baricon'>2</span>
  <span id="bar2" class='progress_bar'></span>
  <span class='baricon'>3</span>

  <form method="post" action="">
  <div id="account_details">
    <p class='form_head'>Account Details</p>
    <p>Email Address</p>
    <input type="text" placeholder='Email Address'>
    <p>Password</p>
    <input type="text" placeholder='Password'>
    <br>
    <input type="button" value="Next" onclick="show_next('account_details','user_details','bar1');">
  </div>

  <div id="user_details">
    <p class='form_head'>User Details</p>
    <p>First Name</p>
    <input type="text" placeholder='First Name'>
    <p>Last Name</p>
    <input type="text" placeholder='Last Name'>
    <p>Gender</p>
    <input type="text" placeholder='Gender'>
    <br>
    <input type="button" value="Previous" onclick="show_prev('account_details','bar1');">
    <input type="button" value="Next" onclick="show_next('user_details','qualification','bar2');">
  </div>
		
  <div id="qualification">
    <p class='form_head'>Qualification</p>
    <p>Qualification</p>
    <input type="text" placeholder='Qualification'>
    <p>Hobbies</p>
    <input type="text" placeholder='Hobbies'>
    <br>
    <input type="button" value="Previous" onclick="show_prev('user_details','bar2');">
    <input type="Submit" value="Submit">
  </div>
  </form>
  
</div>

In this step we attach our js and css file which we were going to made in next steps.We create 3 div under one form and 2 progress indicator to display form present completion.

You may also like create dynamic form using PHP and jQuery.

Step 2. Make a Js file and define script for form

We make a Js file and save it with a name multi_form.js 

function show_next(id,nextid,bar)
{
  var ele=document.getElementById(id).getElementsByTagName("input");
  var error=0;
  for(var i=0;i<ele.length;i++)
  {
    if(ele[i].type=="text" && ele[i].value=="")
  {
    error++;
  }
  }
	
  if(error==0)
  {
    document.getElementById("account_details").style.display="none";
    document.getElementById("user_details").style.display="none";
    document.getElementById("qualification").style.display="none";
    $("#"+nextid).fadeIn();
    document.getElementById(bar).style.backgroundColor="#38610B";
  }
  else
  {
    alert("Fill All The details");
  }
}

function show_prev(previd,bar)
{
  document.getElementById("account_details").style.display="none";
  document.getElementById("user_details").style.display="none";
  document.getElementById("qualification").style.display="none";
  $("#"+previd).fadeIn();
  document.getElementById(bar).style.backgroundColor="#D8D8D8";
}

In this step we made two function one is to display the next content and another is to display the previous content.

In first function we get three parameters to do all the process, 'id' is the current id of a div,'nextid' is the id of next div to display and bar is the progress bar id to show the current progress it also check that all the fields are filled or not if the fields empty it show error.

In second function we get two parameters 'previd' is the previous div id and 'bar' is the progress bar id.

We use jQuery fade() animation you can use any kind of animation.You may also like Form Validation Using jQuery

Step 3. Make a CSS file and define styling for form

We make a CSS file and save it with a name form.css 

body
{
  margin:0 auto;
  padding:0;
  text-align:center;
  background-color:#D8D8D8;
}
#wrapper
{
  width:995px;
  padding:0px;
  margin:0px auto;
  font-family:helvetica;
  position:relative;
}
#wrapper .baricon
{
  display:inline-block;
  border-radius:100%;
  padding:12px;
  background-color:#38610B;
  color:white;
}
#wrapper .progress_bar
{
  width:200px;
  height:5px;
  border-radius:20px;
  background-color:#D8D8D8;
  display:inline-block;
}
#wrapper form div
{
  margin-left:340px;
  padding:10px;
  box-sizing:border-box;
  width:300px;
  margin-top:50px;
  background-color:#585858;
}
#wrapper form div p
{
  color:#F2F2F2;
  margin:0px;
  margin-top:10px;
  font-weight:bold;
}
#wrapper form div .form_head
{
  font-size:22px;
  font-weight:bold;
  margin-bottom:30px;
}
#wrapper form div input[type="text"]
{
  width:200px;
  height:40px;
  padding:5px;
  border-radius:5px;
  border:none;
  margin-top:10px;
}
#wrapper form div input[type="button"],input[type="submit"]
{
  width:80px;
  height:40px;
  border-radius:5px;
  border:2px solid white;
  background:none;
  color:white;
  margin:5px;
  margin-top:10px;
}
#user_details,#qualification
{
  display:none;
}

Thats all, this is how to Create Multistep Form With Progress Bar Using jQuery And CSS. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on Multi step Form Progress Bar using jquery and css helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →