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. 
<!-- 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>®</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 😀
</label>
<label for="average">
<input type="radio" id="average" name="rating" value="average"> Average 😑
</label>
<label for="bad">
<input type="radio" id="bad" name="rating" value="bad"> Bad 😠
</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
and we’ll done. Happy coding !
.