Multi Step Registration Form with
HTML CSS and JavaScript
A Multi-Step Structure is a long-structure that has broken into numerous pieces. This sort of structure requested that you enter your subtleties bit by bit prior to presenting your structure. Some Multi-Step Structure has Step Progress Bar on the highest point of Structure or on some site it's put on the base. For the most part, This progress bar demonstrates or illuminates a client the number of steps they that have finished and the number of steps that are remaining.
As you have seen, this sort of Multi-Step Structures in numerous sites. Some of them are made utilizing Bootstrap. However, today in this blog, I'll impart to you this program (Multi-Step Structure with Step Progress) which depends on HTML CSS and JavaScript. I utilized no JavaScript library to make this structure.
This structure is long-structure and it has broken into four stages. In each step, there are questions which client needs to enter. Furthermore, I've likewise added a stage progress bar on the highest point of the Structure which shows steps. There are two buttons (Next and Past) on each step. At the point when you click on the following button it'll divert you to the subsequent stage and when you click on the past button it'll divert you to the past step.
Video Tutorial of Multi Step Registration Form in HTML CSS and JavaScript
Multi Step Registration Form in HTML CSS and JavaScript [Source Codes]
To Create Multi Step Registration Form in HTML CSS and JavaScript with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source code by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>Multy Step Form</title>
- <link rel="stylesheet" href="style.css">
- <script src="https://kit.fontawesome.com/a076d05399.js"></script>
- </head>
- <body>
- <div class="container">
- <header>Registration Form</header>
- <div class="progress-bar">
- <div class="step">
- <p>Name</p>
- <div class="bullet">
- <span>1</span>
- </div>
- <div class="check fas fa-check"></div>
- </div>
- <div class="step">
- <p>Contact</p>
- <div class="bullet">
- <span>2</span>
- </div>
- <div class="check fas fa-check"></div>
- </div>
- <div class="step">
- <p>Birth</p>
- <div class="bullet">
- <span>3</span>
- </div>
- <div class="check fas fa-check"></div>
- </div>
- <div class="step">
- <p>Submit</p>
- <div class="bullet">
- <span>4</span>
- </div>
- <div class="check fas fa-check"></div>
- </div>
- </div>
- <div class="form-outer">
- <form action="#">
- <div class="page slide-page">
- <div class="title">Basic Info:</div>
- <div class="field">
- <div class="label">First Name</div>
- <input type="text">
- </div>
- <div class="field">
- <div class="label">Last Name</div>
- <input type="text">
- </div>
- <div class="field">
- <button class="firstNext next">Next</button>
- </div>
- </div>
- <div class="page">
- <div class="title">Contact Info:</div>
- <div class="field">
- <div class="label">Email Address</div>
- <input type="text">
- </div>
- <div class="field">
- <div class="label">Phone Number</div>
- <input type="Number">
- </div>
- <div class="field btns">
- <button class="prev-1 prev">Previous</button>
- <button class="next-1 next">Next</button>
- </div>
- </div>
- <div class="page">
- <div class="title">Date of Birth:</div>
- <div class="field">
- <div class="label">Date</div>
- <input type="text">
- </div>
- <div class="field">
- <div class="label">Gender</div>
- <select>
- <option>Male</option>
- <option>Female</option>
- <option>Other</option>
- </select>
- </div>
- <div class="field btns">
- <button class="prev-2 prev">Previous</button>
- <button class="next-2 next">Next</button>
- </div>
- </div>
- <div class="page">
- <div class="title">Login Details:</div>
- <div class="field">
- <div class="label">Username</div>
- <input type="text">
- </div>
- <div class="field">
- <div class="label">Password</div>
- <input type="password">
- </div>
- <div class="field btns">
- <button class="prev-3 prev">Previous</button>
- <button class="submit">Submit</button>
- </div>
- </div>
- </form>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- outline: none;
- font-family: "Open Sans", sans-serif;
- }
- body{
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- overflow: hidden;
- background:#282A35;
- }
- ::selection{
- color: #fff;
- background: #2192EE;
- }
- .container{
- width: 600px;
- background: #f2f2f2;
- text-align: center;
- border-radius: 5px;
- padding: 50px 35px 10px 35px;
- }
- .container header{
- font-size: 35px;
- font-weight: 600;
- margin: 0 0 30px 0;
- }
- .container .form-outer{
- width: 100%;
- overflow: hidden;
- }
- .container .form-outer form{
- display: flex;
- margin-left: 110px;
- width: 400%;
- }
- .form-outer form .page{
- width: 25%;
- transition: margin-left 0.3s ease-in-out;
- }
- .form-outer form .page .title{
- text-align: left;
- font-size: 25px;
- font-weight: 500;
- }
- .form-outer form .page .field{
- width: 400px;
- height: 50px;
- margin: 40px 0;
- display: flex;
- position: relative;
- }
- form .page .field .label{
- position: absolute;
- top: -30px;
- font-weight: 500;
- }
- form .page .field input{
- height: 100%;
- width: 100%;
- border: 1px solid lightgrey;
- border-radius: 5px;
- padding-left: 15px;
- font-size: 18px;
- }
- form .page .field select{
- width: 100%;
- padding-left: 10px;
- font-size: 17px;
- font-weight: 500;
- }
- form .page .field button{
- width: 100%;
- height: calc(100% + 5px);
- border: none;
- background: #2192EE;
- margin-top: -20px;
- border-radius: 5px;
- color: #fff;
- cursor: pointer;
- font-size: 18px;
- font-weight: 500;
- letter-spacing: 1px;
- text-transform: uppercase;
- transition: 0.5s ease;
- }
- form .page .field button:hover{
- background: #785BF8;
- }
- form .page .btns button{
- margin-top: -20px!important;
- }
- form .page .btns button.prev{
- margin-right: 3px;
- font-size: 17px;
- }
- form .page .btns button.next{
- margin-left: 3px;
- }
- .container .progress-bar{
- display: flex;
- margin: 40px 0;
- user-select: none;
- }
- .container .progress-bar .step{
- text-align: center;
- width: 100%;
- position: relative;
- }
- .container .progress-bar .step p{
- font-weight: 500;
- font-size: 18px;
- color: #000;
- margin-bottom: 8px;
- }
- .progress-bar .step .bullet{
- height: 25px;
- width: 25px;
- border: 2px solid #000;
- display: inline-block;
- border-radius: 50%;
- position: relative;
- transition: 0.2s;
- font-weight: 500;
- font-size: 17px;
- line-height: 25px;
- }
- .progress-bar .step .bullet.active{
- border-color: limegreen;
- background: #785BF8;
- }
- .progress-bar .step .bullet span{
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
- .progress-bar .step .bullet.active span{
- display: none;
- }
- .progress-bar .step .bullet:before,
- .progress-bar .step .bullet:after{
- position: absolute;
- content: '';
- bottom: 11px;
- right: -110px;
- height: 3px;
- width: 99px;
- background: #262626;
- }
- .progress-bar .step .bullet.active:after{
- background: #785BF8;
- transform: scaleX(0);
- transform-origin: left;
- animation: animate 0.3s linear forwards;
- }
- @keyframes animate {
- 100%{
- transform: scaleX(1);
- }
- }
- .progress-bar .step:last-child .bullet:before,
- .progress-bar .step:last-child .bullet:after{
- display: none;
- }
- .progress-bar .step p.active{
- color: #785BF8;
- transition: 0.2s linear;
- }
- .progress-bar .step .check{
- position: absolute;
- left: 50%;
- top: 70%;
- font-size: 15px;
- transform: translate(-50%, -50%);
- display: none;
- }
- .progress-bar .step .check.active{
- display: block;
- color: #fff;
- }
-
Now paste the following codes into your script.js file
- const slidePage = document.querySelector(".slide-page");
- const nextBtnFirst = document.querySelector(".firstNext");
- const prevBtnSec = document.querySelector(".prev-1");
- const nextBtnSec = document.querySelector(".next-1");
- const prevBtnThird = document.querySelector(".prev-2");
- const nextBtnThird = document.querySelector(".next-2");
- const prevBtnFourth = document.querySelector(".prev-3");
- const submitBtn = document.querySelector(".submit");
- const progressText = document.querySelectorAll(".step p");
- const progressCheck = document.querySelectorAll(".step .check");
- const bullet = document.querySelectorAll(".step .bullet");
- let current = 1;
-
- nextBtnFirst.addEventListener("click", function(event){
- event.preventDefault();
- slidePage.style.marginLeft = "-25%";
- bullet[current - 1].classList.add("active");
- progressCheck[current - 1].classList.add("active");
- progressText[current - 1].classList.add("active");
- current += 1;
- });
- nextBtnSec.addEventListener("click", function(event){
- event.preventDefault();
- slidePage.style.marginLeft = "-50%";
- bullet[current - 1].classList.add("active");
- progressCheck[current - 1].classList.add("active");
- progressText[current - 1].classList.add("active");
- current += 1;
- });
- nextBtnThird.addEventListener("click", function(event){
- event.preventDefault();
- slidePage.style.marginLeft = "-75%";
- bullet[current - 1].classList.add("active");
- progressCheck[current - 1].classList.add("active");
- progressText[current - 1].classList.add("active");
- current += 1;
- });
- submitBtn.addEventListener("click", function(){
- bullet[current - 1].classList.add("active");
- progressCheck[current - 1].classList.add("active");
- progressText[current - 1].classList.add("active");
- current += 1;
- setTimeout(function(){
- alert("Your Form Successfully Signed up");
- location.reload();
- },800);
- });
-
- prevBtnSec.addEventListener("click", function(event){
- event.preventDefault();
- slidePage.style.marginLeft = "0%";
- bullet[current - 2].classList.remove("active");
- progressCheck[current - 2].classList.remove("active");
- progressText[current - 2].classList.remove("active");
- current -= 1;
- });
- prevBtnThird.addEventListener("click", function(event){
- event.preventDefault();
- slidePage.style.marginLeft = "-25%";
- bullet[current - 2].classList.remove("active");
- progressCheck[current - 2].classList.remove("active");
- progressText[current - 2].classList.remove("active");
- current -= 1;
- });
- prevBtnFourth.addEventListener("click", function(event){
- event.preventDefault();
- slidePage.style.marginLeft = "-50%";
- bullet[current - 2].classList.remove("active");
- progressCheck[current - 2].classList.remove("active");
- progressText[current - 2].classList.remove("active");
- current -= 1;
- });
-
If you face any difficulties while creating Multi Step Registration Form in HTML CSS and JavaScript or your code is not working as expected, you can download the source code files by clicking download button.