Horje
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.

995081874

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:

sda


 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
How to Recover Your Google Account or Gmail? How to Recover Your Google Account or Gmail?
Design a Unit Converter using HTML CSS and JavaScript Design a Unit Converter using HTML CSS and JavaScript
Number Sequences Generator using HTML CSS and JavaScript Number Sequences Generator using HTML CSS and JavaScript
How to Remove Users from Groups in Linux? How to Remove Users from Groups in Linux?
How to Rename a Group in Linux? How to Rename a Group in Linux?

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 11



 

Horje