Design a Survey Form using HTML CSS and JavaScript
Last Updated :
28 Apr, 2025
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
Prerequisites
Approach to create Survey Application
- Create 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 appealing
- Create a JS file (script.js) and link it in html file
- Inside 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 application
- index.html: This file contains the skeleton structure of the application
- style.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:

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