Creating a survey form helps in understanding the basics of web development. A responsive Survey Form can be designed using HTML and CSS using different input types such as text fields, checkboxes, and radio buttons to collect user responses.
Features of the Survey Form
- Survey Form Interface: We will design a simple form where users can easily input their responses using text fields, checkboxes, and radio buttons.
- User-Friendly Design: The form will be visually appealing and easy to navigate, ensuring a smooth user experience.
- Data Collection: The form will gather user responses in an organized way, ready for submission.
- Responsive Layout: The form will be styled to adapt to different screen sizes, ensuring it looks great on both desktop and mobile devices.
Survey Form - HTML and CSS Code
This survey form has a simple and flexible design that works well on any device. It includes different input options like text fields, checkboxes, and radio buttons, making it easy to fill out. The form also looks nice and has smooth effects, making it easy to use.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>GeeksforGeeks Survey Form</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">Name</label>
<input type="text" id="name" placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">Email</label>
<input type="email" id="email" placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">Age</label>
<input type="text" id="age" placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">Which option best describes you?</label>
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">Professional</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>Would you recommend GeeksforGeeks to a friend?</label>
<label for="recommed-1">
<input type="radio" id="recommed-1" name="recommed">Yes
</label>
<label for="recommed-2">
<input type="radio" id="recommed-2" name="recommed">No
</label>
<label for="recommed-3">
<input type="radio" id="recommed-3" name="recommed">Maybe
</label>
</div>
<div class="form-control">
<label>Languages and Frameworks known
<small>(Check all that apply)</small>
</label>
<label for="inp-1">
<input type="checkbox" name="inp">C
</label>
<label for="inp-2">
<input type="checkbox" name="inp">C++
</label>
<label for="inp-3">
<input type="checkbox" name="inp">C#
</label>
<label for="inp-4">
<input type="checkbox" name="inp">Java
</label>
<label for="inp-5">
<input type="checkbox" name="inp">Python
</label>
<label for="inp-6">
<input type="checkbox" name="inp">JavaScript
</label>
<label for="inp-7">
<input type="checkbox" name="inp">React
</label>
<label for="inp-8">
<input type="checkbox" name="inp">Angular
</label>
<label for="inp-9">
<input type="checkbox" name="inp">Django
</label>
<label for="inp-10">
<input type="checkbox" name="inp">Spring
</label>
</div>
<div class="form-control">
<label for="comment">Any comments or suggestions</label>
<textarea name="comment" id="comment" placeholder="Enter your comment here"></textarea>
</div>
<!-- Submit Button -->
<button type="submit" value="submit">Submit</button>
</form>
</body>
</html>
/* Styling the Body element */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling .form-control */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling .form-control label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling .form-control input, select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling Radio button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
Output
