Multi-Step Form With Progress Bar Using HTML, CSS, & JavaScript

By
Asif Ali
-
0

hey everyone hope you are all fine, today we are going to learn how to create a Multi-Step Form With Progress Bar Using HTML CSS & JavaScript. It’s a great project, there are many large websites using multiple forms to collect multiple data.

So, Inside the Project, I’m going to use pure HTML CSS and JavaScript languages to create it from scratch. Inside that have three forms each form has a different data.

When the user clicks the next button we need to display the second form and so on. These features that we need to add to the project.

Multi-Step Form With Progress Bar

Creating a multi-step form with a progress bar can enhance the user experience when collecting information from users. This tutorial will guide you through the process of building a multi-step form with a progress bar using HTML, CSS, and JavaScript. We’ll break it down into several steps to make it easy to follow.

Multi-Step Form With Progress Bar Using HTML, CSS, & JavaScript

I made the video on how to create a multi-step form with a progress bar using HTML CSS & JavaScript. I explained everything as you want, After watching the complete tutorial I hope you’ve learned something from this tutorial. I hope this is helpful and beneficial for you.

Hope you’ve watched the complete tutorial and learned something new from the tutorial. let’s take a look at the source code of the project below.

You May Also Like:

Set Up the HTML Structure
Start by creating the basic HTML structure for your form. You’ll need a container for the form elements and a progress bar to indicate the user’s progress.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <script defer src="js/script.js"></script>
    <title>Multi Step Form | OnlineITtuts</title>
  </head>
  <body>
    <div class="container">
      <form id="form1">
        <h3>Registration Form</h3>
        <input type="email" placeholder="Email" />
        <input type="password" placeholder="Password" />
        <input type="password" placeholder="Confirm Password" />

        <div class="btn_box">
          <button id="next1" type="button">Next</button>
        </div>
      </form>
      <form id="form2">
        <h3>Personal Info</h3>
        <input type="text" placeholder="First Name" />
        <input type="text" placeholder="Last Name" />
        <input type="text" placeholder="Phone Number" />

        <div class="btn_box">
          <button id="back1" type="button">Back</button>
          <button id="next2" type="button">Next</button>
        </div>
      </form>
      <form id="form3">
        <h3>Social Links</h3>
        <input type="text" placeholder="Facebook" />
        <input type="text" placeholder="Twitter" />
        <input type="text" placeholder="Github" />

        <div class="btn_box">
          <button id="back2" type="button">Back</button>
          <button id="Submit" type="button">Submit</button>
        </div>
      </form>

      <div class="progress_container">
        <div class="progress" id="progress"></div>
        <div class="circle active">1</div>
        <div class="circle">2</div>
        <div class="circle">3</div>
      </div>
    </div>
  </body>
</html>

Style Your Form with CSS
Use CSS to style your form and create a visually appealing progress bar. You can customize the look and feel of your form to match your website’s design.


body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: "poppins", sans-serif;
  background: radial-gradient(
    circle,
    rgba(61, 99, 218, 1) 0%,
    rgba(214, 84, 207, 1) 0%,
    rgba(151, 156, 203, 1) 100%
  );
}

.container {
  width: 400px;
  height: 450px;
  margin: 2rem auto;
  background-color: var(--white-color);
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  position: relative;
}

h3 {
  text-align: center;
  margin-bottom: 1rem;
  color: var(--dark-color);
  font-size: 2rem;
}

.container form {
  width: 340px;
  position: absolute;
  top: 100px;
  left: 20px;
  font-family: inherit;
  transition: 0.5s ease-in;
}

form input {
  width: 100%;
  padding: 10px 5px;
  margin: 5px 0;
  border: 1px solid var(--light-gray-color);
  border-radius: 5px;
  background: transparent;
  font-family: inherit;
}

form input:focus {
  outline: none;
  border: 1px solid var(--dark-color);
}

.btn_box {
  width: 100%;
  margin: 30px auto;
  text-align: center;
}

