Multi-Step Form with Progress Bar | HTML, CSS & JavaScript

Multi-Step Form (Progress Based) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #02

Project Overview

Multi-Step Form is a beginner-friendly project built using HTML, CSS, and JavaScript. Instead of displaying every form field at once, it divides the form into multiple steps. Users can move through the form using the Next and Previous buttons while a progress bar shows how far they have progressed.

This project helps beginners understand how interactive forms work in JavaScript. It uses DOM manipulation, event listeners, conditional logic, input validation, and dynamic CSS updates. Each step displays a different input field, and users must complete the current field before continuing to the next step.

Key Features

Step-by-Step Form: The form is split into separated steps instead of showing all input fields at the same time. This makes the form easier to understand and complete.
Next Button Navigation: Users can click the Next button to proceed to the next form stage by using JavaScript to change the displayed form and update the progress bar.
Previous Button Navigation: The Previous button allows users to return to an earlier step. This makes it possible to review or change information entered previously.
Input Validation: Before moving to the next step, JavaScript checks whether the current input field contains a value. If the field is empty, the application displays a message asking the user to complete it.
Dynamic Button Text: The Next button automatically changes to Submit when the user reaches the final step. This helps users understand that they have reached the end of the form.
Displayed Form Field: Only the current form is visible at any given time by toggling the active class with JavaScript.
Submission Feedback: After the user completes the final field and submits the form, the application displays a confirmation message.
Clean and Simple Interface: The form uses a minimal layout with clear labels, input fields, navigation buttons, and a progress indicator.
Easy Customization: Developers can easily add more steps, input fields, validation rules, colors, and animations to expand the functionality of the form.

Add Your Heading Text Here

Understand how to create a multi-step form using HTML.
Learn how to select multiple elements using querySelectorAll().
Practice using JavaScript variables to track the current form step.
Understand how event listeners respond to button clicks.
Learn how to show and hide content dynamically using CSS classes.
Practice validating form input before allowing users to continue.
Understand how conditional statements control form navigation.
Learn how to update a progress bar dynamically with JavaScript.
Practice changing button text based on the current application state.

HTML Code

HTML creates the basic structure of the Multi-Step Form. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the application. Content is placed inside the .form-container, which holds the form heading, progress bar, form fields, and navigation buttons.

The progress bar contains the #progress element, which JavaScript updates as the user moves through the form. The form itself contains three .step sections for the user’s full name, email address, and password. Only the first step initially contains the active class, making it visible when the application loads. Also, the Previous and Next buttons allow users to move between steps. Finally, the script.js file is loaded at the bottom of the <body> so JavaScript can access the form elements and add the required functionality.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Multi-Step Form</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="form-container">
    <h2>Multi-Step Form</h2>

    <!-- Progress Bar -->
    <div class="progress-bar">
      <div class="progress" id="progress"></div>
    </div>

    <form id="multiStepForm">

      <!-- Step 1 -->
      <div class="step active">
        <label>Full Name</label>
        <input type="text" id="name" />
      </div>

      <!-- Step 2 -->
      <div class="step">
        <label>Email</label>
        <input type="email" id="email" />
      </div>

      <!-- Step 3 -->
      <div class="step">
        <label>Password</label>
        <input type="password" id="password" />
      </div>

      <!-- Buttons -->
      <div class="buttons">
        <button type="button" id="prevBtn">Previous</button>
        <button type="button" id="nextBtn">Next</button>
      </div>

    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the appearance and layout of the Multi-Step Form. Universal selector applies box-sizing and the Arial font to the page. The body uses Flexbox to place the form in the center of the screen, .form-container class styles the main form area by adding a white background, fixed width, padding, rounded corners, and a shadow. The .progress-bar creates the background track, while the .progress element represents the completed portion of the progress bar.

Each .step is hidden by default using display: none. When JavaScript adds the active class, the .step.active selector displays the current section. The input fields receive full width, padding, borders, and spacing for a clean appearance, .buttons container uses Flexbox to position the Previous and Next buttons on opposite sides. The button styles also include a hover effect to provide visual feedback when users interact with them.

* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #042453;
}

.form-container {
  background: #fff;
  width: 360px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 10px;
  margin-bottom: 25px;
}

.progress {
  height: 100%;
  width: 0%;
  background: #4f46e5;
  border-radius: 10px;
  transition: width 0.3s ease;
}

.step {
  display: none;
}

.step.active {
  display: block;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 14px;
}

input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

#prevBtn {
  background: #042453;
  color: white;
}

#nextBtn {
  background: #042453;
  color: white;
}

button:hover {
  opacity: 0.9;
}

Javascript Code

JavaScript provides the main functionality of the Multi-Step Form. First, it selects all form steps, the Previous and Next buttons, and the progress bar. The currentStep variable keeps track of which form section is currently active. When the user clicks the Next button, the validateStep() function first checks whether the current input field is empty. If the field contains no value, the user receives a message and cannot continue. Otherwise, JavaScript increases the current step and calls updateForm().

The updateForm() function controls which step is visible by adding the active class to the current section. It also hides the Previous button on the first step, changes the Next button to Submit on the final step, and updates the width of the progress bar, Previous button decreases the current step and displays the earlier form section. After the final step is completed, the application shows a confirmation message.

const steps = document.querySelectorAll(".step");
const nextBtn = document.getElementById("nextBtn");
const prevBtn = document.getElementById("prevBtn");
const progress = document.getElementById("progress");

let currentStep = 0;

updateForm();

nextBtn.addEventListener("click", () => {
  if (!validateStep()) return;

  currentStep++;

  if (currentStep >= steps.length) {
    alert("Form submitted successfully ✅");
    currentStep = steps.length - 1;
  }

  updateForm();
});

prevBtn.addEventListener("click", () => {
  currentStep--;
  updateForm();
});

function updateForm() {
  steps.forEach((step, index) => {
    step.classList.toggle("active", index === currentStep);
  });

  prevBtn.style.display = currentStep === 0 ? "none" : "inline-block";

  nextBtn.innerText =
    currentStep === steps.length - 1 ? "Submit" : "Next";

  progress.style.width =
    ((currentStep + 1) / steps.length) * 100 + "%";
}

function validateStep() {
  const input = steps[currentStep].querySelector("input");

  if (input.value.trim() === "") {
    alert("Please fill the field before continuing ❌");
    return false;
  }
  return true;
}