Free Complaint Form Template — Copy-Paste HTML Code

Q: Is this complaint 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 complaints, which starts with a free tier.

Q: How do I get notified of new complaints?

FormBackend emails you the moment a complaint is submitted and stores every one in your dashboard, giving you a clear, timestamped paper trail. You can also route complaints to a manager via Slack or email.

Q: Can complainants attach evidence like photos or documents?

Yes. Use the file upload variation below. FormBackend supports file uploads on paid plans, so people can attach photos, receipts, or documents.

Q: How do I keep a record for compliance?

Every complaint is stored in your FormBackend dashboard with a timestamp and can be exported as CSV, giving you an auditable record for compliance and follow-up.

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 organization website.

A complaint form gives customers a respectful, structured way to raise issues and gives your organization a clear record to act on. In this guide you’ll get a production-ready HTML complaint form template you can copy and paste into any website in minutes. It captures the complaint type, details, and desired resolution with modern styling, validation, and seamless delivery through FormBackend.

Complete Complaint Form Code

Here’s a fully-styled, ready-to-use complaint 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>Submit a Complaint</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, 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; background: #fff; }
        input:focus, select:focus, textarea:focus { outline: none; border-color: #3182ce; box-shadow: 0 0 0 3px rgba(49,130,206,0.1); }
        textarea { resize: vertical; min-height: 120px; }
        .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: #3182ce; 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: #2c5aa0; }
        .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>Submit a Complaint</h1>
        <p class="form-subtitle">We take every complaint seriously and will respond promptly.</p>

        <div class="success-message" id="successMessage">Thank you. Your complaint has been received and will be reviewed.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting your complaint. Please try again.</div>

        <form id="complaintForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="name" class="required">Full Name</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email" class="required">Email</label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="type" class="required">Complaint Type</label>
                    <select id="type" name="complaint_type" required>
                        <option value="">Select...</option>
                        <option value="Product">Product</option>
                        <option value="Service">Service</option>
                        <option value="Staff">Staff</option>
                        <option value="Billing">Billing</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="date">Date of Incident</label>
                    <input type="date" id="date" name="incident_date">
                </div>
            </div>

            <div class="form-group">
                <label for="details" class="required">Describe Your Complaint</label>
                <textarea id="details" name="details" placeholder="Please describe what happened, including any relevant names, dates, and reference numbers." required></textarea>
            </div>

            <div class="form-group">
                <label for="resolution">Desired Resolution</label>
                <textarea id="resolution" name="desired_resolution" placeholder="What outcome are you hoping for?"></textarea>
            </div>

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

    <script>
        const form = document.getElementById('complaintForm');
        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 details = document.getElementById('details').value.trim();

            if (!name || !email || !details) {
                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;
            }
        });
    </script>
</body>
</html>

How to Use This Template

Step 1: Copy the Code

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

Step 2: Create a FormBackend Account

Create a free account at FormBackend, where every complaint will be received and stored with a timestamp.

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 complaint form is now live.

Complaint Form Variations

Variation 1: Simple Complaint Form

A short version for a footer or contact page:

<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="details" placeholder="Describe your complaint" required></textarea>
    <button type="submit">Submit Complaint</button>
</form>

Variation 2: Complaint with Evidence Upload

Let people attach photos, receipts, or documents:

<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="email" name="email" placeholder="Email" required>
    <textarea name="details" placeholder="Describe your complaint" required></textarea>
    <label>Attach evidence:</label>
    <input type="file" name="evidence">
    <button type="submit">Submit Complaint</button>
</form>

Variation 3: Anonymous Complaint Form

For whistleblowing or sensitive reports where identity is optional:

<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)">
    <select name="complaint_type" required>
        <option value="Conduct">Conduct</option>
        <option value="Safety">Safety</option>
        <option value="Other">Other</option>
    </select>
    <textarea name="details" placeholder="Describe the issue" required></textarea>
    <button type="submit">Submit Anonymously</button>
</form>

How to Customize This Template

Match your brand: Change the button background: #3182ce; and body gradient to your colors.

Edit complaint types: Update the <option> values in the complaint type dropdown to match your categories.

Add a reference number field: Add an input so customers can reference an order, account, or case number.

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

Route to a manager: Use FormBackend integrations to send complaints to a manager’s inbox or a dedicated Slack channel.

Integration with FormBackend

FormBackend lets you manage complaints without a backend. Once complaints arrive, you can:

View every complaint in one organized, timestamped dashboard
Get an email notification for each new complaint
Send an automatic acknowledgement to the complainant
Route complaints to a manager via Slack or email
Export complaints as CSV for compliance records

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

Frequently Asked Questions

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

How do I get notified of new complaints? FormBackend emails you instantly and stores every complaint with a timestamp. You can also route complaints to a manager.

Can I acknowledge complaints automatically? Yes. FormBackend can send an automatic acknowledgement email when a complaint is submitted.

Can complainants attach evidence like photos or documents? Yes. Use the evidence upload variation. FormBackend supports file uploads on paid plans.

How do I keep a record for compliance? Every complaint is stored with a timestamp and can be exported as CSV for an auditable record.

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:

Support Request Form Template — Triage support issues by type and priority
Feedback Form Template — Collect ratings and open-ended feedback
Contact Form Template — Collect name, email, and message
Testimonial Form Template — Collect customer testimonials and permission to publish

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