Making Multi-Step Form with HTML, CSS, JavaScript

How to make a simple multi-step form with HTML, CSS, JavaScript

After figuring out different approaches to making various types of forms, I have decided to create a simplified version with just HTML, CSS and JavaScript. Here is the final code with a few adjustments.

Structure (HTML)

<!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="../styles/multiStepForm.css" />
  </head>
  <body>
    <header><h1>Multi-step Form</h1></header>
    <main>
      <p>Please fill in the following form:</p>
      <form id="multiStepForm" novalidate>
        <section id="step1" class="step">
          <label for="name">Step 1: Name</label>
          <input
            type="text"
            id="name"
            name="name"
            placeholder="Your name"
            required
          />
          <button type="button" id="next1">Next</button>
          <p id="err1" aria-live="polite"></p>
        </section>

        <section id="step2" class="step hidden">
          <label for="email">Step 2: Email</label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Your email"
            required
          />
          <button type="button" id="prev1">Back</button>
          <button type="button" id="next2">Next</button>
          <p id="err2" aria-live="polite"></p>
        </section>

        <section id="step3" class="step hidden">
          <p>Step 3: Review</p>
          <p>Name: <span id="reviewName"></span></p>
          <p>Email: <span id="reviewEmail"></span></p>
          <button type="button" id="prev2">Back</button>
          <button type="submit">Submit</button>
        </section>
      </form>
    </main>

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

Functionality (JavaScript)

// State
const formData = {
  name: "",
  email: "",
};

// Elements
const form = document.getElementById("multiStepForm");

const step1 = document.getElementById("step1");
const step2 = document.getElementById("step2");
const step3 = document.getElementById("step3");

const err1 = document.getElementById("err1");
const err2 = document.getElementById("err2");

const nameInput = document.getElementById("name");
const emailInput = document.getElementById("email");

const reviewName = document.getElementById("reviewName");
const reviewEmail = document.getElementById("reviewEmail");

const next1 = document.getElementById("next1");
const next2 = document.getElementById("next2");
const prev1 = document.getElementById("prev1");
const prev2 = document.getElementById("prev2");

// Steps
const steps = [step1, step2, step3];

// Show/hide steps
function showStep(index) {
  steps.forEach((step, i) => {
    step.classList.toggle("hidden", i !== index);
  });

  const currentStep = steps[index];
  const firstInput = currentStep.querySelector(
    "input, button, select, textarea"
  );

  if (firstInput) {
    firstInput.focus();
  }
}

// Form validation
function validateInput(input, error, text) {
  const value = input.value.trim();

  if (!value) {
    error.textContent = text;

    return null;
  }

  error.textContent = "";

  return value;
}

// Actions
next1.addEventListener("click", () => {
  const name = validateInput(nameInput, err1, "Enter name");

  if (!name) return;

  formData.name = name;

  showStep(1);
});

prev1.addEventListener("click", () => showStep(0));

next2.addEventListener("click", () => {
  const email = validateInput(emailInput, err2, "Enter email");

  if (!email) return;

  formData.email = email;
  reviewName.textContent = formData.name;
  reviewEmail.textContent = formData.email;

  showStep(2);
});

prev2.addEventListener("click", () => showStep(1));

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (formData.name === "" || formData.email === "") return;

  alert(`Submitted.\nName: ${formData.name}\nEmail: ${formData.email}`);

  // Reset form after submitting
  formData.name = "";
  formData.email = "";

  form.reset();

  reviewName.textContent = "";
  reviewEmail.textContent = "";

  showStep(0);
});

showStep(0);

Basic styling (CSS)

body {
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(0, 0, 0, 0.1);
  margin: 0;
  text-align: center;
}

header {
  margin: 0.5rem;
}

main {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}

form {
  width: 400px;
  max-width: 90vw;
}

.step {
  background: white;
  margin: 1rem;
  padding: 1.5rem;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

button {
  margin: 1.5rem 0.25rem 0;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

#err1,
#err2 {
  color: red;
  font-size: 0.75rem;
}

.hidden {
  display: none;
}

If you want to get more details about making this multi-step form, check this post on my Medium blog.

Thank you for reading.

How to make a simple multi-step form with HTML, CSS, JavaScript

Structure (HTML)

Functionality (JavaScript)

Basic styling (CSS)

Check my 180+ stories on Medium