900+ reviews For Entrepreneurs
Digittrix logo

Home - Scripts - Website Development

  • 01 August 2025

Create a Multi-Step Form with JavaScript
by Rattanjot S – 3 minute read – 234 views
Web Design

Multi-step forms make it easier for users to complete forms. They can boost completion rates and decrease the number of people who abandon forms unfinished.

Key Points

  • 67% of users prefer multi-step forms over long single-page forms for complex registrations.
  • Multi-step forms reduce bounce rates by 20–50% in most online registration or signup scenarios.
  • Adding progress indicators improves user satisfaction scores by 45% during form completion tasks.

Designing user-friendly forms is vital in web and mobile app development. One effective way to improve user experience is by using multi-step forms. Instead of overwhelming users with many input fields on one page, multi-step forms break the process into smaller, manageable parts.

In this article, you'll learn how to create a 4-step multi-step form using HTML, CSS, and JavaScript. This type of form is a useful addition for projects involving web app development, where engaging and interactive interfaces are important.

1. In HTML Structure

The HTML is organized into a responsive container (form-container), which includes:

  • A title header
  • Step indicators (steps 1–4)
  • A <form> containing 4 <div class="form-step"> blocks (each block is one form step)

                                        <div class="step-indicators">
      <div class="step active">1</div>
      <div class="step">2</div>
      <div class="step">3</div>
      <div class="step">4</div>
    </div>

Each step circle changes color when active.

Form Steps

Each step contains a few form fields and a navigation button group:

                                        <div class="form-step active">
        <div class="form-group"><label>Full Name</label><input type="text" required></div>
        <div class="form-group"><label>Email Address</label><input type="email" required></div>
        <div class="form-group"><label>Password</label><input type="password" required></div>
  
      <div class="form-group"><label>Phone Number</label><input type="text"></div>
        <div class="btn-group">
          <button type="button" class="btn-prev" disabled>Previous</button>
          <button type="button" class="btn-next">Next</button>
        </div>
      </div>

Steps 1–3 have Next and Previous buttons.
Step 4 has Previous and Submit.

This multi-step functionality adds interactivity — a key requirement in modern web development services.

2. CSS Styling

Form Container

                                        .form-container {
      background: #fff;
      padding: 40px;
      border-radius: 16px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
      width: 100%;
      max-width: 500px;
    }

White card with padding, border radius, and subtle shadow for a modern UI look.

Step Indicator Styling

                                            .step {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #cfd9ea;
      color: #fff;
    }


    .step.active {
      background: #4b6fdc;
      box-shadow: 0 4px 8px rgba(75, 111, 220, 0.3);
    }

Circles that indicate which step is currently active.
.active uses a blue color to highlight the current step.

Form Group (Input Fields)

                                         .form-group input {
      width: 100%;
      padding: 12px 8px;
      border: none;
      border-bottom: 2px solid #cfd9ea;
      background: transparent;
      font-size: 16px;
      outline: none;
    }


    .form-group input:focus {
      border-bottom: 2px solid #4b6fdc;
    }

Minimalist underline inputs, with a blue highlight on focus.
This clean styling improves usability, which is essential in any web app development project.

3. JavaScript Logic

Step Navigation Logic

                                         
const steps = document.querySelectorAll('.form-step');
    const stepIndicators = document.querySelectorAll('.step');
    const nextBtns = document.querySelectorAll('.btn-next');
    const prevBtns = document.querySelectorAll('.btn-prev');
    let currentStep = 0;


    function showStep(index) {
      steps.forEach((step, i) => {
        step.classList.toggle('active', i === index);
        stepIndicators[i].classList.toggle('active', i === index);
      });
    }

showStep(index) hides all steps and shows only the one at the given index.

Button Click Handlers

                                         nextBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        if (currentStep < steps.length - 1) {
          currentStep++;
          showStep(currentStep);
        }
      });
    });


    prevBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        if (currentStep > 0) {
          currentStep--;
          showStep(currentStep);
        }
      });
    });

  • The next button increments the step index and shows the next step.
  • The previous button decrements the index and shows the previous step.

This feature improves the user experience, often seen in well-organised web development services.

Form Submission

                                          document.getElementById('multiStepForm').addEventListener('submit', e => {
      e.preventDefault();
      alert('Form submitted successfully!');
    });

  • Prevents page reload
  • Shows a success alert when the form is submitted

This kind of interactivity is crucial in custom web development, where every user interaction matters.

Final Words

Creating a multi-step form with HTML, CSS, and JavaScript is a great way to offer users a guided, clean, and responsive form experience. This four-step form strikes the right balance between functionality and user-friendly design — ideal for custom web development, professional web services, or interactive web app projects.

Looking to integrate this into a real-world application? You can expand on it with:

  • Form validation
  • Progress bar animations
  • API submissions or AJAX
  • Responsive enhancements

These additions make your form suitable for enterprise use and production level.

Tech Stack & Version

Frontend

  • HTML
  • CSS
  • JavaScript

Backend

  • Node.js
  • Express.js
  • PHP

Deployment

  • Netlify
  • Verce
  • AWS

Recent Scripts

Website Development

Razorpay Payment Webhook: A Complete Guide

Author by Tarun C. – April 10, 2026 – 4 minute read

<p dir="ltr">Razorpay webhooks notify your server immediately of payment events, allowing secure, real-time updates and automatic transaction recording in your database.</p> <p>&nbsp;</p>

PHP
Website Development

Image Upload with Fixed Dimensions in ReactJS

Author by Parveen – April 6, 2026 – 4 minute read

<p>Over 70% of web apps use client-side image processing to ensure consistent UI, faster load times, and optimized performance with fixed dimensions in ReactJS.</p>

Website Development

Shopify Draft Orders: Convert Quotes into Paid Orders

Author by Bobin S. – April 2, 2026 – 3 minute read

<p>Convert quotes into paid orders using Shopify Draft Orders. Create custom pricing, send invoices, automate workflows, and boost order conversion rates.</p>