form button {
  width: 110px;
  height: 35px;
  margin: 0 10px;
  background-color: var(--line-border-fill);
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 0.9rem;
  font-family: inherit;
  border-radius: 5px;
  color: var(--light-gray-color);
}

form button:active {
  transform: scale(0.98);
}

#form2 {
  left: 450px;
}

#form3 {
  left: 450px;
}

.progress_container {
  width: 350px;
  display: flex;
  justify-content: space-between;
  margin: 2rem auto;
  position: relative;
}

.progress_container::before {
  content: "";
  background-color: var(--light-gray-color);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: 1;
}

.progress {
  background-color: var(--line-border-fill);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: 1;
  transition: 0.4s ease-in;
}

.circle {
  background-color: var(--light-gray-color);
  height: 30px;
  width: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 1;
  transition: 0.4s ease;
}

.circle.active {
  border-color: var(--line-border-empty);
  color: var(--white-color);
  background-color: var(--line-border-fill);
}

Implement JavaScript Logic
Write JavaScript to handle the form’s functionality. This includes moving between form steps, updating the progress bar, and validating user input.

"use strict";

const form1 = document.getElementById("form1");
const form2 = document.getElementById("form2");
const form3 = document.getElementById("form3");

const progressEl = document.getElementById("progress");
const circles = document.querySelectorAll(".circle");

let currectActive = 1;

//============== Next Form===============
function nextOne() {
  form1.style.left = "-450px";
  form2.style.left = "25px";

  //next slide
  increamentNumber();

  // update progress bar
  update();
}

//=============== Back One==================
function backOne() {
  form1.style.left = "25px";
  form2.style.left = "450px";

  // back slide
  decreametNumber();

  // update progress bar
  update();
}

//============ Second Form=============
function nextTwo() {
  form2.style.left = "-450px";
  form3.style.left = "25px";

  //next slide
  increamentNumber();

  // update progress bar
  update();
}

//=============== Back One==================
function backTwo() {
  form2.style.left = "25px";
  form3.style.left = "450px";

  // back slide
  decreametNumber();

  // update progress bar
  update();
}

//============= Progress update====================
function update() {
  circles.forEach((circle, indx) => {
    if (indx < currectActive) {
      circle.classList.add("active");
    } else {
      circle.classList.remove("active");
    }

    // get all of active classes
    const actives = document.querySelectorAll(".active");

    progressEl.style.width =
      ((actives.length - 1) / (circles.length - 1)) * 100 + "%";
  });
}

//================== Increament Number===============
function increamentNumber() {
  // next progress number
  currectActive++;
  if (currectActive > circles.length) {
    currectActive = circles.length;
  }
}

//================ Decreament Number=================
function decreametNumber() {
  currectActive--;

  if (currectActive < 1) {
    currectActive = 1;
  }
}

//================= btn Events===================
const btnsEvents = () => {
  const next1 = document.getElementById("next1");
  const next2 = document.getElementById("next2");
  const back1 = document.getElementById("back1");
  const back2 = document.getElementById("back2");

  //next1
  next1.addEventListener("click", nextOne);

  // back1
  back1.addEventListener("click", backOne);

  //next 2
  next2.addEventListener("click", nextTwo);

  // back 2
  back2.addEventListener("click", backTwo);
};

document.addEventListener("DOMContentLoaded", btnsEvents);

Create Form Validation
Implement form validation to ensure that users enter correct and complete information at each step. This helps prevent errors and incomplete submissions.

Add Event Listeners
Use event listeners to capture user interactions, such as button clicks and form submissions. This will allow you to trigger the form’s progression and validation.

Test Your Multi-Step Form
Before deploying your multi-step form, thoroughly test it to ensure it works as expected. Check for any bugs or issues and make necessary adjustments.

Deploy Your Form
Once you’re satisfied with your multi-step form, you can integrate it into your website or application. Make sure to test it in the production environment to ensure it functions correctly.

Conclusion:
Creating a multi-step form with a progress bar can improve user engagement and make data collection more efficient. By following the steps outlined in this tutorial, you can build a user-friendly form that guides users through the submission process. Remember to adapt the design and functionality to suit your specific needs and design preferences.

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.