How to Create a Beautiful Multi-Step Survey Form With Progress Bar

User experience is crucial in the digital era. A good survey form not only gathers important data but also ensures that users have an easy and enjoyable journey. Here, we’ll explain how to create a responsive, animated multi-step survey form using HTML, CSS, and JavaScript. This form will smoothly guide users through different stages, providing a pleasant experience with unique animations and clear progress bar.

Multi-Step Survey Form

Step 1: Setting Up the HTML Structure

We’ll start by setting up the HTML structure for our survey form. Our form will have six steps, each with different types of questions, and a final success message that confirms submission.

Here’s the HTML structure for our form:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-step Survey Form</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container">
        <form id="surveyForm">
            <!-- Step 1 -->
            <div class="form-step active">
                <h2>In Which State Do You Live?</h2>
                <div class="grid-container">
                    <button type="button" class="grid-item">State Number 1</button>
                    <button type="button" class="grid-item">State Number 2</button>
                    <button type="button" class="grid-item">State Number 3</button>
                    <button type="button" class="grid-item">State Number 4</button>
                    <button type="button" class="grid-item">State Number 5</button>
                    <button type="button" class="grid-item">State Number 6</button>
                    <button type="button" class="grid-item">State Number 7</button>
                    <button type="button" class="grid-item">State Number 8</button>
                    <button type="button" class="grid-item">State Number 9</button>
                    <button type="button" class="grid-item">State Number 10</button>
                </div>
            </div>
            <!-- Step 2 -->
            <div class="form-step">
                <div class="progress-bar">
                    <div class="progress" style="width: 20%;"></div>
                </div>
                <h2>What are your language skills in English?</h2>
                <div class="grid-container">
                    <button type="button" class="grid-item">A1-Beginner</button>
                    <button type="button" class="grid-item">A2-Pre-intermediate</button>
                    <button type="button" class="grid-item">B1-Intermediate</button>
                    <button type="button" class="grid-item">B2-Upper-Intermediate</button>
                    <button type="button" class="grid-item">C1-Advanced</button>
                    <button type="button" class="grid-item">C2-Proficient</button>
                </div>
                <button type="button" class="prev-btn">Previous</button>
            </div>
            <!-- Step 3 -->
            <div class="form-step">
                <div class="progress-bar">
                    <div class="progress" style="width: 40%;"></div>
                </div>
                <h2>What are your language skills in German?</h2>
                <div class="grid-container">
                    <button type="button" class="grid-item">A1-Beginner</button>
                    <button type="button" class="grid-item">A2-Pre-intermediate</button>
                    <button type="button" class="grid-item">B1-Intermediate</button>
                    <button type="button" class="grid-item">B2-Upper-Intermediate</button>
                    <button type="button" class="grid-item">C1-Advanced</button>
                    <button type="button" class="grid-item">C2-Proficient</button>
                </div>
                <button type="button" class="prev-btn">Previous</button>
            </div>
            <!-- Step 4 -->
            <div class="form-step">
                <div class="progress-bar">
                    <div class="progress" style="width: 60%;"></div>
                </div>
                <h2>What is your situation?</h2>
                <div class="grid-container">
                    <button type="button" class="grid-item">Unemployed</button>
                    <button type="button" class="grid-item">Soon to be Unemployed</button>
                    <button type="button" class="grid-item">Employed</button>
                    <button type="button" class="grid-item">Student</button>
                </div>
                <button type="button" class="prev-btn">Previous</button>
            </div>
            <!-- Step 5 -->
            <div class="form-step">
                <div class="progress-bar">
                    <div class="progress" style="width: 80%;"></div>
                </div>
                <h2>Are you registered with the government office?</h2>
                <div class="grid-container">
                    <button type="button" class="grid-item">Yes</button>
                    <button type="button" class="grid-item">No</button>
                </div>
                <button type="button" class="prev-btn">Previous</button>
            </div>
            <!-- Step 6 -->
            <div class="form-step">
                <div class="progress-bar">
                    <div class="progress" style="width: 100%;"></div>
                </div>
                <h2>Confirm your submission</h2>
                <p>Are you sure you want to submit the survey?</p>
                <button type="submit" class="submit-btn">Submit</button>
                <button type="button" class="prev-btn">Previous</button>
            </div>
            <!-- Success Message -->
            <div class="form-step" id="success-message">
                <h2 class="success-text">Your Survey Submitted Successfully</h2>
            </div>
        </form>
    </div>
    <script src="script.js"></script>
</body>

</html>

Step 2: Styling the Survey Form with CSS

Next, we’ll style our form to ensure it’s visually appealing. We’ll use CSS Grid for layout and keyframe animations for smooth transitions.

Below is the CSS for our form:

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

body,
html {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f2f5;
}

.container {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  overflow: hidden;
  position: relative;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}

.grid-item {
  padding: 15px;
  background: #004754;
  color: #fff;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.3s ease;
  width: 200px;
}

