🚀 See it in action

Create a Multi-Step Registration Form using JavaScript

Learn create a multi-step registration form with this comprehensive guide containing source code and step-by-step instructions.

CC CodesCompiler 📅 June 5, 2026

#login#form#ui#css

HTML Structure
CSS Styling
JavaScript Logic (if applicable)

Welcome to this tutorial on Create a Multi-Step Registration Form using JavaScript. This is an automatically generated post based on popular examples to help you learn and implement this concept.

HTML Structure

Here is the basic HTML structure for this project:

<div class="multi-step-container">
  <div class="progress-bar">
    <div class="progress" id="progress"></div>
    <div class="progress-step progress-step-active" data-title="Personal">1</div>
    <div class="progress-step" data-title="Account">2</div>
    <div class="progress-step" data-title="Confirm">3</div>
  </div>
  <form class="multi-step-form" id="registrationForm">
    <!-- Step 1 -->
    <div class="form-step form-step-active">
      <h2>Personal Information</h2>
      <div class="input-group">
        <input type="text" id="fullname" required placeholder=" " />
        <label for="fullname">Full Name</label>
      </div>
      <div class="input-group">
        <input type="email" id="email" required placeholder=" " />
        <label for="email">Email Address</label>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-next">Next</button>
      </div>
    </div>
    <!-- Step 2 -->
    <div class="form-step">
      <h2>Account Setup</h2>
      <div class="input-group">
        <input type="text" id="username" required placeholder=" " />
        <label for="username">Username</label>
      </div>
      <div class="input-group">
        <input type="password" id="password" required placeholder=" " />
        <label for="password">Password</label>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-prev">Previous</button>
        <button type="button" class="btn btn-next">Next</button>
      </div>
    </div>
    <!-- Step 3 -->
    <div class="form-step">
      <h2>Confirmation</h2>
      <p class="summary-text">Please review your information before submitting.</p>
      <div class="terms-group">
        <input type="checkbox" id="terms" required />
        <label for="terms">I agree to the Terms & Conditions</label>
      </div>
      <div class="btn-group">
        <button type="button" class="btn btn-prev">Previous</button>
        <button type="submit" class="btn btn-submit">Submit</button>
      </div>
    </div>
  </form>
</div>

CSS Styling

Style your component using the following CSS:

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1e1b4b, #312e81, #4338ca);
  font-family: 'Outfit', sans-serif;
  color: #fff;
}

.multi-step-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px;
  border-radius: 24px;
  width: 100%;
  max-width: 450px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.progress-bar {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-bottom: 40px;
  z-index: 1;
}

.progress-bar::before {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 100%;
  z-index: -1;
  border-radius: 2px;
}

.progress {
  position: absolute;
  background: #6366f1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  height: 4px;
  width: 0%;
  z-index: -1;
  transition: 0.4s ease;
  border-radius: 2px;
}

.progress-step {
  width: 35px;
  height: 35px;
  background: #1e1b4b;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  transition: 0.4s ease;
}

.progress-step::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 8px);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  transition: 0.4s ease;
}

.progress-step-active {
  border-color: #6366f1;
  background: #6366f1;
  color: #fff;
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}

.progress-step-active::after {
  color: #fff;
}

.form-step {
  display: none;
  animation: slideIn 0.4s ease-out;
}

.form-step-active {
  display: block;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.input-group {
  position: relative;
  margin-bottom: 25px;
}

.input-group input {
  width: 100%;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-family: inherit;
  transition: 0.3s ease;
  box-sizing: border-box;
}

.input-group input:focus {
  outline: none;
  border-color: #6366f1;
  background: rgba(255, 255, 255, 0.08);
}

.input-group label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  transition: 0.3s ease;
  pointer-events: none;
}

.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
  top: -10px;
  left: 10px;
  font-size: 0.8rem;
  background: linear-gradient(180deg, #24225e 50%, #282664 50%);
  padding: 0 5px;
  border-radius: 4px;
  color: #a5b4fc;
}

.btn-group {
  display: flex;
  gap: 15px;
  margin-top: 30px;
}

.btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}

.btn-prev {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-prev:hover {
  background: rgba(255, 255, 255, 0.1);
}

.btn-next, .btn-submit {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(99, 102, 241, 0.8);
}

.btn-next:hover, .btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 25px -10px rgba(99, 102, 241, 0.8);
}

.summary-text {
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 20px;
}

.terms-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.terms-group input {
  accent-color: #6366f1;
  width: 18px;
  height: 18px;
}

.terms-group label {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

JavaScript Logic (if applicable)

For dynamic behavior, you can use the following JavaScript snippet:

const prevBtns = document.querySelectorAll(".btn-prev");
const nextBtns = document.querySelectorAll(".btn-next");
const progress = document.getElementById("progress");
const formSteps = document.querySelectorAll(".form-step");
const progressSteps = document.querySelectorAll(".progress-step");

let formStepsNum = 0;

nextBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    const currentStepInputs = formSteps[formStepsNum].querySelectorAll("input");
    let valid = true;
    currentStepInputs.forEach(input => {
      if(!input.checkValidity()) {
        input.reportValidity();
        valid = false;
      }
    });
    
    if(valid) {
      formStepsNum++;
      updateFormSteps();
      updateProgressbar();
    }
  });
});

prevBtns.forEach((btn) => {
  btn.addEventListener("click", () => {
    formStepsNum--;
    updateFormSteps();
    updateProgressbar();
  });
});

function updateFormSteps() {
  formSteps.forEach((formStep) => {
    formStep.classList.contains("form-step-active") &&
      formStep.classList.remove("form-step-active");
  });

  formSteps[formStepsNum].classList.add("form-step-active");
}

function updateProgressbar() {
  progressSteps.forEach((progressStep, idx) => {
    if (idx < formStepsNum + 1) {
      progressStep.classList.add("progress-step-active");
    } else {
      progressStep.classList.remove("progress-step-active");
    }
  });

  const progressActive = document.querySelectorAll(".progress-step-active");

  progress.style.width =
    ((progressActive.length - 1) / (progressSteps.length - 1)) * 100 + "%";
}

document.getElementById('registrationForm').addEventListener('submit', (e) => {
  e.preventDefault();
  alert('Registration Successful!');
});

Feel free to customize this code for your own projects!

Table of Contents

HTML Structure

CSS Styling

JavaScript Logic (if applicable)

📖 You Might Also Like

Responsive Login Page Template with...

Animated Login Form UI Design...

How to Create a Glassmorphism...

Design a Modern Login &...