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:
Design a Survey Form using HTML CSS and JavaScript
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.