How to Create a Form with Multiple Steps using CSS and JavaScript ? Last Updated : 03 Jun, 2024 Comments Improve Suggest changes Like Article Like Report A multi-step form divides a long form into smaller, more manageable sections or steps. This makes it easier for users to fill out and makes the form less intimidating. We will explore the approach to building a multi-step form using CSS and JavaScript. ApproachCreate a form container. Inside the form create multiple <div> elements for adding different steps to the form.Add related input fields in each step. Create a container for buttons that hold buttons for navigation between steps like next, previous, and submit.Initially hide all steps except the active one. Add JavaScript for interactivity to the form.Create an updateButtons() function which will determine which buttons to display. It will adjust the visibility of the "Previous", "Next" and "Submit" buttons based on the current step.Add Event listeners to the "Next" and "Previous" buttons to handle navigation between steps.Create the validateForm() function which checks if the inputs in the current step are valid.Example: This example shows how to create a multi-step form using CSS and JavaScript. 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> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f5f5; margin: 0; } form { width: 100%; max-width: 500px; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .step { display: none; } .step.active { display: block; } h2 { margin-top: 0; } label { display: block; margin: 10px 0 5px; } input, textarea { width: 98%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; } .button-container { overflow: auto; margin-top: 20px; text-align: right; } .button-container button { padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px; } button.prev { background-color: #f1f1f1; float: left; margin-left: 62%; } button.next { background-color: #4CAF50; color: white; float: right; } button[type="submit"] { background-color: #4CAF50; color: white; float: right; } </style> </head> <body> <form id="multiStepForm"> <div class="step active"> <h2>Step 1: Name</h2> <label for="firstName"> First Name: </label> <input type="text" id="firstName" name="firstName"> <label for="lastName"> Last Name: </label> <input type="text" id="lastName" name="lastName"> </div> <div class="step"> <h2>Step 2: Contact details</h2> <label for="text">Email:</label> <input type="email" id="email" name="email"> <label for="contactNumber"> Contact Number: </label> <input type="tel" id="contactNumber" name="contactNumber"> </div> <div class="step"> <h2>Step 3: Address detail</h2> <label for="address">Address:</label> <textarea id="address" name="address" rows="6" placeholder="Detailed Address" required> </textarea> </div> <div class="button-container"> <button type="button" class="prev"> Previous </button> <button type="button" class="next"> Next </button> <button type="submit" style="display: none;"> Submit </button> </div> </form> <script> document.addEventListener('DOMContentLoaded', function () { const form = document.getElementById('multiStepForm'); const steps = form.querySelectorAll('.step'); const prevButton = form.querySelector('.prev'); const nextButton = form.querySelector('.next'); let currentStep = 0; updateButtons(); nextButton.addEventListener('click', () => { if (validateForm()) { steps[currentStep].classList .remove('active'); currentStep++; steps[currentStep].classList .add('active'); updateButtons(); } }); prevButton.addEventListener('click', () => { steps[currentStep].classList .remove('active'); currentStep--; steps[currentStep].classList .add('active'); updateButtons(); }); form.addEventListener('submit', (event) => { if (!validateForm()) { event.preventDefault(); } }); function validateForm() { const currentInputs = steps[currentStep] .querySelectorAll('input, textarea'); let valid = true; currentInputs.forEach(input => { if (!input.checkValidity()) { input.reportValidity(); valid = false; } }); return valid; } function updateButtons() { if (currentStep === 0) { prevButton.style.display = 'none'; } else { prevButton.style.display = 'inline-block'; } if (currentStep === steps.length - 1) { nextButton.style.display = 'none'; form.querySelector('button[type="submit"]') .style.display = 'inline-block'; } else { nextButton.style.display = 'inline-block'; form.querySelector('button[type="submit"]') .style.display = 'none'; } } }); </script> </body> </html> Output: Output Comment More infoAdvertise with us Next Article How to Create a Form with Multiple Steps using CSS and JavaScript ? yuvrajghule281 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to create a Popup Form using HTML CSS and JavaScript ? To create a popup form using JavaScript, you can design a hidden overlay that becomes visible when triggered. We will use HTML for form elements, CSS for styling, and JavaScript to toggle the visibility of the overlay. This allows for a user-friendly and interactive way to display forms on your webp 3 min read How to create a Multi Step Progress Bar in HTML CSS and JavaScript? In this article, we will create a multi-step progress bar. A Multi-Step Progress Bar is a user interface element created with HTML, CSS, and JavaScript. It guides users through a series of steps or stages, visually displaying their progress and allowing step-by-step navigation in a multi-step proces 3 min read How to create a FAQ page using JavaScript ? The frequently Asked Questions (FAQ) section is one of the most important sections of any website, especially if you are providing services. If you want to learn how to make it by yourself then welcome! today we'll learn how to create a FAQ page using JavaScript. Functionalities required in a FAQ pa 6 min read How to Create a Form Dynamically with the JavaScript? The task is to create an HTML form dynamically with the help of JavaScript. There are two approaches that are discussed below.Approach 1: Use document.createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the <form> 3 min read How to create a dynamic report card using HTML, CSS and JavaScript ? We have to build a website where you can upload your student data like their name and marks in different subjects. And after uploading it will insert the student data in the table as well as, it will show the total marks, average, and pass/fail status. The implementation is done by using HTML and Ja 2 min read How to create a Responsive Inline Form using CSS ? When the browser window is resized, the labels and inputs will stack on top of each other for smaller screens. To create a responsive inline form using CSS, use a container with flexible styling, such as Flexbox or Grid, to arrange form elements horizontally. Utilize media queries to adjust the layo 3 min read Create a Contact Form using HTML CSS & JavaScript A contact form is a web form used to collect user information and messages, facilitating communication between visitors and site owners. It is essential for feedback, inquiries, and support. Create a contact form using HTML for structure, CSS for styling, and JavaScript for validation and submission 3 min read How to Create Horizontal and Vertical Tabs using JavaScript ? In this article, we will create Horizontal and Vertical Tabs using JavaScript.Tabs can be used for displaying large amounts of content on a single page in an organized manner. We can design single-page tabs using HTML, CSS, and JavaScript. HTML elements are used to design the structure of the tabs a 7 min read How to create a Color Generator using HTML CSS and JavaScript ? In this article, we will develop a Color Generator application using HTML, CSS, and JavaScript.In this application, we have created the Multi Format color generator. Users can select Colour Types like RGB, HEX, and CMYK. Use the sliders to customize the color and Inout field in case of HEX and color 6 min read How to Create a Slider using HTML and CSS? A slider (also called a slideshow) is a sequence of content frames that users can navigate through. Creating a slider using just HTML and CSS is efficient because it doesn't require JavaScript, making it lightweight and fast. The slider can contain images, text, or any other content you want to show 3 min read Like