How to Create a Multi Step Form: 3 Easy Steps

---

Forms are an essential part of any website, especially for gathering user data. However, long forms can overwhelm users, leading to higher abandonment rates. This guide on how to create a multi step form solves this problem by dividing the form into manageable sections, improving usability and completion rates.

In this article, you’ll learn how to create a multi-step form using HTML, CSS, and JavaScript. By the end of this guide, you’ll have a fully functional form that enhances user experience and keeps users engaged.

---

Why Use a Multi Step Form?

A multi step form is ideal for improving user interaction and data accuracy. Instead of presenting all fields at once, the form is divided into multiple steps, making it easier for users to focus on one section at a time.

This structure reduces cognitive load, prevents errors, and increases the likelihood of successful form submission. Whether for registration, surveys, or e-commerce checkouts, multi step forms are a user-friendly solution.

How to Create a Multi Step Form

---

Step 1: Create the HTML Structure

The first step in creating a multi step form is to define the HTML structure. Each step of the form is contained in a div with the class tab. Below is the code for a sample registration form divided into multiple sections:

<form id="regForm" action="">
  <h1>Register:</h1>
  <!-- Step 1 -->
  <div class="tab">Personal Details:
    <p><input placeholder="First name..." oninput="this.className = ''"></p>
    <p><input placeholder="Last name..." oninput="this.className = ''"></p>
  </div>
  <!-- Step 2 -->
  <div class="tab">Contact Info:
    <p><input placeholder="Email..." oninput="this.className = ''"></p>
    <p><input placeholder="Phone..." oninput="this.className = ''"></p>
  </div>
  <!-- Step 3 -->
  <div class="tab">Additional Info:
    <p><textarea placeholder="Address..." rows="3" oninput="this.className = ''"></textarea></p>
    <p>
      <select>
        <option value="" disabled selected>Select Country</option>
        <option>USA</option>
        <option>Canada</option>
        <option>Other</option>
      </select>
    </p>
  </div>
  <!-- Navigation Buttons -->
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
      <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
    </div>
  </div>
  <!-- Step Indicators -->
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

This layout allows you to display one section at a time while keeping the others hidden.

---

Step 2: Style the Multi Step Form with CSS

CSS is crucial for designing a visually appealing and user-friendly multi step form. Below is a sample CSS code:

/* Form Container */
#regForm {
  background-color: #f9f9f9;
  margin: 100px auto;
  padding: 40px;
  width: 80%;
  min-width: 300px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Input Fields */
