Project - 11

Project 11: Multi-Step Form

Build a registration form that moves through Personal Info, Preferences, and Review steps.

Your challenge: Show one step at a time, let the user move forward and backward, and display a summary before submission.

✦ HTML + CSS + JS Editor

▶ Live Output

Show one step at a time

Each form section uses the class step. The active section also gets the class active.

Inside showStep(), remove active from every step, then add it to the step you want to display.

Move between steps

The Next and Back buttons call showStep() with the correct step number.

Build the review

When Step 3 opens, read the values from the inputs and display them inside the Review section.

Use textContent and created elements so user-entered text is added safely.

Submit the form

When Submit is clicked, hide the form steps and show the final confirmation screen.

Try it: Move forward, go back and change a value, then check that the Review step shows the updated information.

Good JavaScript habit: Use one function to control which step is visible instead of repeating the same show-and-hide code for every button.

👀 Show Full Working Solution

<!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>

  <style>
    body {
      background: #000;
      color: #8A8A8A;
      font-family: 'Courier New', monospace;
      text-align: center;
      padding: 40px;
      margin: 0;
    }

    .step {
      display: none;
      background: #111;
      padding: 24px;
      margin: 20px auto;
      max-width: 420px;
      border-radius: 8px;
    }

    .step.active {
      display: block;
    }

    label {
      display: block;
      margin-top: 12px;
    }

    input,
    select {
      width: 85%;
      padding: 10px;
      margin: 6px 0;
      background: #000;
      color: #fff;
      border: 1px solid #8A8A8A;
    }

    button {
      padding: 10px 16px;
      margin: 10px 5px;
      cursor: pointer;
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 3px solid #fff;
      outline-offset: 3px;
    }

    #review {
      text-align: left;
      line-height: 1.8;
    }
  </style>
</head>

<body>

  <h2>Multi-Step Registration Form</h2>

  <div class="step active" id="step1">
    <h3>Step 1: Personal Info</h3>

    <label for="name">Name</label>
    <input id="name" type="text">

    <label for="email">Email</label>
    <input id="email" type="email">

    <button id="next1" type="button">Next</button>
  </div>

  <div class="step" id="step2">
    <h3>Step 2: Preferences</h3>

    <label for="theme">Theme</label>

    <select id="theme">
      <option>Dark</option>
      <option>Light</option>
      <option>Neon</option>
    </select>

    <br>

    <button id="back2" type="button">Back</button>
    <button id="next2" type="button">Next</button>
  </div>

  <div class="step" id="step3">
    <h3>Step 3: Review</h3>

    <div id="review"></div>

    <button id="back3" type="button">Back</button>
    <button id="submitBtn" type="button">Submit</button>
  </div>

  <div class="step" id="done">
    <h3>Form Submitted!</h3>
    <p>Your registration is complete.</p>
  </div>

  <script>
    let currentStep = 1;

    const steps =
      document.querySelectorAll(".step");

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

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

    const themeInput =
      document.getElementById("theme");

    const review =
      document.getElementById("review");

    function showStep(step) {
      steps.forEach(function(section) {
        section.classList.remove("active");
      });

      document
        .getElementById("step" + step)
        .classList.add("active");

      currentStep = step;

      if (step === 3) {
        updateReview();
      }
    }

    function updateReview() {
      review.textContent = "";

      const nameLine =
        document.createElement("p");

      const emailLine =
        document.createElement("p");

      const themeLine =
        document.createElement("p");

      nameLine.textContent =
        "Name: " + nameInput.value;

      emailLine.textContent =
        "Email: " + emailInput.value;

      themeLine.textContent =
        "Theme: " + themeInput.value;

      review.appendChild(nameLine);
      review.appendChild(emailLine);
      review.appendChild(themeLine);
    }

    document
      .getElementById("next1")
      .addEventListener("click", function() {
        showStep(2);
      });

    document
      .getElementById("back2")
      .addEventListener("click", function() {
        showStep(1);
      });

    document
      .getElementById("next2")
      .addEventListener("click", function() {
        showStep(3);
      });

    document
      .getElementById("back3")
      .addEventListener("click", function() {
        showStep(2);
      });

    document
      .getElementById("submitBtn")
      .addEventListener("click", function() {
        steps.forEach(function(section) {
          section.classList.remove("active");
        });

        document
          .getElementById("done")
          .classList.add("active");
      });
  </script>

</body>
</html>