Free Support Request Form Template — Copy-Paste HTML Code

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

Q: How do I get notified of new support requests?

FormBackend sends an email notification the moment a request arrives and stores it in your dashboard. You can also route requests to Slack, Zendesk, or your team inbox using FormBackend's integrations.

Q: Can customers attach a screenshot of the problem?

Yes. Use the file upload variation below. FormBackend supports file uploads on paid plans, so customers can attach screenshots or logs to explain the issue.

Q: Does this work on any website platform?

Absolutely. It's plain HTML and CSS, so it works on static sites, WordPress, Webflow, Squarespace, help centers, and more.

A support request form gives customers a structured way to report problems and gives your team the context to resolve them fast. In this guide you’ll get a production-ready HTML support request form template you can copy and paste into any website in minutes. It captures issue type, priority, and details with modern styling, validation, and seamless delivery through FormBackend.

Complete Support Request Form Code

Here’s a fully-styled, ready-to-use support request 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>Contact Support</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>Contact Support</h1>
        <p class="form-subtitle">Tell us what's wrong and we'll help you out.</p>

        <div class="success-message" id="successMessage">Thanks! Your request has been received. Our team will reply soon.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting your request. Please try again.</div>

        <form id="supportForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <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="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">Issue Type</label>
                    <select id="type" name="issue_type" required>
                        <option value="">Select...</option>
                        <option value="Bug">Bug</option>
                        <option value="Billing">Billing</option>
                        <option value="Account">Account</option>
                        <option value="How-to question">How-to question</option>
                        <option value="Other">Other</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="priority" class="required">Priority</label>
                    <select id="priority" name="priority" required>
                        <option value="">Select...</option>
                        <option value="Low">Low</option>
                        <option value="Normal">Normal</option>
                        <option value="High">High</option>
                        <option value="Urgent">Urgent</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="subject" class="required">Subject</label>
                <input type="text" id="subject" name="subject" required>
            </div>

            <div class="form-group">
                <label for="message" class="required">Describe the issue</label>
                <textarea id="message" name="message" placeholder="What happened? What did you expect? Include steps to reproduce if you can." required></textarea>
            </div>

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

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

            if (!name || !email || !message) {
                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 support-request-form.html. Upload it, embed it in your help center, or test locally first.

Step 2: Create a FormBackend Account

Create a free account at FormBackend, where every support request 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 support request form is now live.

Support Request Form Variations

Variation 1: Simple Support Form

A short version for a help widget or footer:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="email" name="email" placeholder="Your email" required>
    <textarea name="message" placeholder="How can we help?" required></textarea>
    <button type="submit">Get Help</button>
</form>

Variation 2: Support Request with Screenshot Upload

Let customers attach a screenshot of the problem:

<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="message" placeholder="Describe the issue" required></textarea>
    <label>Attach a screenshot:</label>
    <input type="file" name="screenshot" accept="image/*">
    <button type="submit">Submit</button>
</form>

Variation 3: Support Request with Order Number

For ecommerce or product support:

<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>
    <input type="text" name="order_number" placeholder="Order number">
    <select name="issue_type" required>
        <option value="Shipping">Shipping</option>
        <option value="Return">Return</option>
        <option value="Damaged item">Damaged item</option>
    </select>
    <textarea name="message" placeholder="Describe the issue" required></textarea>
    <button type="submit">Submit Request</button>
</form>

How to Customize This Template

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

Edit issue types: Update the <option> values in the issue type and priority dropdowns to match your support categories.

Add attachments: Add enctype="multipart/form-data" to the form tag and a <input type="file"> field for screenshots or logs.

Auto-route by priority: Use FormBackend integrations to send urgent requests to a dedicated Slack channel.

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

Integration with FormBackend

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

View every request in one organized dashboard
Get an email notification for each new request
Auto-reply with a confirmation to the customer
Route requests to Slack, Zendesk, or your team inbox
Export requests as CSV

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

Frequently Asked Questions

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

How do I get notified of new support requests? FormBackend emails you instantly and stores each request. You can also route to Slack, Zendesk, or your team inbox.

Can customers set a priority or category? Yes. The template includes issue type and priority dropdowns so you can triage requests.

Can customers attach a screenshot of the problem? Yes. Use the screenshot upload variation. FormBackend supports file uploads on paid plans.

Can I auto-reply with a ticket confirmation? Yes. FormBackend can send an automatic confirmation email when a request comes in.

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:

Contact Form Template — Collect name, email, subject, and message
Bug Report Form Template — Capture detailed bug reports from users
Complaint Form Template — Handle complaints with a clear paper trail
Feedback Form Template — Collect ratings and open-ended feedback

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