Build a Survey Form using HTML and CSS
Last Updated :
21 Apr, 2025
Creating a survey form is a great way to understand the basics of web development. In this tutorial, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML for the structure and CSS for styling.
What We’re Going to Create:
- 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.
Project Preview
Build a Survey Form using HTML and CSSSurvey 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.
index.html
<!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:
Build a Survey Form using HTML and CSSIn this code:
- The form collects user details like name, email, age, role, feedback, and more.
- Uses text, email, and radio button inputs for user data.
- Each input field is labeled for clarity.
- Allows users to select one or multiple options for feedback.
- A button to submit the survey.
- Body Styling: Sets a green background with centered text and a simple font.
- Form Styling: The form has a white background, padding, and a shadow for a clean, modern look.
- Form-Control: Inputs, selects, and text areas are styled for consistency and usability.
- Button Styling: The submit button has a green background, with padding and full width for easy clicking.
- Responsive Layout: The form is centered and adapts to different screen sizes for better user experience.
Conclusion
In this article, we built a simple and attractive survey form using HTML and CSS. The form collects basic information like name, email, and feedback using different types of input fields such as text boxes, radio buttons, and checkboxes. We also added styling to make the form look clean and easy to use.
Similar Reads
How to Create a Website Using HTML and CSS? Creating a website using HTML and CSS is a foundational skill if you are learning web development. HTML (HyperText Markup Language) is used to structure content, while CSS (Cascading Style Sheets) is used for styling, including colors, fonts, margins, and positioning. In this article, we’ll go throu
5 min read
Design a Tribute Page using HTML and CSS Making a tribute page is an Innovative way to honor someone special in your life. In this article, we create a tribute webpage using HTML and CSS. This page has a simple and creative design. It contains a header with a title, a main section with text and images, and a footer for main details or cred
4 min read
Build a Survey Form using HTML and CSS Creating a survey form is a great way to understand the basics of web development. In this tutorial, we will build a Survey Form that allows users to easily submit their responses. The form will include different input types such as text fields, checkboxes, and radio buttons, all designed using HTML
4 min read
Design a Parallax Webpage using HTML and CSS A parallax website includes fixed images in the background that are kept in place and the user can scroll down the page to see different parts of the image. In this article, we are creating a parallax webpage using HTML and CSS. We will use basic tags of HTML like div, paragraph, and heading to writ
4 min read
Design an Event Webpage using HTML and CSS Creating an event webpage is an exciting way to showcase information about an event, including its schedule, speakers, and contact details. What We’re Going to CreateWe’ll create a webpage for a fictional event called "GeeksforGeeks TechCon 2025." This webpage will includeA header introducing the ev
5 min read
Design a Webpage for online food delivery system using HTML and CSS Creating your own online food delivery website is a great way to present a user-friendly platform for customers to browse and order food online. In this project, we’ll design a simple yet effective food delivery website using HTML and CSS.What We’re Going to Create...We’ll develop a straightforward
7 min read
Create a Homepage for Restaurant using HTML , CSS and Bootstrap HTML: HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within the tag which defines the s
6 min read
How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v
7 min read
Design a Webpage like Technical Documentation using HTML and CSS In this article, we will design a webpage-like technical documentation using HTML and CSS . Technical documentation is any document that explains the features of the respective product. In this project, we are going to create technical documentation of C++ by using HTML and CSS. The webpage has a me
9 min read
Create a Music Website Template using HTML, CSS & JavaScript A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact.Step-by-Step Guide to c
3 min read