.grid-item:hover {
  background: #bebd00;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  border: none;
  cursor: pointer;
  transition: background 0.3s ease;
}

.prev-btn {
  background: #bebd00;
  color: #fff;
}

.prev-btn:hover {
  background: #5a6268;
}

.submit-btn {
  background: #bebd00;
  color: #fff;
}

.submit-btn:hover {
  background: #e0a800;
}

.form-step {
  display: none;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.form-step.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

.form-step.active-enter {
  animation: slideInFromRight 0.5s forwards;
}

.form-step.active-leave {
  animation: slideOutToLeft 0.5s forwards;
}

.progress-bar {
  width: 100%;
  background: #bebd00;
  height: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  overflow: hidden;
}

.progress {
  height: 100%;
  background: #004754;
  border-radius: 5px;
  transition: width 0.5s ease;
}
.success-text {
  color: green;
  text-align: center;
  margin-top: 20px;
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOutToLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes progress-animation {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

Step 3: Adding Functionality with JavaScript

Finally, we’ll add JavaScript to handle the transitions between form steps and display the success message upon submission.

Here’s the JavaScript for our form:

JavaScript Code
document.addEventListener("DOMContentLoaded", function () {
    const prevBtns = document.querySelectorAll(".prev-btn");
    const gridItems = document.querySelectorAll(".grid-item");
    const formSteps = document.querySelectorAll(".form-step");
    const progress = document.querySelector(".progress");
    let formStepsNum = 0;

    gridItems.forEach((item) => {
        item.addEventListener("click", () => {
            formSteps[formStepsNum].classList.add("active-leave");
            formSteps[formStepsNum].classList.remove("active-enter");
            formStepsNum++;
            updateFormSteps();
            updateProgressBar();
        });
    });

    prevBtns.forEach((btn) => {
        btn.addEventListener("click", () => {
            formSteps[formStepsNum].classList.add("active-leave");
            formSteps[formStepsNum].classList.remove("active-enter");
            formStepsNum--;
            updateFormSteps();
            updateProgressBar();
        });
    });

    function updateFormSteps() {
        formSteps.forEach((formStep, index) => {
            if (index === formStepsNum) {
                formStep.classList.add("active");
                formStep.classList.add("active-enter");
                formStep.classList.remove("active-leave");
            } else {
                formStep.classList.remove("active");
                formStep.classList.remove("active-enter");
                formStep.classList.remove("active-leave");
            }
        });
    }

    function updateProgressBar() {
        progress.style.width = (formStepsNum / (formSteps.length - 2)) * 100 + "%";
        progress.style.animation = 'progress-animation 0.5s ease';
    }

    // Handle form submission
    const surveyForm = document.getElementById("surveyForm");
    surveyForm.addEventListener("submit", (e) => {
        e.preventDefault();
        formStepsNum++;
        updateFormSteps();
        document.getElementById("success-message").classList.add("active");
        updateProgressBar();
    });
});

Progress Bar Explanation

In this Multi Steps Survey Form we have used different css features to make it more beautiful and user friendly. I would like to mention about one feature, that is Progress Bar. Let me briefly explain about the Progress bar that I have used in this survey form.

Why Progress Bar?

The progress bar provides a visual indicator to users, showing them how far they’ve progressed through the survey and how much further they need to go. This can help improve user engagement and completion rates by giving a clear sense of progress.

HTML Structure for the Progress Bar

In each step of our form, the progress bar is defined as follows:

<div class="progress-bar">
    <div class="progress" style="width: 20%;"></div>
</div>
The progress-bar div acts as the container.
The progress div inside it represents the filled portion of the bar. The width of this div is dynamically updated to reflect the user's progress.

CSS Styling for the Progress Bar

Here’s the CSS that styles the progress bar:

.progress-bar {
    width: 100%;
    background: #e9ecef;
    height: 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    overflow: hidden;
}

.progress {
    height: 100%;
    background: #007bff;
    border-radius: 5px;
    transition: width 0.5s ease;
}
.progress-bar provides the full width background and the container's styling.
.progress is the animated part, filling the progress bar with the specified background color. 
The transition property is used to animate the width change smoothly.

JavaScript for Dynamic Updates

The JavaScript code dynamically updates the progress bar’s width based on the user’s current step. Here’s the key part of the JavaScript:

document.addEventListener("DOMContentLoaded", function () {
    const formSteps = document.querySelectorAll(".form-step");
    const progress = document.querySelector(".progress");
    let formStepsNum = 0;

    function updateProgressBar() {
        const totalSteps = formSteps.length - 2; // Excluding the success message step
        const progressPercent = (formStepsNum / totalSteps) * 100;
        progress.style.width = progressPercent + "%";
        progress.style.animation = 'progress-animation 0.5s ease';
    }

    // Handle click events on grid items and previous buttons
    // ...

    // Handle form submission
    // ...
});

Detailed Breakdown:

  1. Initial Setup:
    • formSteps holds all the form step elements.
    • progress is the progress bar element.
    • formStepsNum tracks the current step.
  2. Update Progress Bar Function:
    • The function updateProgressBar calculates the percentage of progress based on the current step.
    • totalSteps is calculated by subtracting 2 from the total number of form steps to exclude the success message step.
    • progressPercent is computed as (formStepsNum / totalSteps) * 100.
    • The progress element’s width is updated with progressPercent.
  3. Animation:
    • The line progress.style.animation = ‘progress-animation 0.5s ease’; ensures a smooth transition as the width of the progress bar changes.

Example Calculation:

  • Suppose there are 6 steps (including the success message).
  • If the user is on the first step (formStepsNum = 0), the progress is (0 / 5) * 100 = 0%.
  • If the user moves to the third step (formStepsNum = 2), the progress is (2 / 5) * 100 = 40%.

Integrating the Progress Bar with Form Navigation

To update the progress bar as the user navigates through the form, the updateProgressBar function is called whenever the user clicks a button to move to the next or previous step.

Here’s how it fits into the event listeners:

gridItems.forEach((item) => {
    item.addEventListener("click", () => {
        formSteps[formStepsNum].classList.add("active-leave");
        formSteps[formStepsNum].classList.remove("active-enter");
        formStepsNum++;
        updateFormSteps();
        updateProgressBar();
    });
});

prevBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
        formSteps[formStepsNum].classList.add("active-leave");
        formSteps[formStepsNum].classList.remove("active-enter");
        formStepsNum--;
        updateFormSteps();
        updateProgressBar();
    });
});

