Create a Multi Step Form in Bootstrap 5 & JavaScript Last Updated : 29 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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.ApproachHTML 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> Output: Create a Multi Step Form in Bootstrap 5 & JavaScript Comment More infoAdvertise with us Next Article Must Do Coding Questions - Topic-wise H haneesr8pj Follow Improve Article Tags : Project JavaScript Web Technologies Dev Scripter JavaScript-Projects Dev Scripter 2024 +2 More Similar Reads Interview PreparationInterview Preparation For Software DevelopersMust Coding Questions - Company-wise Must Do Coding Questions - Topic-wiseCompany-wise Practice ProblemsCompany PreparationCompetitive ProgrammingSoftware Design-PatternsCompany-wise Interview ExperienceExperienced - Interview ExperiencesInternship - Interview ExperiencesPractice @GeeksforgeeksProblem of the DayTopic-wise PracticeDifficulty Level - SchoolDifficulty Level - BasicDifficulty Level - EasyDifficulty Level - MediumDifficulty Level - HardLeaderboard !!Explore More...Data StructuresArraysLinked ListStackQueueBinary TreeBinary Search TreeHeapHashingGraphAdvance Data StructuresMatrixStringAll Data StructuresAlgorithmsAnalysis of AlgorithmsSearching AlgorithmsSorting AlgorithmsPattern SearchingGeometric AlgorithmsMathematical AlgorithmsRandomized AlgorithmsGreedy AlgorithmsDynamic ProgrammingDivide & ConquerBacktrackingBranch & BoundAll AlgorithmsProgramming LanguagesCC++JavaPythonC#Go LangSQLPHPScalaPerlKotlinWeb TechnologiesHTMLCSSJavaScriptBootstrapTailwind CSSAngularJSReactJSjQueryNodeJSPHPWeb DesignWeb BrowserFile FormatsComputer Science SubjectsOperating SystemsDBMSComputer NetworkComputer Organization & ArchitectureTOCCompiler DesignDigital Elec. & Logic DesignSoftware EngineeringEngineering MathematicsData Science & MLComplete Data Science CourseData Science TutorialMachine Learning TutorialDeep Learning TutorialNLP TutorialMachine Learning ProjectsData Analysis TutorialTutorial LibraryPython TutorialDjango TutorialPandas TutorialKivy TutorialTkinter TutorialOpenCV TutorialSelenium TutorialGATE CSGATE CS NotesGate CornerPrevious Year GATE PapersLast Minute Notes (LMNs)Important Topic For GATE CSGATE CoursePrevious Year Paper: CS exams Like