Survey Form - Build a Survey Form

Finally completed the Survey Form Project.

The first time I finished, I simply replicated the demo project.

However, I rewrote it several times afterwards. Now, I feel like it’s satisfactory.

Feedback is needed and is welcomed. :slightly_smiling_face:

<!-- HTML file -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Customer Survey/Feedback Form">
    <link rel="stylesheet" href="./styles.css">
    <title>Survey Form</title>
</head>

<body>
    <main>
        <!-- Header -->
        <header>
            <h1 id="title">XYZ Company<sup>&reg;</sup> Survey Form</h1>
            <p id="description">Thank you for taking the time to help us improve the platform.</p>
        </header>

        <!-- Form -->
        <form id="survey-form" action="#" method="get">

<!-- Contact Information -->
            <fieldset>
                <legend>Contact Information</legend>
                <div class="form-group">
                    <label id="name-label" for="name">Name
                        <input type="text" id="name" name="name" placeholder="Enter your Name" required>
                    </label>
                    <label id="email-label" for="email">Email
                        <input type="email" id="email" name="email" placeholder="Enter your Email" required>
                    </label>
                    <label id="number-label" for="number">Age
                        <input type="number" id="number" name="age" min="18" max="100" placeholder="Enter your Age">
                    </label>
                    <label id="address-label" for="address">Address
                        <input type="text" id="address" name="address" placeholder="Street, State, Country, PinCode">
                    </label>
                </div>
            </fieldset>

<!-- Service Infrmation -->
            <fieldset>
                <legend>Service Information</legend>
                <div class="form-group">

                    <!-- Used <p> element as a label text(in radio and checkbox inputs) for text styling-->
                    <p class="normal-text">Which services are you using?</p>
                    
                    <label for="e-com">
                        <input type="checkbox" id="e-com" name="e-com" value="e-com" checked> E-Commerce service
                    </label>
                    <label for="finance">
                        <input type="checkbox" id="finance" name="finance" value="finance"> Digital Financial Service
                    </label>
                    <label for="stream">
                        <input type="checkbox" id="stream" name="stream" value="stream"> Streaming Service
                    </label>
                    <label for="social-media">
                        <input type="checkbox" id="social-media" name="social-media" value="social-media"> Social Media
                        Service
                    </label>
                    <label for="online-edu">
                        <input type="checkbox" id="online-edu" name="online-edu" value="online-edu"> Online Education
                        Service
                    </label>
                </div>

                <div class="form-group">
                    <label for="dropdown">When was the last time you used the service?
                        <select id="dropdown">
                            <option value="" disabled selected>Select One</option>
                            <option value="1">Today</option>
                            <option value="2">This Week</option>
                            <option value="3">This Month</option>
                            <option value="4">This Year</option>
                        </select>
                    </label>
                </div>
            </fieldset>

<!-- Service Feedback -->
            <fieldset>
                <legend>Service Feedback</legend>
                <div class="form-group">

                    <!-- Used <p> element as a label text(in radio and checkbox inputs) for text styling-->
                    <p class="normal-text">How do you rate the selected service?</p>

                    <label for="good">
                        <input type="radio" id="good" name="rating" value="good" checked> Good &#x1f600;
                    </label>
                    <label for="average">
                        <input type="radio" id="average" name="rating" value="average"> Average &#x1f611;
                    </label>
                    <label for="bad">
                        <input type="radio" id="bad" name="rating" value="bad"> Bad &#x1f620;
                    </label>
                </div>

                <div class="form-group">
                    <label for="comments">Any changes or potential improvements.
                        <textarea id="comments" name="comments" cols="30" rows="4"
                            placeholder="Enter your comment here..."></textarea>
                    </label>
                </div>
            </fieldset>
            <button id="submit" type="submit">Submit</button>
            <button id="reset" type="reset" onclick="alert('Reset completed..!')">Reset</button>
        </form>
    </main>
</body>

</html>
<!-- CSS  file -->
html {
    font-size: 17px;
}

body {
    background: linear-gradient(To bottom, #39697aaa, #54747fcc), url(https://source.unsplash.com/mcSDtbWXUZU);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    width: 100%;
}

main {
    /* border: 1px solid red; */
    margin: 3.2em auto 0;
    max-width: 680px;
    min-width: 460px;
    width: 80vw;
}

header {
    /* border: 1px solid limegreen; */
    margin: 0 0 5em 0;
    padding: 0 8px;
}

#title,
#description {
    /* border: 1px solid limegreen; */
    color: white;
    margin: 0 0 0.5em;
    text-align: center;
}

#title {
    font-weight: 500;
}

#description {
    font-size: 1.25rem;
    font-style: italic;
    font-weight: lighter;
}

#survey-form {
    /* border: 1px solid blue; */
    background-color: #a9a9a99f;
    border-radius: 5px;
    padding: 2.25em;
}

fieldset {
    border: 1px solid #000;
    margin: 0 0 2.55em;
    padding: 0 1em;
}

legend {
    background-color: #565656;
    font-size: 1.1rem;
    color: white;
    padding: 6px 10px;
}

label {
    /* border: 1px solid green; */
    font-size: 1.1rem;
    display: block;
    margin: 0.6em 0;
}

input, select, textarea {
    accent-color: #005673;
    background-color: #d0e2e8;
    border: none;
    border-radius: 3px;
    box-sizing: border-box;
    font-size: 1rem;
    margin: 10px 0 0 0;
    width: 100%;
    min-height: 2.1em;
}

.form-group {
    /* border: 1px solid brown; */
    margin: 1.85em 0 1em;
}

input[type="radio"], input[type="checkbox"] {
    /* border: 2px solid red; */
    display: inline-block;
    margin: -2px 5px 0 5px;
    vertical-align: middle;
    width: 1.1em;
}

.normal-text {
    font-size: 1.1rem;
    margin: 0 0 0.65em;
}

button {
    border: none;
    border-radius: 6px;
    color: #fff;
    display: block;
    font-size: 1.1rem;
    margin: 15px auto 0;
    min-width: 200px;
    height: 2.6rem;
    width: 20vw;
}

button[type="submit"] {
    background-color: #26353a;
}

button[type="reset"] {
    background-color: #414141;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0

Challenge Information:

Survey Form - Build a Survey Form

1 Like

Hey!
Congratulations :clap::tada: and we’ll done. Happy coding !

3 Likes

Thank you so much. :slightly_smiling_face:

2 Likes

Congratulations @Camper_404 :partying_face:

3 Likes

Thank you. @stephenmutheu :slightly_smiling_face:

Congratulations on completing your Survey Project to the point you feel comfortable with it, @Camper_404 !

Wishing much more good progress!

2 Likes

Thank you for your kind words! @EarthDust :slightly_smiling_face:

I am learning so much here on FCC.

1 Like

Yes, I’m glad that I found FCC. And I’m trying my best to keep up @anon42932716

1 Like

Nicely done! Why don’t you put it into a Codepen so we can get a visual of it, it’s pretty easy. You could just screenshot too.

1 Like

wow!
amazing, congratulations :confetti_ball: :confetti_ball: on your completion of the survey form project :man_student:t6:.
I wish you goodluck as you continue. :pray:t4:

2 Likes

Thank you. :slightly_smiling_face: @Joseph1205 I will use CodePen for my next projects.

Thank you. . . :slightly_smiling_face: @Glory1

1 Like