form wizard JavaScript

Here’s a simple multi-step form wizard in JavaScript with HTML/CSS/JS.

HTML

<form id="wizardForm">
  <div class="step active">
    <h2>Step 1</h2>
    <input type="text" placeholder="First Name" required />
    <button type="button" class="next">Next</button>
  </div>

  <div class="step">
    <h2>Step 2</h2>
    <input type="email" placeholder="Email" required />
    <button type="button" class="prev">Back</button>
    <button type="button" class="next">Next</button>
  </div>

  <div class="step">
    <h2>Step 3</h2>
    <input type="password" placeholder="Password" required />
    <button type="button" class="prev">Back</button>
    <button type="submit">Finish</button>
  </div>
</form>

CSS

.step {
  display: none;
}

.step.active {
  display: block;
}

JavaScript

const form = document.getElementById("wizardForm");
const steps = document.querySelectorAll(".step");
let currentStep = 0;

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

function validateStep(stepElement) {
  const inputs = stepElement.querySelectorAll("input");
  for (const input of inputs) {
    if (!input.checkValidity()) {
      input.reportValidity();
      return false;
    }
  }
  return true;
}

form.addEventListener("click", (e) => {
  if (e.target.classList.contains("next")) {
    if (validateStep(steps[currentStep])) {
      currentStep++;
      showStep(currentStep);
    }
  }

  if (e.target.classList.contains("prev")) {
    currentStep--;
    showStep(currentStep);
  }
});

form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (validateStep(steps[currentStep])) {
    alert("Form submitted!");
  }
});

showStep(currentStep);

How it works

• Only one .step is visible at a time.
• Next validates the current step before moving forward.
• Back moves to the previous step.
• Finish submits the form after final validation.

If you want, I can also give you:

1. a progress bar version
2. a Bootstrap wizard
3. a React form wizard
4. a fully styled modern wizard