Free Survey Form Template — HTML Code for Customer Surveys

Q: Can I customize the colors and styling?

Completely. All styling is in the ` ` section. Change the background gradient, button colors, and fonts to match your branding.

Understanding what your customers think is essential for growing your business. A well-designed survey form helps you gather valuable feedback, identify improvement areas, and measure customer satisfaction. This guide provides a complete, ready-to-use HTML survey template with multiple question types including rating scales, checkboxes, and open-ended text fields. Deploy it in minutes using FormBackend to manage responses.

Complete Survey Form Code

Here’s a production-ready survey form with multiple question types:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customer Survey</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }

        .container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            padding: 50px;
            max-width: 600px;
            margin: 0 auto;
        }

        h1 {
            font-size: 32px;
            color: #1a202c;
            margin-bottom: 10px;
        }

        .form-subtitle {
            font-size: 16px;
            color: #718096;
            margin-bottom: 35px;
        }

        .survey-section {
            margin-bottom: 35px;
        }

        .question-label {
            display: block;
            font-size: 16px;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 15px;
        }

        .optional {
            font-weight: normal;
            color: #a0aec0;
            font-size: 14px;
        }

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

        input[type="text"],
        input[type="email"],
        select,
        textarea {
            width: 100%;
            padding: 12px 14px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        textarea {
            resize: vertical;
            min-height: 100px;
        }

        /* Radio buttons and checkboxes */
        .radio-group,
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .radio-item,
        .checkbox-item {
            display: flex;
            align-items: center;
        }

        .radio-item input[type="radio"],
        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            cursor: pointer;
            accent-color: #667eea;
        }

        .radio-item label,
        .checkbox-item label {
            cursor: pointer;
            font-size: 14px;
            color: #4a5568;
        }

        /* Rating scale */
        .rating-scale {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .rating-item {
            display: flex;
            align-items: center;
        }

        .rating-item input[type="radio"] {
            display: none;
        }

        .rating-button {
            width: 50px;
            height: 50px;
            border: 2px solid #cbd5e0;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            font-weight: 600;
            color: #4a5568;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .rating-item input[type="radio"]:checked + .rating-button {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .rating-button:hover {
            border-color: #667eea;
        }

        @media (max-width: 480px) {
            .container {
                padding: 25px;
            }

            h1 {
                font-size: 24px;
            }

            .rating-button {
                width: 42px;
                height: 42px;
                font-size: 12px;
            }
        }

        button {
            width: 100%;
            padding: 14px 20px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
            margin-top: 20px;
        }

        button:hover {
            background: #5568d3;
        }

        button:active {
            transform: scale(0.98);
        }

        .success-message {
            display: none;
            background: #c6f6d5;
            color: #22543d;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
        }

        .error-message {
            display: none;
            background: #fed7d7;
            color: #742a2a;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Customer Survey</h1>
        <p class="form-subtitle">Your feedback helps us improve. Takes 2 minutes.</p>

        <div class="success-message" id="successMessage">
            Thank you for completing the survey! Your feedback is valuable to us.
        </div>

        <div class="error-message" id="errorMessage">
            There was an issue submitting the survey. Please try again.
        </div>

        <form id="surveyForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <!-- Name and Email Section -->
            <div class="survey-section">
                <div class="form-group">
                    <label for="name" class="question-label">Name <span class="optional">(Optional)</span></label>
                    <input type="text" id="name" name="name" placeholder="Your name">
                </div>

                <div class="form-group">
                    <label for="email" class="question-label">Email <span class="optional">(Optional)</span></label>
                    <input type="email" id="email" name="email" placeholder="Your email">
                </div>
            </div>

            <!-- Discovery Question -->
            <div class="survey-section">
                <label class="question-label">How did you hear about us?</label>
                <div class="form-group">
                    <select name="source" required>
                        <option value="">Select an option...</option>
                        <option value="Search Engine">Search Engine</option>
                        <option value="Social Media">Social Media</option>
                        <option value="Friend/Referral">Friend or Referral</option>
                        <option value="Advertisement">Advertisement</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
            </div>

            <!-- Satisfaction Rating -->
            <div class="survey-section">
                <label class="question-label">How satisfied are you with your experience?</label>
                <div class="form-group">
                    <div class="rating-scale">
                        <div class="rating-item">
                            <input type="radio" id="rating1" name="satisfaction" value="1" required>
                            <label for="rating1" class="rating-button">1</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="rating2" name="satisfaction" value="2">
                            <label for="rating2" class="rating-button">2</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="rating3" name="satisfaction" value="3">
                            <label for="rating3" class="rating-button">3</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="rating4" name="satisfaction" value="4">
                            <label for="rating4" class="rating-button">4</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="rating5" name="satisfaction" value="5">
                            <label for="rating5" class="rating-button">5</label>
                        </div>
                    </div>
                </div>
                <small style="color: #a0aec0; display: block; margin-top: 10px;">1 = Not Satisfied, 5 = Very Satisfied</small>
            </div>

            <!-- Multiple Checkboxes -->
            <div class="survey-section">
                <label class="question-label">What do you like most about us? <span class="optional">(Select all that apply)</span></label>
                <div class="form-group">
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="product" name="likes" value="Product Quality">
                            <label for="product">Product Quality</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="service" name="likes" value="Customer Service">
                            <label for="service">Customer Service</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="price" name="likes" value="Price/Value">
                            <label for="price">Price/Value</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="support" name="likes" value="Support">
                            <label for="support">Support and Resources</label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Open-ended Text -->
            <div class="survey-section">
                <label for="improvements" class="question-label">What could we improve?</label>
                <div class="form-group">
                    <textarea id="improvements" name="improvements" placeholder="Please share your suggestions..."></textarea>
                </div>
            </div>

            <!-- NPS Question -->
            <div class="survey-section">
                <label class="question-label">How likely are you to recommend us to a friend? <span class="optional">(0-10)</span></label>
                <div class="form-group">
                    <div class="rating-scale">
                        <div class="rating-item">
                            <input type="radio" id="nps0" name="nps" value="0">
                            <label for="nps0" class="rating-button">0</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps1" name="nps" value="1">
                            <label for="nps1" class="rating-button">1</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps2" name="nps" value="2">
                            <label for="nps2" class="rating-button">2</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps3" name="nps" value="3">
                            <label for="nps3" class="rating-button">3</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps4" name="nps" value="4">
                            <label for="nps4" class="rating-button">4</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps5" name="nps" value="5">
                            <label for="nps5" class="rating-button">5</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps6" name="nps" value="6">
                            <label for="nps6" class="rating-button">6</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps7" name="nps" value="7">
                            <label for="nps7" class="rating-button">7</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps8" name="nps" value="8">
                            <label for="nps8" class="rating-button">8</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps9" name="nps" value="9">
                            <label for="nps9" class="rating-button">9</label>
                        </div>
                        <div class="rating-item">
                            <input type="radio" id="nps10" name="nps" value="10">
                            <label for="nps10" class="rating-button">10</label>
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit">Submit Survey</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('surveyForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        form.addEventListener('submit', function(e) {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            const satisfactionChecked = document.querySelector('input[name="satisfaction"]:checked');

            if (!satisfactionChecked) {
                errorMessage.textContent = 'Please answer the satisfaction rating question.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            const email = document.getElementById('email').value.trim();
            if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

How to Use This Survey Template

Deploy your customer survey in just three simple steps:

Step 1: Copy the Code

Copy the complete HTML code above and save it as survey.html. You can open it in your browser immediately to see how it works, or upload it to your website.

Step 2: Create a FormBackend Account

Sign up for a free FormBackend account to receive and manage survey responses. FormBackend stores all submissions securely and provides an interface for viewing and exporting your data.

Step 3: Update the Form Action

Find YOUR_FORM_ID in the form’s action attribute and replace it with your actual FormBackend ID from your dashboard. The updated action will be: https://www.formbackend.com/f/abc123xyz

Your survey is now live and ready to collect feedback.

Survey Form Variations

Different survey goals require different question sets. Here are three variations:

Variation 1: Simple 3-Question Survey

Perfect for quick feedback collection:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <label>Overall satisfaction (1-5):</label>
    <input type="radio" name="satisfaction" value="1"> 1
    <input type="radio" name="satisfaction" value="2"> 2
    <input type="radio" name="satisfaction" value="3"> 3
    <input type="radio" name="satisfaction" value="4"> 4
    <input type="radio" name="satisfaction" value="5"> 5

    <label>What could we improve?</label>
    <textarea name="feedback" required></textarea>

    <label>Would you recommend us?</label>
    <input type="radio" name="recommend" value="Yes"> Yes
    <input type="radio" name="recommend" value="No"> No
    <input type="radio" name="recommend" value="Maybe"> Maybe

    <button type="submit">Submit</button>
</form>

Variation 2: Customer Satisfaction (CSAT) Survey

Focused on measuring customer satisfaction:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name (optional)">
    <input type="email" name="email" placeholder="Email (optional)">

    <label>How satisfied are you with our service?</label>
    <input type="radio" name="satisfaction" value="Very Satisfied" required> Very Satisfied
    <input type="radio" name="satisfaction" value="Satisfied"> Satisfied
    <input type="radio" name="satisfaction" value="Neutral"> Neutral
    <input type="radio" name="satisfaction" value="Dissatisfied"> Dissatisfied

    <label>Why did you rate this way?</label>
    <textarea name="reason" required></textarea>

    <button type="submit">Submit</button>
</form>

Variation 3: Post-Purchase Survey

Gather feedback after a purchase:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <label>How was your purchasing experience?</label>
    <input type="radio" name="experience" value="Excellent" required> Excellent
    <input type="radio" name="experience" value="Good"> Good
    <input type="radio" name="experience" value="Average"> Average
    <input type="radio" name="experience" value="Poor"> Poor

    <label>Would you buy from us again?</label>
    <input type="radio" name="repeat" value="Definitely" required> Definitely
    <input type="radio" name="repeat" value="Probably"> Probably
    <input type="radio" name="repeat" value="Not Sure"> Not Sure

    <label>Any additional comments?</label>
    <textarea name="comments"></textarea>

    <button type="submit">Submit</button>
</form>

How to Customize Your Survey

Make this template your own:

Add or remove questions: Duplicate a survey-section div to add new questions, or delete sections you don’t need.

Change rating scales: The 5-point and 10-point scales are easy to modify. Adjust the number of rating buttons and their values.

Use different question types: Mix and match single-select (radio), multi-select (checkboxes), dropdowns, and text fields based on your needs.

Customize colors: Change #667eea throughout the CSS to match your brand color.

Add branching logic: Use JavaScript to show/hide questions based on previous answers.

Make questions conditional: Show certain questions only when specific answers are selected.

Managing Survey Responses

FormBackend makes it easy to work with survey data:

View responses: See all survey submissions in your FormBackend dashboard
Export data: Download responses as CSV to analyze in spreadsheets or statistical tools
Set notifications: Get emailed when new surveys are submitted
Create reports: Generate summaries of rating distributions and common feedback themes
Integrate with tools: Use webhooks to send survey data to CRM, analytics, or email platforms

Frequently Asked Questions

Is this survey form template really free? Yes, the template itself is completely free. You only pay for FormBackend’s service if you go beyond the free tier, which includes enough submissions for most businesses.

Can I make the survey anonymous? Absolutely. Simply remove or make the name and email fields optional (which they are by default in this template). FormBackend will still record all responses without identifying information.

How do I export survey results? FormBackend allows you to export all submissions as CSV directly from your dashboard. This makes it easy to analyze results in Excel, Google Sheets, or any other tool.

Can I add conditional logic to show different questions based on answers? Yes, using JavaScript. You can add event listeners to show/hide questions based on selected options. For example, show a follow-up question only if someone rates 1-3 on satisfaction.

How do I calculate Net Promoter Score (NPS) from survey data? Your NPS is calculated by taking the percentage of “promoters” (9-10 rating) minus “detractors” (0-6 rating). Export your FormBackend data and use a spreadsheet formula to calculate this automatically.

Can I customize the colors and styling? Completely. All styling is in the <style> section. Change the background gradient, button colors, and fonts to match your branding.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Feedback Form Template — Customer feedback with star ratings and comments
Contact Form Template — Collect name, email, and messages from website visitors
Registration Form Template — Event, workshop, and conference signups
RSVP Form Template — Event attendance with dietary needs and guest counts
Newsletter Signup Template — Grow your email list with lightweight signup forms

Need a custom form? Use our HTML form generator to build one visually.