Article Categories

Selected Reading

How to create a form with multiple steps in JavaScript?

Javascript Web Development Object Oriented Programming

Creating multi-step forms improves user experience by breaking complex forms into manageable sections. This approach reduces form abandonment and makes data collection more organized.

Complete Multi-Step Form Example

Here's a complete implementation of a multi-step registration form with validation and progress indicators:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
   * {
      box-sizing: border-box;
   }
   body {
      background-color: #f1f1f1;
   }
   #regForm {
      margin: 100px auto;
      font-family: Arial, sans-serif;
      padding: 40px;
      width: 70%;
      min-width: 300px;
      background: white;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
   }
   h1 {
      text-align: center;
      margin-bottom: 30px;
   }
   input {
      padding: 10px;
      width: 100%;
      font-size: 17px;
      font-family: Arial, sans-serif;
      border: 1px solid #aaaaaa;
      border-radius: 4px;
      margin-bottom: 10px;
   }
   input.invalid {
      background-color: #ffdddd;
      border-color: #ff6666;
   }
   .page {
      display: none;
      padding: 20px 0;
   }
   .page h3 {
      margin-bottom: 15px;
      color: #333;
   }
   button {
      background-color: #4CAF50;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      font-size: 17px;
      cursor: pointer;
      border-radius: 4px;
   }
   button:hover {
      opacity: 0.8;
   }
   #prevBtn {
      background-color: #bbbbbb;
   }
   .button-container {
      overflow: auto;
      margin-top: 20px;
   }
   .button-container div {
      float: right;
   }
   .step {
      height: 15px;
      width: 15px;
      margin: 0 2px;
      background-color: #bbbbbb;
      border: none;
      border-radius: 50%;
      display: inline-block;
      opacity: 0.5;
   }
   .step.active {
      opacity: 1;
   }
   .step.finish {
      background-color: #4CAF50;
   }
   .step-indicator {
      text-align: center;
      margin-top: 40px;
   }
</style>
<body>

<form id="regForm">
   <h1>Registration Form</h1>
   
   <!-- Step 1: Personal Information -->
   <div class="page">
      <h3>Personal Information</h3>
      <p><input placeholder="First name:" oninput="this.className = ''" name="fname"></p>
      <p><input placeholder="Last name:" oninput="this.className = ''" name="lname"></p>
   </div>
   
   <!-- Step 2: Contact Information -->
   <div class="page">
      <h3>Contact Information</h3>
      <p><input placeholder="E-mail:" oninput="this.className = ''" name="email" type="email"></p>
      <p><input placeholder="Phone:" oninput="this.className = ''" name="phone" type="tel"></p>
   </div>
   
   <!-- Step 3: Birth Date -->
   <div class="page">
      <h3>Date of Birth</h3>
      <p><input placeholder="DD" oninput="this.className = ''" name="dd" type="number" min="1" max="31"></p>
      <p><input placeholder="MM" oninput="this.className = ''" name="mm" type="number" min="1" max="12"></p>
      <p><input placeholder="YYYY" oninput="this.className = ''" name="yyyy" type="number" min="1900" max="2023"></p>
   </div>
   
   <div class="button-container">
      <div>
         <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
         <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
      </div>
   </div>
   
   <div class="step-indicator">
      <span class="step"></span>
      <span class="step"></span>
      <span class="step"></span>
   </div>
</form>

<script>
   var currentTab = 0;
   showTab(currentTab);
   
   function showTab(stepNo) {
      var pages = document.getElementsByClassName("page");
      
      // Hide all pages first
      for (var i = 0; i < pages.length; i++) {
         pages[i].style.display = "none";
      }
      
      // Show current page
      pages[stepNo].style.display = "block";
      
      // Handle Previous button visibility
      if (stepNo == 0) {
         document.getElementById("prevBtn").style.display = "none";
      } else {
         document.getElementById("prevBtn").style.display = "inline";
      }
      
      // Handle Next/Submit button text
      if (stepNo == (pages.length - 1)) {
         document.getElementById("nextBtn").innerHTML = "Submit";
      } else {
         document.getElementById("nextBtn").innerHTML = "Next";
      }
      
      updateStepIndicator(stepNo);
   }
   
   function nextPrev(direction) {
      var pages = document.getElementsByClassName("page");
      
      // If going forward, validate current step
      if (direction == 1 && !validateForm()) return false;
      
      // Hide current page
      pages[currentTab].style.display = "none";
      
      // Update current tab
      currentTab = currentTab + direction;
      
      // If reached the end, submit form
      if (currentTab >= pages.length) {
         alert("Form submitted successfully!");
         document.getElementById("regForm").reset();
         currentTab = 0;
         showTab(currentTab);
         return false;
      }
      
      // Show the new current tab
      showTab(currentTab);
   }
   
   function validateForm() {
      var pages = document.getElementsByClassName("page");
      var inputs = pages[currentTab].getElementsByTagName("input");
      var valid = true;
      
      // Validate all inputs in current page
      for (var i = 0; i < inputs.length; i++) {
         if (inputs[i].value == "") {
            inputs[i].className += " invalid";
            valid = false;
         }
      }
      
      // Mark step as completed if valid
      if (valid) {
         document.getElementsByClassName("step")[currentTab].className += " finish";
      }
      
      return valid;
   }
   
   function updateStepIndicator(stepNo) {
      var steps = document.getElementsByClassName("step");
      
      // Remove active class from all steps
      for (var i = 0; i < steps.length; i++) {
         steps[i].className = steps[i].className.replace(" active", "");
      }
      
      // Add active class to current step
      steps[stepNo].className += " active";
   }
</script>

</body>
</html>

How It Works

The multi-step form uses several key JavaScript functions:

showTab(): Displays the current step and manages button states
nextPrev(): Handles navigation between steps with validation
validateForm(): Ensures all fields in current step are filled
updateStepIndicator(): Updates the visual progress indicators

Key Features

Feature	Purpose	Implementation
Step Validation	Prevents progression with empty fields	validateForm() function
Progress Indicators	Shows current step and completed steps	CSS classes with JavaScript updates
Dynamic Navigation	Shows/hides Previous button, changes Next to Submit	Conditional display in showTab()

Customization Options

You can easily customize this form by:

Adding more steps by creating additional .page divs
Modifying validation rules in the validateForm() function
Changing styling through CSS classes
Adding different input types for specific data collection

Conclusion

Multi-step forms improve user experience by organizing complex data collection into digestible sections. This implementation provides validation, progress tracking, and smooth navigation between steps.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next