input, textarea, select {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

input:focus, textarea:focus, select:focus {
  border-color: #4caf50;
  outline: none;
}

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

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

/* Step Indicators */
.step {
  height: 15px;
  width: 15px;
  margin: 5px;
  background-color: #ddd;
  border-radius: 50%;
  display: inline-block;
}

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

.step.finish {
  background-color: #45a049;
}

This CSS ensures a modern, responsive design that adapts to different screen sizes.

---

Step 3: Add JavaScript for Interactivity

JavaScript adds functionality to your multi step form. It handles navigation between steps and validates the fields. Below is a sample script:

var currentTab = 0;
showTab(currentTab);

function showTab(n) {
  var tabs = document.getElementsByClassName("tab");
  tabs[n].style.display = "block";
  document.getElementById("prevBtn").style.display = n === 0 ? "none" : "inline";
  document.getElementById("nextBtn").innerHTML = n === tabs.length - 1 ? "Submit" : "Next";
  updateStepIndicator(n);
}

function nextPrev(n) {
  var tabs = document.getElementsByClassName("tab");
  if (n === 1 && !validateForm()) return false;
  tabs[currentTab].style.display = "none";
  currentTab += n;
  if (currentTab >= tabs.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
}

function validateForm() {
  var valid = true;
  var inputs = document.getElementsByClassName("tab")[currentTab].querySelectorAll("input, textarea, select");
  inputs.forEach(input => {
    if (!input.value) {
      input.classList.add("invalid");
      valid = false;
    } else {
      input.classList.remove("invalid");
    }
  });
  if (valid) {
    document.getElementsByClassName("step")[currentTab].classList.add("finish");
  }
  return valid;
}

function updateStepIndicator(n) {
  var steps = document.getElementsByClassName("step");
  Array.from(steps).forEach(step => step.classList.remove("active"));
  steps[n].classList.add("active");
}

---

JavaScript Explanation:

1. Global Variable

var currentTab = 0;
showTab(currentTab);

currentTab is a global variable that keeps track of the current step (or “tab”) of the form. It is initialized to 0, representing the first step.

showTab(currentTab) is called to display the first step when the form loads.

2. showTab() Function

function showTab(n) {
  var tabs = document.getElementsByClassName("tab");
  tabs[n].style.display = "block";
  document.getElementById("prevBtn").style.display = n === 0 ? "none" : "inline";
  document.getElementById("nextBtn").innerHTML = n === tabs.length - 1 ? "Submit" : "Next";
  updateStepIndicator(n);
}

Purpose: Displays the current step and manages button visibility and text updates.

Parameters:

n: The index of the current tab to display.

How it Works:

• The tabs variable fetches all elements with the class tab, representing the form steps.
• The step at index n is made visible with style.display = "block".
• The “Previous” button (prevBtn) is hidden if the user is on the first step (n === 0), otherwise, it is displayed.
• The “Next” button (nextBtn) text changes to “Submit” if the user is on the last step, otherwise it remains as “Next”.
• Calls updateStepIndicator(n) to visually highlight the current step.

3. nextPrev() Function

function nextPrev(n) {
  var tabs = document.getElementsByClassName("tab");
  if (n === 1 && !validateForm()) return false;
  tabs[currentTab].style.display = "none";
  currentTab += n;
  if (currentTab >= tabs.length) {
    document.getElementById("regForm").submit();
    return false;
  }
  showTab(currentTab);
}

Purpose: Handles navigation between steps and manages form submission.Parameters:

• n: Determines navigation direction. A value of 1 moves forward; -1 moves backward.

How it Works:

• Validates the current tab’s inputs using validateForm() before proceeding to the next step.
• Hides the current step by setting its display property to none.
• Updates currentTab by adding n.
• If the user has reached the final step (currentTab >= tabs.length), the form is submitted with document.getElementById("regForm").submit().
• Otherwise, the next tab is displayed using showTab(currentTab).

4. validateForm() Function

function validateForm() {
  var valid = true;
  var inputs = document.getElementsByClassName("tab")[currentTab].querySelectorAll("input, textarea, select");
  inputs.forEach(input => {
    if (!input.value) {
      input.classList.add("invalid");
      valid = false;
    } else {
      input.classList.remove("invalid");
    }
  });
  if (valid) {
    document.getElementsByClassName("step")[currentTab].classList.add("finish");
  }
  return valid;
}

Purpose: Ensures all required fields in the current step are filled before proceeding.

How it Works:

• Fetches all input fields in the current step using querySelectorAll.
• Loops through each input field and checks if it has a value.
  • If the field is empty, it adds the invalid class to highlight it.
  • If the field is valid, it removes the invalid class.
• If all fields are valid, the step is marked as complete by adding the finish class to the corresponding step indicator.
• Returns true if all fields are valid, otherwise false.

5. updateStepIndicator() Function

function updateStepIndicator(n) {
  var steps = document.getElementsByClassName("step");
  Array.from(steps).forEach(step => step.classList.remove("active"));
  steps[n].classList.add("active");
}

Purpose: Updates the visual step indicators to reflect the current step.

How it Works:

• Fetches all step indicators with the class step.
• Removes the active class from all indicators.
• Adds the active class to the indicator corresponding to the current step (n).

How the Code Works Together

1. Initialization: The first step is displayed when the page loads by calling showTab(0).
2. Navigation: The nextPrev() function moves the user between steps, validating fields before progressing forward.
3. Validation: The validateForm() function ensures required fields are filled and highlights incomplete fields.
4. Step Indicators: The updateStepIndicator() function visually tracks the user’s progress.

Benefits of a Multi Step Form

1. Improved Usability: Simplifies the process by dividing it into smaller, focused sections.
2. Reduced Errors: Real-time validation ensures all fields are correctly filled.
3. Higher Completion Rates: Users are less likely to abandon the form.

---

Result

See the Pen Multi-Step Form by Rajesh Rai (@RajeshRai) on CodePen.

Conclusion

In this guide, we explored how to create a multi step form using HTML, CSS, and JavaScript. A multi step form is a powerful tool for improving user experience by dividing lengthy forms into manageable steps. Whether you’re designing a registration form or a survey, implementing a multi step approach can significantly boost engagement and form completion rates.

By following the steps outlined above, you can create a professional and user-friendly form tailored to your needs. Start building your multi step form today and watch how it transforms your website’s user interaction!