Home » How to Create a Multi Step Form with Step Progress Bar Using HTML, CSS, and JavaScript

How to Create a Multi Step Form with Step Progress Bar Using HTML, CSS, and JavaScript

Categories: Forms

In this blog, we will guide you step by step on how to create a responsive multi-step form with a step progress bar using HTML, CSS, and JavaScript.

Forms are an essential part of any website or web application. Whether it is for collecting user information, feedback, or processing transactions, forms are the primary way to interact with users. However, long forms can often overwhelm users and lead to low completion rates. A multi-step form with a progress bar is a modern and effective solution to improve user experience and form submission rates.

Watch the Video Tutorial: Multi Step Form with Step Progress Bar

What is a Multi-Step Form?

A multi-step form is a type of form that splits the content into multiple steps or sections, displaying one section at a time. Each step focuses on a specific set of questions, making the form easier to navigate and complete. Unlike a traditional long form, a multi-step form provides a clean, organized, and user-friendly interface.

Advantages of Multi-Step Forms:

Reduces cognitive overload for users.
Enhances form completion rates.
Makes forms visually appealing and organized.
Provides feedback to users through progress indicators.

Key Features of Our Multi-Step Form

The multi-step form we are building in this tutorial comes with several modern features:

Step Progress Bar: Users can see which step they are on and how many steps are left.
Responsive Design: The form adapts seamlessly to all screen sizes, including mobile, tablet, and desktop.
Smooth Navigation: Users can move forward and backward between steps using navigation buttons.
Success Message: Once the form is submitted, users receive a confirmation message indicating successful submission.
Custom Styling: Using CSS, we can design a visually appealing interface with vibrant colors and hover effects.

HTML Structure of the Multi-Step Form

Form Container: This holds the entire form and gives it a defined width and padding.
Form Title: A heading to indicate what the form is about.
Progress Bar: A horizontal list showing all the steps with the current step highlighted.
Step Groups: Each step of the form is placed inside a separate container, shown one at a time.
Navigation Buttons: Buttons to move forward (Next) and backward (Prev) through steps.
Success Box: A message displayed after successful form submission.

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create Multi Step Form With Step Progress Bar Design Using HTML CSS And JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <section class="form-wrap">
        <div class="form-container">
            <form action="" id="multi-step-form">
                <div id="form-container-box">
                    <h1 class="form-title">Multi Step Form</h1>
                    <ul class="progress-bar">
                        <li id="step1" class="active">User Info</li>
                        <li id="step2">Address</li>
                        <li id="step3">Comments</li>
                    </ul>

                    <!-- ======================Step Group 1============== -->
                    <div class="step-group" id="step-group-1">
                        <div class="form-box">
                            <div class="form-group">
                                <input type="text"  class="form-field" placeholder="First Name">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-field" placeholder="Last Name">
                            </div>
                        </div>

                        <div class="form-box">
                            <div class="form-group">
                                <input type="email" class="form-field" placeholder="Email">
                            </div>
                        </div>

                        <div class="form-box">
                            <div class="form-group">
                                <input type="text" class="form-field" placeholder="Phone">
                            </div>
                        </div>

                        <div class="form-box">
                            <div class="btn-step">
                                <button id="step-next-1">Next &#65515;</button>
                            </div>
                        </div>
                    </div>
                    <!-- ======================Step Group 2============== -->
                    <div class="step-group" id="step-group-2">
                        <div class="form-box">
                            <div class="form-group">
                                <input type="text" class="form-field" placeholder="Address 1">
                            </div>
                        </div>

                        <div class="form-box">
                            <div class="form-group">
                                <input type="text" class="form-field" placeholder="Address 2">
                            </div>
                        </div>

                        <div class="form-box">
                            <div class="form-group">
                                <input type="text" class="form-field" placeholder="City">
                            </div>

                            <div class="form-group">
                                <input type="text" class="form-field" placeholder="Zip">
                            </div>

                        </div>

                        <div class="form-box">
                            <div class="btn-step">
                                <button id="step-prev-1">&#65513; Prev</button>
                                <button id="step-next-2">Next &#65515;</button>
                            </div>
                        </div>


                    </div>

                    <!-- ======================Step Group 3============== -->
                    <div class="step-group" id="step-group-3">
                        <div class="form-box">
                            <div class="form-group">
                                <textarea class="form-field"  placeholder="Message" cols="30"
                                    rows="10"></textarea>
                            </div>
                        </div>

                        <div class="form-box">
                            <div class="btn-step">
                                <button id="step-prev-2">&#65513; Prev</button>
                                <button type="submit" id="step-next-3">Send &#65515;</button>
                            </div>
                        </div>

                    </div>

                </div>

                <div id="sucess-box">
                    <span class="done">&#10004;</span>
                    <p class="sucess-text">Your message was sent successful. Thanks.</p>
                    <button id="reset-btn" type="reset">Refress</button>
                </div>

            </form>


        </div>
    </section>

    <script src="script.js"></script>
