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.

Form Snapshot

Prerequisites

• HTML
• CSS
• JavaScript

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: