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.
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 );
} h 1 {
text-align : center ;
} label { margin-top : 1 rem;
} input { padding : 10px ;
box-sizing: border-box;
margin : 1.2 rem 0 ;
} /* Styling specific input types */ input[type= "text" ],
input[type= "number" ] {
width : 100% ;
} input[type= "textarea" ] {
width : 100% ;
height : 10 rem;
} 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 : 1 rem;
border : 2px solid red ;
box-shadow: rgba( 149 , 157 , 165 , 0.2 )
0px 4px 12px ;
font-size : 1.2 rem;
font-family : "Lucida Sans" ,
"Lucida Sans Regular" ,
sans-serif ;
} .successText { padding : 1 rem;
border : 4px solid green ;
box-shadow: rgba( 149 , 157 , 165 , 0.2 )
0px 4px 12px ;
font-size : 1.2 rem;
font-family : "Lucida Sans" ,
"Lucida Sans Regular" ,
sans-serif ;
} |
Output: