Free Testimonial Form Template — Copy-Paste HTML Code

Q: Is this testimonial form template free?

Yes, completely free. Copy, modify, and use it however you like. The only cost is the FormBackend service for receiving and managing testimonials, which starts with a free tier.

Q: How do I collect and store testimonials?

FormBackend stores every testimonial in your dashboard and emails you when a new one arrives. You can also push testimonials to Google Sheets so you can review and publish your best ones.

Q: Can customers add a photo or their company logo?

Yes. Use the file upload variation below. FormBackend supports file uploads on paid plans, so customers can attach a headshot or company logo to display alongside their quote.

Q: Does this work on any website platform?

Absolutely. It's plain HTML and CSS, so it works on WordPress, Squarespace, Webflow, static sites, and any website.

A testimonial form makes it easy to collect social proof from happy customers — with their permission to publish it. In this guide you’ll get a production-ready HTML testimonial form template you can copy and paste into any website in minutes. It captures a rating, the testimonial text, attribution details, and publishing consent, with modern styling, validation, and seamless delivery through FormBackend.

Complete Testimonial Form Code

Here’s a fully-styled, ready-to-use testimonial form you can copy into any HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leave a Testimonial</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px;
        }
        .container { background: #fff; border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.1); padding: 40px; max-width: 520px; width: 100%; }
        h1 { font-size: 28px; margin-bottom: 10px; color: #1a202c; }
        .form-subtitle { font-size: 14px; color: #718096; margin-bottom: 30px; }
        .form-group { margin-bottom: 20px; }
        label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #2d3748; }
        .required::after { content: " *"; color: #e53e3e; }
        input, textarea { width: 100%; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 14px; font-family: inherit; transition: all 0.3s ease; background: #fff; }
        input:focus, textarea:focus { outline: none; border-color: #d69e2e; box-shadow: 0 0 0 3px rgba(214,158,46,0.15); }
        textarea { resize: vertical; min-height: 120px; }
        .stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
        .stars input { position: absolute; opacity: 0; }
        .stars label { font-size: 32px; color: #e2e8f0; cursor: pointer; margin: 0; transition: color 0.2s ease; }
        .stars input:checked ~ label,
        .stars label:hover, .stars label:hover ~ label { color: #d69e2e; }
        .consent { display: flex; align-items: flex-start; gap: 10px; }
        .consent input { width: auto; margin-top: 3px; }
        .consent label { font-weight: 400; margin: 0; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        @media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } .container { padding: 25px; } }
        button { width: 100%; padding: 14px 20px; background: #d69e2e; color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.3s ease; margin-top: 10px; }
        button:hover { background: #b7791f; }
        .success-message, .error-message { display: none; padding: 14px; border-radius: 6px; margin-bottom: 20px; font-size: 14px; }
        .success-message { background: #c6f6d5; color: #22543d; }
        .error-message { background: #fed7d7; color: #742a2a; }
    </style>
</head>
<body>
    <div class="container">
        <h1>Leave a Testimonial</h1>
        <p class="form-subtitle">We'd love to hear what you think. Thank you for sharing!</p>

        <div class="success-message" id="successMessage">Thank you for your testimonial! We really appreciate it.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting your testimonial. Please try again.</div>

        <form id="testimonialForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-group">
                <label class="required">Your Rating</label>
                <div class="stars">
                    <input type="radio" id="star5" name="rating" value="5" required><label for="star5">&#9733;</label>
                    <input type="radio" id="star4" name="rating" value="4"><label for="star4">&#9733;</label>
                    <input type="radio" id="star3" name="rating" value="3"><label for="star3">&#9733;</label>
                    <input type="radio" id="star2" name="rating" value="2"><label for="star2">&#9733;</label>
                    <input type="radio" id="star1" name="rating" value="1"><label for="star1">&#9733;</label>
                </div>
            </div>

            <div class="form-group">
                <label for="testimonial" class="required">Your Testimonial</label>
                <textarea id="testimonial" name="testimonial" placeholder="What did you love? How did it help you?" required></textarea>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="name" class="required">Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="title">Title & Company</label>
                    <input type="text" id="title" name="title_company" placeholder="e.g. CEO, Acme Inc.">
                </div>
            </div>

            <div class="form-group">
                <label for="email" class="required">Email</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div class="form-group consent">
                <input type="checkbox" id="consent" name="consent_to_publish" value="Yes" required>
                <label for="consent">I give permission to publish my testimonial on the website and in marketing.</label>
            </div>

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

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

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

            const name = document.getElementById('name').value.trim();
            const email = document.getElementById('email').value.trim();
            const testimonial = document.getElementById('testimonial').value.trim();
            const consent = document.getElementById('consent').checked;

            if (!name || !email || !testimonial) {
                errorMessage.textContent = 'Please fill in all required fields.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            if (!consent) {
                errorMessage.textContent = 'Please grant permission to publish your testimonial.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

How to Use This Template

Step 1: Copy the Code

Copy the entire HTML above and save it as testimonial-form.html. Upload it, embed it, or test locally first.

Step 2: Create a FormBackend Account

Create a free account at FormBackend, where every testimonial will be received and stored.

Step 3: Update the Form Action URL

Replace YOUR_FORM_ID with your real FormBackend form ID so the action reads https://www.formbackend.com/f/abc123xyz.

Your testimonial form is now live.

Testimonial Form Variations

Variation 1: Simple Testimonial

A short version for a thank-you page:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <textarea name="testimonial" placeholder="Share your experience" required></textarea>
    <label><input type="checkbox" name="consent_to_publish" value="Yes" required> OK to publish</label>
    <button type="submit">Submit</button>
</form>

Variation 2: Testimonial with Photo Upload

Let customers add a headshot or company logo:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST" enctype="multipart/form-data">
    <input type="text" name="name" placeholder="Name" required>
    <input type="text" name="title_company" placeholder="Title & company">
    <textarea name="testimonial" placeholder="Your testimonial" required></textarea>
    <label>Add a photo:</label>
    <input type="file" name="photo" accept="image/*">
    <label><input type="checkbox" name="consent_to_publish" value="Yes" required> OK to publish</label>
    <button type="submit">Submit Testimonial</button>
</form>

Variation 3: Testimonial with Video Link

Collect a link to a video testimonial:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <textarea name="testimonial" placeholder="Written testimonial (optional)"></textarea>
    <input type="url" name="video_url" placeholder="Link to your video testimonial">
    <label><input type="checkbox" name="consent_to_publish" value="Yes" required> OK to publish</label>
    <button type="submit">Submit</button>
</form>

How to Customize This Template

Match your brand: Change the button background: #d69e2e; and the star color: #d69e2e; to your colors.

Make the rating optional: Remove the required attribute from the first star radio if you only want text testimonials.

Add a photo upload: Add enctype="multipart/form-data" to the form tag and an <input type="file"> field.

Add fields: Duplicate a form-group div and change the name, id, and label — FormBackend captures new fields automatically.

Adjust width: Change max-width: 520px; to fit your layout.

Integration with FormBackend

FormBackend lets you collect testimonials without a backend. Once testimonials arrive, you can:

View every testimonial in one organized dashboard
Get an email notification for each new submission
See exactly who granted permission to publish
Push testimonials to Google Sheets to curate and publish your best ones
Export testimonials as CSV

For more on receiving emails and managing submissions, see the FormBackend documentation.

Frequently Asked Questions

Is this testimonial form template free? Yes, completely free. The only cost is FormBackend for receiving and managing testimonials, which starts with a free tier.

How do I collect and store testimonials? FormBackend stores every testimonial and emails you when a new one arrives. You can also push them to Google Sheets.

Does the form ask for permission to publish? Yes. The template includes a consent checkbox so customers explicitly grant permission.

Can customers add a photo or their company logo? Yes. Use the photo upload variation. FormBackend supports file uploads on paid plans.

How do I keep spam out of my testimonials? FormBackend includes spam protection on every plan and supports Cloudflare Turnstile, reCAPTCHA, and hCaptcha.

Does this work on any website platform? Absolutely. It’s plain HTML and CSS, so it works anywhere.

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 — Collect ratings and open-ended feedback
Survey Form Template — Gather insights with multiple question types
Contact Form Template — Collect name, email, and message
Lead Capture Form Template — Turn visitors into qualified leads

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