Multi-Step Form with Progress Bar in HTML, CSS, and JavaScript
ultimate-bundle-horizontal-99

Creating user-friendly forms is crucial for improving user experience on your website. A multi-step form not only makes long forms more manageable but also guides users through the process in a logical sequence. In this tutorial, we’ll walk through how to build a multi-step form with a progress bar using HTML, CSS, and JavaScript, but no external libraries are required.

Why Use a Multi-Step Form?

Multi-step forms break down a long form into smaller, digestible chunks. This prevents users from feeling overwhelmed and increases the chances of form completion. The addition of a progress bar provides real-time feedback on the user’s progress, enhancing their experience and encouraging them to continue.

Step 1: The HTML Structure

We start by creating a simple form with multiple sections (steps). Here’s the HTML layout:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="progress-bar">
          <div class="step active">1</div>
          <div class="step">2</div>
          <div class="step">3</div>
        </div>
      
        <form id="multiStepForm">
          <div class="form-step active">
            <h2>Step 1</h2>
            <input type="text" placeholder="Your Name" required>
            <button type="button" class="next-btn">Next</button>
          </div>
      
          <div class="form-step">
            <h2>Step 2</h2>
            <input type="text" placeholder="Your Address" required>
            <button type="button" class="prev-btn">Previous</button>
            <button type="button" class="next-btn">Next</button>
          </div>
      
          <div class="form-step">
            <h2>Step 3</h2>
            <input type="email" placeholder="Your Email" required>
            <button type="button" class="prev-btn">Previous</button>
            <button type="submit">Submit</button>
          </div>
        </form>
      </div>
      
<script src="script.js"></script>

</body>
</html>

In the above HTML:

  • We have a container that holds the progress bar and the form steps.
  • Each form step is contained within a div with the class form-step.
  • We’ve added navigation buttons (Next and Previous) to allow users to move between steps.

Step 2: The CSS Styling

Now, let’s style the form and the progress bar to make it visually appealing and functional.

body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  padding: 50px;
}

.container {
  width: 100%;
  max-width: 500px;
  background: white;
  padding: 30px;
  border-radius: 10px;
}

.progress-bar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}

.step {
  width: 30px;
  height: 30px;
  background: #ddd;
  border-radius: 50%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
}

.step.active {
  background: #4caf50;
  color: white;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
}

input {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
}

button {
  padding: 10px 20px;
  margin: 5px;
  border: none;
  background-color: #4caf50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

CSS Explanation:

  • The progress bar is displayed at the top, with each step represented by a circular element.
  • Only the active step (form section) is displayed at a time, which is controlled by the .active class.
  • The navigation buttons (Next and Previous) are styled to match the form’s color scheme.

Step 3: Adding JavaScript for Navigation

Now, let’s add interactivity using JavaScript. We need to handle navigation between steps and update the progress bar.

const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".step");
const nextBtns = document.querySelectorAll(".next-btn");
const prevBtns = document.querySelectorAll(".prev-btn");

let currentStep = 0;

nextBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    if (currentStep < formSteps.length - 1) {
      formSteps[currentStep].classList.remove("active");
      progressSteps[currentStep].classList.remove("active");
      currentStep++;
      formSteps[currentStep].classList.add("active");
      progressSteps[currentStep].classList.add("active");
    }
  });
});

prevBtns.forEach(btn => {
  btn.addEventListener("click", () => {
    if (currentStep > 0) {
      formSteps[currentStep].classList.remove("active");
      progressSteps[currentStep].classList.remove("active");
      currentStep--;
      formSteps[currentStep].classList.add("active");
      progressSteps[currentStep].classList.add("active");
    }
  });
});

JavaScript Explanation:

  • We store references to the form steps and progress steps.
  • nextBtns and prevBtns handle the navigation between steps.
  • When the user clicks the Next button, the form advances to the next step, and the progress bar updates accordingly. Similarly, clicking Previous moves the user backward.

Final Thoughts

You’ve just built a multi-step form with a progress bar using HTML, CSS, and JavaScript. This is a great way to improve the user experience by breaking long forms into smaller steps. Additionally, the progress bar visually tracks the user’s progress.

Popular Downloads