Article Categories

Selected Reading

Create survey form in HTML and CSS

CSS Web Development HTML

Creating a survey form in HTML and CSS allows you to build interactive forms for collecting user feedback and data. This tutorial demonstrates how to create a professional, responsive survey form with modern styling and interactive elements.

Syntax

/* Basic form styling */
form {
    display: flex;
    flex-direction: column;
}

.form-group {
    margin-bottom: 1rem;
}

input, select, textarea {
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

Complete Survey Form Example

Here's a complete survey form with modern styling and responsive design

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Survey Form</title>
    <style>
        body {
            margin: 40px 0;
            padding: 0;
            background-color: #f0f0f0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        main {
            background-color: #ffffff;
            padding: 30px;
            max-width: 600px;
            margin: 0 auto;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: #333;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        #description {
            color: #666;
            font-style: italic;
            font-size: 1.1rem;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
        }

        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 2px solid #e0e0e0;
            border-radius: 6px;
            font-size: 16px;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }

        input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: #007bff;
        }

        .radio-group, .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        input[type="radio"], input[type="checkbox"] {
            width: auto;
            margin-right: 10px;
        }

        textarea {
            height: 120px;
            resize: vertical;
        }

        button {
            background-color: #007bff;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 6px;
            font-size: 18px;
            cursor: pointer;
            width: 100%;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: #0056b3;
        }

        @media (max-width: 768px) {
            main {
                margin: 20px;
                padding: 20px;
            }
            
            h1 {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <main>
        <header>
            <h1>Product Survey</h1>
            <p id="description">Help us improve by sharing your feedback</p>
        </header>
        
        <form id="survey-form">
            <div class="form-group">
                <label for="name">Full Name</label>
                <input type="text" id="name" name="name" placeholder="Enter your full name" required>
            </div>
            
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" placeholder="Enter your email" required>
            </div>
            
            <div class="form-group">
                <label for="age">Age</label>
                <input type="number" id="age" name="age" min="13" max="120" placeholder="Enter your age">
            </div>
            
            <div class="form-group">
                <label for="role">Current Role</label>
                <select id="role" name="role" required>
                    <option value="" disabled selected>Select your role</option>
                    <option value="student">Student</option>
                    <option value="employee">Employee</option>
                    <option value="freelancer">Freelancer</option>
                    <option value="other">Other</option>
                </select>
            </div>
            
            <div class="form-group">
                <label>Would you recommend our product?</label>
                <div class="radio-group">
                    <input type="radio" id="definitely" name="recommend" value="definitely">
                    <label for="definitely">Definitely</label>
                </div>
                <div class="radio-group">
                    <input type="radio" id="maybe" name="recommend" value="maybe">
                    <label for="maybe">Maybe</label>
                </div>
                <div class="radio-group">
                    <input type="radio" id="not-sure" name="recommend" value="not-sure">
                    <label for="not-sure">Not Sure</label>
                </div>
            </div>
            
            <div class="form-group">
                <label>What did you like most? (Check all that apply)</label>
                <div class="checkbox-group">
                    <input type="checkbox" id="design" name="features" value="design">
                    <label for="design">Design</label>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" id="functionality" name="features" value="functionality">
                    <label for="functionality">Functionality</label>
                </div>
                <div class="checkbox-group">
                    <input type="checkbox" id="performance" name="features" value="performance">
                    <label for="performance">Performance</label>
                </div>
            </div>
            
            <div class="form-group">
                <label for="comments">Additional Comments</label>
                <textarea id="comments" name="comments" placeholder="Share your thoughts..."></textarea>
            </div>
            
            <button type="submit">Submit Survey</button>
        </form>
    </main>
</body>
</html>

A clean, professional survey form appears with:
- Centered layout with white background and subtle shadow
- Blue submit button that changes color on hover
- Responsive design that adapts to smaller screens
- Form fields for name, email, age, role selection
- Radio buttons for recommendation question
- Checkboxes for feature preferences
- Large text area for additional comments

Key Form Elements

Input Types

The survey form uses various HTML5 input types for data validation

Input Type	Purpose	Validation
`text`	Name input	Required field
`email`	Email validation	Email format + required
`number`	Age input	Min/max values
`radio`	Single choice	One selection only
`checkbox`	Multiple choices	Multiple selections allowed

Responsive Design Features

The form includes media queries for mobile optimization

Flexible Layout Maximum width with auto margins for centering
Touch-Friendly Adequate padding on form controls for mobile taps
Scalable Typography Font sizes adjust for smaller screens
Accessible Focus States Clear visual feedback on form interaction

Conclusion

This survey form combines semantic HTML with modern CSS styling to create a professional, user-friendly interface. The responsive design ensures accessibility across all devices while maintaining clean aesthetics and smooth user interactions.

Souvik Chakraborty

Updated on: 2026-03-15T18:28:19+05:30

763 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next