Next Step: When a grid item is clicked, formStepsNum is incremented, and both updateFormSteps and updateProgressBar are called.

Previous Step: When a previous button is clicked, formStepsNum is decremented, and both updateFormSteps and updateProgressBar are called.

The progress bar in our multi-step survey form is an essential UI element that enhances user experience by providing clear feedback on their progress. By combining HTML, CSS, and JavaScript, we’ve created a dynamic, animated progress indicator that updates smoothly as users navigate through the survey steps. This approach not only makes the form visually appealing but also ensures a more engaging and user-friendly interaction.

Conclusion

With the code above, you have a fully functional, visually appealing multi-step survey form. Each step transitions smoothly with custom animations, and the progress bar gives users a clear indication of their progress. Finally, a success message is displayed upon submission, ensuring users know their survey was submitted successfully. This form not only looks great but also enhances the overall user experience, making data collection a breeze.

Try implementing this form on your website, or add more steps on it and watch how it transforms the user engagement with your surveys!

Similar Posts

How to Create an Interactive 3D Cube Using Only JavaScript, CSS and HTML
| | | | |

How to Create an Interactive 3D Cube Using Only JavaScript, CSS and HTML

ByPrem Bahadur Chand

Creating an interactive 3D cube using HTML, CSS, and JavaScript is an excellent project for sharpening your coding skills. This hands-on project not only offers a deeper understanding of core web technologies but also provides a fun and engaging way to explore the potential of modern web development. Let’s dive into the details of this…

Create a Simple Responsive Table Of Contents (TOC) Template For An Article Using HTML, CSS, and JavaScript
| | | |

Create a Simple Responsive Table Of Contents (TOC) Template For An Article Using HTML, CSS, and JavaScript

ByPrem Bahadur Chand

On the internet, sharing information in blog articles is very important. We can help users easily find what they want to read by using a Table of Contents (TOC). It’s similar to the map in a book, showing users where to go. Today, we’ll learn how to create a TOC for a blog using HTML,…

Make a responsive navigation with html, css, and javascript for your Portfolio Website
| | |

Make a responsive navigation with html, css, and javascript for your Portfolio Website

ByPrem Bahadur Chand

In the world of web development, creating a visually appealing and responsive portfolio website is a key step to showcasing your skills and projects. In this article, we’ll guide you through creating a responsive navigation and hero section for your portfolio website. We’ll also add a theme toggle, allowing users to switch between dark and…

Create a Responsive Card Slider Using HTML, CSS, and Vanilla JavaScript
| | | | |

Create a Responsive Card Slider Using HTML, CSS, and Vanilla JavaScript

ByPrem Bahadur Chand

Sliders are an important part of web design. They help show pictures or information beautifully and interactively. If you’re new to making a card slider, it can teach you basic web development ideas like changing the page and making it fit on different screens, as well as it can help you develop fundamental web development…

Learn to build a simple responsive quiz app Using Javascript, html and css
| | | |

Learn to build a simple responsive quiz app Using Javascript, html and css

ByPrem Bahadur Chand

Why it is important to build a simple quiz app using HTML, CSS, and JS? In the journey of web development, creating a simple quiz app with HTML, CSS, and JavaScript can be a great way to learn Web Development. Learning web development might sound tricky, but it can be fun! Imagine creating a simple…