</body>

</html>

CSS Styling for Multi-Step Forms

CSS allows us to create a visually appealing form that matches modern UI standards. Key styling aspects for our form include:

Form Wrapper: Centering the form on the page with padding and background color.
Progress Bar: Highlighting the current step and animating the progress.
Input Fields: Stylish inputs with borders, padding, and hover effects.
Buttons: Colored buttons for Next, Prev, and Submit actions.
Success Box: A visually distinct message area after submission.

CSS Code :

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.form-wrap {
    background-color: #111111;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5%;
}

.form-container {
    max-width: 600px;
    width: 100%;
    padding: 20px;
    background-color: #262726;

}

.form-title {
    background-color: #ff1046;
    padding: 10px;
    color: #fff;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
}

.progress-bar {
    margin: 25px 0;
    padding: 0;
    overflow: hidden;
    counter-reset: step;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}

.progress-bar li {
    list-style-type: none;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    position: relative;
    color: #fff;
}

.progress-bar li::before {
    position: relative;
    z-index: 2;
    content: counter(step);
    counter-increment: step;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    border-radius: 100px;
    margin: 0 auto 10px auto;
    background-color: #191919;
    color: #f5f5f5;
}

.progress-bar li::after {
    content: '';
    width: 100%;
    height: 6px;
    position: absolute;
    left: -50%;
    top: 17px;
    z-index: 1;
    background-color: #191919;
}

.progress-bar li.active::before,
.progress-bar li.active::after {
    background: linear-gradient(to right, #FF1046 20%, #E01660 40%, #E01660 60%, #FF1046 80%);
    background-size: 200% auto;
    -webkit-animation: effect 1s linear infinite;
    animation: effect 1s linear infinite;
    color: #111111;
}

@keyframes effect {
    to {
        background-position: -200% center;
    }
}

.step-group {
    margin-top: 50px;
}

.form-box {
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.form-box .form-group {
    width: 100%;
    margin-bottom: 15px;
}

.form-box .form-group .form-field {
    width: 100%;
    height: 50px;
    padding: 10px 15px;
    font-size: 18px;
    color: #f5f5f5;
    background-color: transparent;
    border: 1px solid #ced4da;
    outline: none;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
}

.btn-step {
    display: flex;
    flex-direction: row;
    gap: 20px;
    margin-top: 20px;
}

.btn-step button {
    background-color: #ff1046;
    border: none;
    color: #fff;
    padding: 10px 25px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}

.form-box .form-group textarea.form-field {
    min-height: 190px;
}

#step-group-2,
#step-group-3 {
    display: none;
}


#sucess-box {
    background-color: #fff;
    height: 350px;
    display: none;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}

#sucess-box span {
    display: block;
    width: 100px;
    height: 100px;
    border: 6px solid green;
    font-size: 60px;
    color: green;
    font-weight: 800;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

#sucess-box .sucess-text {
    font-size: 30px;
    color: green;
}

#sucess-box #reset-btn {
    background-color: #ff1046;
    border: none;
    color: #fff;
    padding: 10px 25px;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

JavaScript for Form Functionality

JavaScript makes the form interactive and dynamic. Key functionalities include:

Step Navigation: Show and hide step groups based on the current step.
Progress Update: Update the progress bar as the user navigates.
Form Submission: Display a success message upon submission.
Reset Functionality: Allow users to restart the form after submission.

JavaScript Code:

