Free Bug Report Form Template — Copy-Paste HTML Code

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

Q: How do I get notified of new bug reports?

FormBackend emails you the moment a report arrives and stores it in your dashboard. You can also route reports straight to Slack or your issue tracker using FormBackend's integrations and webhooks.

Q: Can reporters attach a screenshot or log file?

Yes. Use the file upload variation below. FormBackend supports file uploads on paid plans, so reporters can attach screenshots, screen recordings, or log files.

Q: Can I capture environment details like browser and OS?

Yes. The template includes browser and severity fields, and you can add hidden fields to auto-capture details like the page URL or app version.

Q: Does this work inside a web app or help center?

Absolutely. It's plain HTML and CSS, so it embeds into any web app, help center, static site, WordPress, or Webflow page.

A bug report form gives users a structured way to report problems and gives your team everything needed to reproduce and fix them. In this guide you’ll get a production-ready HTML bug report form template you can copy and paste into any website or app in minutes. It captures steps to reproduce, severity, and environment with modern styling, validation, and seamless delivery through FormBackend.

Complete Bug Report Form Code

Here’s a fully-styled, ready-to-use bug report 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>Report a Bug</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: 540px; 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: #e53e3e; box-shadow: 0 0 0 3px rgba(229,62,62,0.1); }
        textarea { resize: vertical; min-height: 100px; }
        code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
        .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: #e53e3e; 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: #c53030; }
        .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>Report a Bug</h1>
        <p class="form-subtitle">Help us fix it faster by sharing the details below.</p>

        <div class="success-message" id="successMessage">Thanks for the report! Our team will investigate.</div>
        <div class="error-message" id="errorMessage">There was an issue submitting your report. Please try again.</div>

        <form id="bugForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="name">Name (Optional)</label>
                    <input type="text" id="name" name="name">
                </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-group">
                <label for="summary" class="required">Bug Summary</label>
                <input type="text" id="summary" name="summary" placeholder="One-line description of the bug" required>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="severity" class="required">Severity</label>
                    <select id="severity" name="severity" required>
                        <option value="">Select...</option>
                        <option value="Critical">Critical — blocks me</option>
                        <option value="Major">Major — hard to work around</option>
                        <option value="Minor">Minor — small issue</option>
                        <option value="Cosmetic">Cosmetic — visual only</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="browser">Browser / Device</label>
                    <input type="text" id="browser" name="browser" placeholder="e.g. Chrome on macOS">
                </div>
            </div>

            <div class="form-group">
                <label for="steps" class="required">Steps to Reproduce</label>
                <textarea id="steps" name="steps_to_reproduce" placeholder="1. Go to...&#10;2. Click on...&#10;3. See error" required></textarea>
            </div>

            <div class="form-group">
                <label for="expected">Expected vs. Actual</label>
                <textarea id="expected" name="expected_vs_actual" placeholder="What did you expect to happen, and what actually happened?"></textarea>
            </div>

            <input type="hidden" name="page_url" id="page_url">

            <button type="submit">Submit Bug Report</button>
        </form>
    </div>

    <script>
        const pageUrlField = document.getElementById('page_url');
        if (pageUrlField) pageUrlField.value = window.location.href;

        const form = document.getElementById('bugForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

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

            const email = document.getElementById('email').value.trim();
            const summary = document.getElementById('summary').value.trim();
            const steps = document.getElementById('steps').value.trim();

            if (!email || !summary || !steps) {
                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 bug-report-form.html. Embed it in your app, help center, or test it locally first. The hidden page_url field auto-captures the page the report came from.

Step 2: Create a FormBackend Account

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

Bug Report Form Variations

Variation 1: Quick Bug Report

A minimal version for an in-app widget:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="email" name="email" placeholder="Your email" required>
    <textarea name="summary" placeholder="What went wrong?" required></textarea>
    <button type="submit">Report Bug</button>
</form>

Variation 2: Bug Report with Screenshot Upload

Let reporters attach a screenshot or screen recording:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST" enctype="multipart/form-data">
    <input type="email" name="email" placeholder="Email" required>
    <input type="text" name="summary" placeholder="Bug summary" required>
    <textarea name="steps_to_reproduce" placeholder="Steps to reproduce" required></textarea>
    <label>Attach a screenshot:</label>
    <input type="file" name="attachment" accept="image/*,video/*">
    <button type="submit">Submit Report</button>
</form>

Variation 3: Bug Report with Version Field

For products that ship multiple versions:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="email" name="email" placeholder="Email" required>
    <input type="text" name="summary" placeholder="Bug summary" required>
    <input type="text" name="app_version" placeholder="App version (e.g. 2.4.1)">
    <select name="severity" required>
        <option value="Critical">Critical</option>
        <option value="Major">Major</option>
        <option value="Minor">Minor</option>
    </select>
    <textarea name="steps_to_reproduce" placeholder="Steps to reproduce" required></textarea>
    <button type="submit">Submit Report</button>
</form>

How to Customize This Template

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

Auto-capture context: The hidden page_url field captures the current URL. Add more hidden fields for app version, user ID, or browser user-agent.

Edit severity levels: Update the <option> values in the severity dropdown to match your triage labels.

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

Route to your tools: Use FormBackend webhooks to send reports to your issue tracker or a dedicated Slack channel.

Integration with FormBackend

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

View every report in one organized dashboard
Get an email notification for each new report
Route reports to Slack or your issue tracker via webhooks
Auto-reply to confirm receipt to the reporter
Export reports as CSV

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

Frequently Asked Questions

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

How do I get notified of new bug reports? FormBackend emails you instantly and stores each report. You can also route reports to Slack or your issue tracker.

Can reporters attach a screenshot or log file? Yes. Use the screenshot upload variation. FormBackend supports file uploads on paid plans.

Can I capture environment details like browser and OS? Yes. The template includes browser and severity fields, plus a hidden field that captures the page URL.

How do I stop spam bug reports? FormBackend includes spam protection on every plan and supports Cloudflare Turnstile, reCAPTCHA, and hCaptcha.

Does this work inside a web app or help center? Absolutely. It’s plain HTML and CSS, so it embeds 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
Complaint Form Template — Handle complaints with a clear paper trail

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