Create a Multi Step Form in Bootstrap 5 & JavaScript

Last Updated : 29 Jul, 2024

Forms are the gateway for interaction between users and web services. As the complexity of data collection increases, so does the need for more user-friendly form interfaces. A multi-step form, by breaking down the data collection process into manageable chunks, enhances user experience and improves form completion rates. We will going to create a multi-step form in Bootstrap5 and JavaScript.

Approach

HTML Structure: Begin with a well-defined HTML structure for the form, including a form container, input fields, and navigation buttons.
Styling with CSS and Bootstrap: Utilize Bootstrap's classes for styling, ensuring responsiveness and user-friendliness. Bootstrap utilities like margin, padding, and flexbox aid in designing layouts and transitions between form steps.
Adding a Progress Bar: Enhance the form with a progress bar, offering users a visual representation of their completion status. This not only motivates users but also provides clarity on their progress through the form.
Implementing Interactivity with JavaScript: JavaScript adds interactivity to the form, enabling logic for step transitions and dynamic display of form sections.

Example: This example shows the implementation of the above-explained approach.

HTML

<!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>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap" rel="stylesheet">
    <!-- Custom CSS -->
    <style>
        body {
            font-family: 'Open Sans', sans-serif;
            background-color: #f8f9fa;
        }

        .container {
            max-width: 500px;
            background-color: #ffffff;
            margin: 40px auto;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.1);
        }

        .step {
            display: none;
        }

        .active {
            display: block;
        }

        input {
            padding: 15px 20px;
            width: 100%;
            font-size: 1em;
            border: 1px solid #e3e3e3;
            border-radius: 5px;
        }

        input:focus {
            border: 1px solid #009688;
            outline: 0;
        }

        .invalid {
            border: 1px solid #ffaba5;
        }

        #nextBtn,
        #prevBtn {
            background-color: #009688;
            color: #ffffff;
            border: none;
            padding: 13px 30px;
            font-size: 1em;
            cursor: pointer;
            border-radius: 5px;
            flex: 1;
            margin-top: 5px;
            transition: background-color 0.3s ease;
        }

        #prevBtn {
            background-color: #ffffff;
            color: #009688;
            border: 1px solid #009688;
        }

        #prevBtn:hover,
        #nextBtn:hover {
            background-color: #00796b;
            color: #ffffff;
        }

        .progress {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="progress">
            <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 0%"
                aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
        </div>

        <div class="step active">
            <p class="text-center mb-4">Step 1 Content</p>
            <div class="mb-3">
                <input type="text" placeholder="Field 1" oninput="this.className = ''" name="field1">
            </div>
        </div>

        <div class="step">
            <p class="text-center mb-4">Step 2 Content</p>
            <div class="mb-3">
                <input type="text" placeholder="Field 2" oninput="this.className = ''" name="field2">
            </div>
        </div>

        <div class="step">
            <p class="text-center mb-4">Step 3 Content</p>
            <div class="mb-3">
                <input type="text" placeholder="Field 3" oninput="this.className = ''" name="field3">
            </div>
        </div>

        <div class="form-footer d-flex">
            <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
            <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
        </div>
    </div>

    <script>
        let currentTab = 0;
        showTab(currentTab);

        function showTab(n) {
            let x = document.getElementsByClassName("step");
            x[n].style.display = "block";
            let progress = (n / (x.length - 1)) * 100;
            document.querySelector(".progress-bar").style.width = progress + "%";
            document.querySelector(".progress-bar").setAttribute("aria-valuenow", progress);
            document.getElementById("prevBtn").style.display = n == 0 ? "none" : "inline";
            document.getElementById("nextBtn").innerHTML = n == x.length - 1 ? "Submit" : "Next";
        }

        function nextPrev(n) {
            let x = document.getElementsByClassName("step");
            if (n == 1 && !validateForm()) return false;
            x[currentTab].style.display = "none";
            currentTab += n;
            if (currentTab >= x.length) {
                resetForm();
                return false;
            }
            showTab(currentTab);
        }

        function validateForm() {
            let valid = true;
            let x = document.getElementsByClassName("step");
            let y = x[currentTab].getElementsByTagName("input");
            for (var i = 0; i < y.length; i++) {
                if (y[i].value == "") {
                    y[i].className += " invalid";
                    valid = false;
                }
            }
            return valid;
        }

        function resetForm() {
            let x = document.getElementsByClassName("step");
            for (var i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            let inputs = document.querySelectorAll("input");
            inputs.forEach(input => {
                input.value = "";
                input.className = "";
            });
            currentTab = 0;
            showTab(currentTab);
            document.querySelector(".progress-bar").style.width = "0%";
            document.querySelector(".progress-bar").setAttribute("aria-valuenow", 0);
            document.getElementById("prevBtn").style.display = "none";
        }
    </script>

</body>

</html>