Bug report form template

Free bug report form
template, HTML and React.

A bug report form that asks for what developers need first: the page it happened on, how severe it is, the steps to reproduce it and what the reporter expected. The screenshot field is optional.

Use this template Preview the template

250 submissions/month free. No credit card required.

Preview, restyle and copy the code.

Preview only. Nothing is sent from this page.

Your bug report form, ready to make your own.

The code includes the fields, the CSS for the style you chose and a hidden anti-spam field. Replace the placeholder endpoint with your own before publishing, or open it in the designer to change fields, colors and wording without touching code.

Customize in Form Koi

bug-report-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #101418; color: #d6e2d0; font: 16px/1.5 ui-monospace, monospace; border: 1px solid #d6e2d030; border-radius: 0px; }
.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.formkoi-form > p { margin: 0 0 16px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.formkoi-field--half { grid-column: span 1; }
.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid #d6e2d070; border-radius: 0px; background: #101418; color: #d6e2d0; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #d6e2d080; }
.formkoi-fields input[type=file] { padding: 10px; }
.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.formkoi-choices legend { padding: 0; margin-bottom: 6px; }
.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.formkoi-choices label + label { margin-top: 8px; }
.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #7dd3a0; }
.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }
.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 8px; padding: 12px 22px; border: 0; border-radius: 0px; background: #7dd3a0; color: #111111; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.formkoi-fields button:hover { filter: brightness(.94); }
.formkoi-fields :focus-visible { outline: 2px solid #7dd3a0; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Report a bug.">
<h2>Report a bug.</h2>
<p>The more detail you share, the faster we can reproduce and fix it.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST" enctype="multipart/form-data">
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="page_url">Page where it happened</label>
  <input id="page_url" name="page_url" type="url" autocomplete="url" placeholder="https://" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="severity">Severity</label>
  <select id="severity" name="severity" required>
    <option value="">Choose one</option>
    <option value="Blocks me">Blocks me</option>
    <option value="Annoying">Annoying</option>
    <option value="Cosmetic">Cosmetic</option>
  </select>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="browser">Browser and device</label>
  <input id="browser" name="browser" placeholder="Safari on iPhone">
  </div>
  <div class="formkoi-field">
  <label for="message">Steps to reproduce</label>
  <textarea id="message" name="message" placeholder="1. Go to…
2. Click…
3. See…" required></textarea>
  </div>
  <div class="formkoi-field">
  <label for="expected">What did you expect to happen?</label>
  <textarea id="expected" name="expected"></textarea>
  </div>
  <div class="formkoi-field">
  <label for="screenshot">Screenshot</label>
  <input id="screenshot" name="screenshot" type="file" multiple accept=".pdf,.png,.jpg,.jpeg,.webp,.txt,.csv" aria-describedby="screenshot-help">
  <p class="formkoi-help" id="screenshot-help">Up to 3 files. 5 MiB each, 10 MiB total.</p>
  </div>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

  <button type="submit">Send report</button>
</form>
</section>

New to connecting a form? The HTML contact form guide and the React contact form guide walk through pointing any of these templates at your endpoint.

Fields in this bug report form.

Page URL is a link field, so the browser validates it. Severity is a dropdown you can route on, so you can configure a rule to notify the right verified recipient. The screenshot field accepts files once uploads are enabled on the form, which is part of Pro.

Label	Field name	Type	Required
Email address	`email`	Email	Yes
Page where it happened	`page_url`	Website	Yes
Severity	`severity`	Dropdown: Blocks me, Annoying, Cosmetic	Yes
Browser and device	`browser`	Short text	No
Steps to reproduce	`message`	Long text	Yes
What did you expect to happen?	`expected`	Long text	No
Screenshot	`screenshot`	File upload	No

Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.

Make it yours in minutes.

Change fields without code

Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.

Explore

Match your website

Pick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.

Connect one endpoint

Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.

Explore

Related templates.

Frequently asked questions

Bug report form
questions.

Can reports create issues in my tracker?

Send each report to a webhook and create the issue from the JSON payload, or read reports with the management API.

How large can screenshots be?

Up to five megabytes per file and three files per report, in PNG, JPEG or WebP.

Can I hide the reporter’s email?

Make the field optional or remove it. A report without an email still arrives in your inbox.

Does the form work without uploads enabled?

Yes. Remove the screenshot field before saving the design if uploads are off. You can collect the remaining details on any plan; enable uploads on Pro to accept screenshots.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free bug report formtemplate, HTML and React.