window.addEventListener("load", () => {
  const form = document.getElementById("multi-step-form");
  const formContainerBox = document.getElementById("form-container-box");
  const step2 = document.getElementById("step2");
  const step3 = document.getElementById("step3");
  const stepGroup1 = document.getElementById("step-group-1");
  const stepGroup2 = document.getElementById("step-group-2");
  const stepGroup3 = document.getElementById("step-group-3");
  const stepNext1 = document.getElementById("step-next-1");
  const stepNext2 = document.getElementById("step-next-2");
  const stepNext3 = document.getElementById("step-next-3");
  const stepPrev1 = document.getElementById("step-prev-1");
  const stepPrev2 = document.getElementById("step-prev-2");

  const sucessBox = document.getElementById("sucess-box");
  const ResetBtn = document.getElementById("reset-btn");

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

  stepNext1.addEventListener("click", (e) => {
    stepGroup1.style.display = "none";
    stepGroup2.style.display = "block";
    step2.classList.add("active");
  });

  stepNext2.addEventListener("click", () => {
    stepGroup2.style.display = "none";
    stepGroup3.style.display = "block";
    step3.classList.add("active");
  });

  stepPrev1.addEventListener("click", () => {
    stepGroup1.style.display = "block";
    stepGroup2.style.display = "none";
    step2.classList.remove("active");
  });
  stepPrev2.addEventListener("click", () => {
    stepGroup3.style.display = "none";
    stepGroup2.style.display = "block";
    step3.classList.remove("active");
  });
  stepNext3.addEventListener("click", () => {
    formContainerBox.style.display = "none";
    sucessBox.style.display = "flex";
  });
  ResetBtn.addEventListener("click", () => {
    sucessBox.style.display = "none";
    formContainerBox.style.display = "none";
    window.location.reload();
  });
});

Benefits of Multi-Step Forms

Adding a multi-step form with a step progress bar significantly improves user experience:

Users are not overwhelmed by too many fields at once.
Step-by-step guidance ensures higher form completion rates.
Better mobile usability due to responsive design.
Clean design increases credibility and professional look of your website.
Visual feedback through progress bars builds trust and clarity.

Real-World Use Cases

Multi-step forms are widely used in various real-world applications:

E-commerce Checkout Forms: Collect shipping and payment details step by step.
User Registration Forms: Collect user info, address, and preferences separately.
Job Application Forms: Collect education, experience, and personal information in steps.
Surveys and Feedback Forms: Break long surveys into multiple sections for better completion rates.

Conclusion

A multi-step form with a step progress bar is an excellent addition to any website. It improves usability, engagement, and completion rates. By using HTML, CSS, and JavaScript, you can create fully responsive and visually appealing forms. Following this guide, you can customize the form according to your project requirements.

Live Demo

File upload form created using JavaScript, HTML, and CSS

Forms

How to Create a Multi Step Form with Step Progress Bar Using HTML, CSS, and JavaScript

Watch the Video Tutorial: Multi Step Form with Step Progress Bar

What is a Multi-Step Form?

Advantages of Multi-Step Forms:

Key Features of Our Multi-Step Form

HTML Structure of the Multi-Step Form

HTML Code:

CSS Styling for Multi-Step Forms

CSS Code :

JavaScript for Form Functionality

JavaScript Code:

Benefits of Multi-Step Forms

Real-World Use Cases

Conclusion

file upload using JavaScript: HTML/CSS UI Guide.

Responsive Navbar with Social Media Icons in HTML, CSS & JS

Responsive Navigation Menu Bar in HTML CSS | Dark Mode & Search Box

About Us

FOLLOW US

How to Create a Multi Step Form with Step Progress Bar Using HTML, CSS, and JavaScript

Watch the Video Tutorial: Multi Step Form with Step Progress Bar

What is a Multi-Step Form?

Advantages of Multi-Step Forms:

Key Features of Our Multi-Step Form

HTML Structure of the Multi-Step Form

HTML Code:

CSS Styling for Multi-Step Forms

CSS Code :

JavaScript for Form Functionality

JavaScript Code:

Benefits of Multi-Step Forms

Real-World Use Cases

Conclusion

Related

file upload using JavaScript: HTML/CSS UI Guide.

Responsive Navbar with Social Media Icons in HTML, CSS & JS

Responsive Navigation Menu Bar in HTML CSS | Dark Mode & Search Box