How to Design a Professional Survey Form with HTML, CSS, and JS

KTim
• April 19, 2026 • 78 Views

How to Design a Professional Survey Form with HTML, CSS, and JS

User feedback is the backbone of any successful website. Whether you’re running a blog, an e-commerce store, or a community hub, knowing what your audience thinks is crucial. In this tutorial, we will design a sleek, dark-themed survey form that is fully functional and easy to integrate into any existing website.

Lesson Overview

What you will learn: How to structure complex forms, style input types, and handle form submissions.
Key concepts: Form validation attributes (required, min, max), CSS transparency (rgba), and preventing default form behavior in JS.
Expected outcome: A responsive, modern survey form with a confirmation alert.

Step 1: Structuring the HTML

A good form requires clear labeling for accessibility. We use various input types, including text, email, number, radio buttons, and checkboxes to gather different types of data.

<div class=”container”>
<h1 id=”title”>OCC Survey Form</h1>
<p id=”description”>Thank you for taking the time to help us improve the site.</p>
<form id=”survey-form”>
<label id=”name-label” for=”name”>Name</label>
<input type=”text” id=”name” required placeholder=”Enter your name”>
<label id=”email-label” for=”email”>Email</label>
<input type=”email” id=”email” required placeholder=”Enter your email”>
<label id=”number-label” for=”number”>Age</label>
<input type=”number” id=”number” required min=”1″ max=”100″ placeholder=”Enter your age”>
<label for=”dropdown”>What is your favorite feature?</label>
<select name=”fav-feature” id=”dropdown” required>
<option disabled selected value>Select your option.</option>
<option value=”challenges”>Challenges</option>
<option value=”community”>Community</option>
</select>
<p>Would you recommend us?</p>
<label><input type=”radio” name=”user-choice” value=”definitely”> Definitely</label>
<p>What should we improve?</p>
<label><input type=”checkbox” value=”frontend”> Front-end Projects</label>
<p>Any suggestions?</p>
<textarea name=”comment” id=”comment” rows=”5″></textarea>
<button id=”submit”>Submit</button>
</form>
</div>

Step 2: Styling with Modern CSS

To make the form stand out against the teal background, we use a semi-transparent black background (rgba(0,0,0,0.8)) for the form container. This creates a high-contrast, modern look.

body {
background-color: teal;
color: #fff;
font-family: Arial, sans-serif;
padding: 20px;
}
.container {
max-width: 500px;
margin: 0 auto;
}
form {
background: rgba(0, 0, 0, 0.8);
padding: 30px;
border-radius: 10px;
box-shadow: 3px 4px 15px rgba(0, 0, 0, 0.5);
}
input, select, textarea {
width: 100%;
margin-top: 10px;
padding: 10px;
border-radius: 5px;
border: none;
}
#submit {
background-color: teal;
color: white;
cursor: pointer;
margin-top: 20px;
font-weight: bold;
}

Step 3: Handling Submission with JavaScript

We use e.preventDefault() to stop the page from refreshing when the user clicks “Submit.” This allows us to show a success message and reset the form without losing the page context.

const form = document.querySelector(‘#survey-form’);
form.addEventListener(‘submit’, (e) => {
e.preventDefault(); // Stop page refresh
alert(“Thanks for your feedback!”);
form.reset(); // Clear the form fields
});

Playground

See the Pen CodePen Demo

Assignment

Task 1
Add a “Phone Number” field to the HTML. Use the appropriate input type and ensure it is required before the form can be submitted.

Task 2
Change the CSS so that the input fields change their border color to teal when the user clicks inside them (use the :focus selector).