Design a Survey Form using HTML CSS and JavaScript Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report In this article, we are going to implement a survey form using HTML, CSS, and JavaScript. In this form, we will get data about the interest of people in sports. In this implementation, the data will be stored in a CSV file after successful form validations. Preview of final output: Let us have a look at how the final output will look like. Form Snapshot PrerequisitesHTMLCSSJavaScript Approach to create Survey ApplicationCreate a html form structure using tags like <form>, <input>, <label> etc.Add classes and ids to each element for accessing in CSS and JavaScript.create a CSS file (style.css) and link it to the html file. Add styles to the form like background-color, margin, padding,width,height etc. And make it look appealingCreate a JS file (script.js) and link it in html fileInside Js file , first add a event Listener to the form element. So that when the form is submitted the following function will be called.Inside the Function , First validate the name ( whether it is fully english alphabets ) and age ( contains valid numeric value ). Then The form data is converted to csv format and then it is made to be downloaded as a Excel Sheet. Example: This example create a survey form using HTML, CSS, and JavaScript. script.js: This file contains the functionalities of the applicationindex.html: This file contains the skeleton structure of the applicationstyle.css: This file contains the styling of the document  JavaScript // Script.js // Adding event listener to the form element document .getElementById("surveyForm") .addEventListener( "submit", function (event) { // PreventDefault() is used to avoid // Refreshing of browser while submit event.preventDefault(); let nameField = document.getElementById( "name" ); let ageField = document.getElementById( "age" ); let errorText = document.getElementById( "errorText" ); let name = nameField.value; let age = ageField.value; // Creating a regular expression for // Name field let Regex = /^[A-Za-z ]+$/; // If name does not matches the // Regular expression if (!name.match(Regex)) { nameField.classList.add( "error" ); errorText.innerHTML = `Name field should only contain English alphabets and spaces`; errorText.classList.add( "errorText" ); return; } // Check whether age is between 1 and 150 else if ( isNaN(age) || age < 1 || age > 150 ) { ageField.classList.add( "error" ); errorText.innerHTML = `Age should only contain valid values ( 1 - 150 )`; errorText.classList.add( "errorText" ); return; } // Removing red border in name field if ( nameField.classList.contains( "error" ) ) nameField.classList.remove( "error" ); // Removing red border in age field if ( ageField.classList.contains( "error" ) ) ageField.classList.remove( "error" ); // Adding success message and styles errorText.innerHTML = "Submitted Successfully"; errorText.classList.add( "successText" ); const formData = new FormData( event.target ); const formValues = {}; // Storing each values in the object formData.forEach( (value, key) => { formValues[key] = value; } ); // Calling convert function const csvContent = convertToCSV( formValues ); const blob = new Blob( [csvContent], { type: "text/csv" } ); // Creating a link for downloading // Excel sheet const link = document.createElement( "a" ); link.href = window.URL.createObjectURL( blob ); link.download = "survey_data.csv"; link.click(); // Reseting the form after certain // Timeout 2000ms => 2s setTimeout( document .getElementById( "surveyForm" ) .reset(), 2000 ); } ); // Function to convert object to csv function convertToCSV(objArr) { const array = typeof objArr !== "object" ? JSON.parse(objArr) : objArr; let result = ""; // Add commas to make it as csv const header = Object.keys(array).join(",") + "\n"; result += header; for (const item in array) { if ( array.hasOwnProperty(item) ) { result += array[item] + ","; } } result = result.slice(0, -1); result += "\n"; return result; } HTML <!-- Index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Linking css file --> <link rel="stylesheet" href="style.css"> <title>Survey Form</title> </head> <body> <!-- Creating the form container --> <div class="container"> <h1>Survey Form</h1> <!-- Contains error --> <h4 id="errorText"></h4> <!-- Form element --> <form id="surveyForm"> <label for="name"> Name: </label><br> <input type="text" id="name" name="name" required><br> <label for="age"> Age: </label><br> <input type="number" id="age" name="age" required><br> <label> Favorite type of Sport </label><br> <input type="radio" id="indoor" name="type" value="Indoor" required> <label for="indoor"> Indoor </label><br> <input type="radio" id="outdoor" name="type" value="Outdoor" required> <label for="outdoor"> Outdoor </label><br> <input type="radio" id="both" name="type" value="Both" required> <label for="both"> Both </label><br> <label for="favourite-sport"> Favorite Sport to Watch: </label><br> <input type="text" id="favorite-sport" name="favorite-sport" required><br> <label for="favorite--sport"> Favorite Sport to Play: </label><br> <input type="text" id="favorite--sport" name="favorite--sport" required><br> <label for="favorite-sport-person"> Favorite Sports-person: </label><br> <input type="text" id="favorite-sport-person" name="favorite-sport-person" required><br> <label for="feedback"> Your Thoughts on Sports (optional): </label><br> <input type="textarea" id="feedback" name="feedback"><br> <button type="submit"> Submit </button> </form> </div> <!-- linking javascript file --> <script src="script.js"></script> </body> </html> CSS /* Style.css */ body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #197819; } /* Form container */ .container { max-width: 600px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { text-align: center; } label { margin-top: 1rem; } input { padding: 10px; box-sizing: border-box; margin: 1.2rem 0; } /* Styling specific input types */ input[type="text"], input[type="number"] { width: 100%; } input[type="textarea"] { width: 100%; height: 10rem; } button { width: 100%; padding: 10px; background-color: #4caf50; color: white; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #45a049; } .error { border: 3px solid red; } .errorText { padding: 1rem; border: 2px solid red; box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px; font-size: 1.2rem; font-family: "Lucida Sans", "Lucida Sans Regular", sans-serif; } .successText { padding: 1rem; border: 4px solid green; box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px; font-size: 1.2rem; font-family: "Lucida Sans", "Lucida Sans Regular", sans-serif; } Output: Comment More infoAdvertise with us Next Article Design a Survey Form using HTML CSS and JavaScript venkateshk1220 Follow Improve Article Tags : HTML JavaScript-Projects Geeks Premier League 2023 Similar Reads Design a Unit Converter using HTML CSS and JavaScript In this article, we will be developing an interactive and styled unit converter using HTML, CSS, and JavaScript.In this application, we have a select category option box in which different types of units are specified, like temperature, area, weight, length, and time. As per the user selection, the 7 min read Design a Tip Calculator using HTML, CSS and JavaScript The tip is the money given as a gift for good service to the person who serves you in a restaurant. In this project, a simple tip calculator is made that takes the billing amount, type of service, and the number of persons as input. As per the three inputs, it generates a tip for the serving person. 4 min read Design a Subscription Page using HTML and CSS In this article, we will see how to design a Subscription Page using HTML and CSS. The subscription page is a popup that has an input field for email ID and a button to subscribe the newsletter. We create a card that have an input box and a submit button, enabling users to subscribe to any newslette 2 min read Dynamic Resume Creator using HTML CSS and JavaScript Creating a well-structured and professional resume can be time-consuming and difficult for many job seekers. Challenges like formatting, organizing details, and making the resume stand out are common. To solve this issue, a Resume Creator project was developed to simplify the process by offering an 5 min read Design a Job Search Portal using HTML and CSS This article will show how to Job Portal static website using HTML, CSS, and JavaScript. We generally see these effects in portfolios of professionals. We have written a code that creates a customized job portal website. Users can easily search for job opportunities by category, and all available jo 3 min read 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 Create a Guestbook using HTML CSS and JavaScript This article will show how to create a GuestBook using HTML, CSS, and JavaScript that allows users to add their name, mobile number, room number, and address to the guestbook. We have written a code that generates a card with multiple input boxes and a submit button to store the guest's information 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 Design Responsive Flower Store in HTML CSS & JavaScript Over 80% of online shoppers use mobile devices, so building a responsive design is essential. In this article, you'll learn how to create a beautiful and mobile-friendly flower store using HTML, CSS, and JavaScriptâperfect for beginners and intermediate developers looking to enhance their frontend s 15+ min read Design a Student Attendance Portal in HTML CSS & JavaScript The Student Attendance Portal is a web application that allows users to mark attendance for students in different classes, add class and students according to requirements, providing a user-friendly interface to update and visualize attendance records. Final Output PreviewApproach:In the first step, 10 min read Like