BForms
Back to Templates
Template Tutorial

Build a bug report form

A well-structured bug report form saves your engineering team hours of back-and-forth. This tutorial shows you how to create a form that collects everything needed to reproduce and prioritize a bug — severity, description, steps to reproduce, and expected vs. actual behavior.

What you will build

  • A form with six fields: subject, severity (select), description (textarea), steps to reproduce (textarea), expected behavior (textarea), and email for follow-up.
  • Severity levels so your team can triage bugs by impact.
  • Structured fields that give developers the context they need to investigate without asking follow-up questions.
  • Spam protection and domain restrictions for security.
1

Create the form in your dashboard

Log in to your BForms dashboard and click New Form. On the Settings tab, name the form Bug Reports or Issue Tracker. If you have multiple products, include the product name to keep things organized.

2

Set a redirect URL

In the Redirect URL field, enter a page that confirms the report was received and sets expectations for response time:

example
https://yourapp.com/bugs/thanks

A good confirmation page might say "Thanks for the report. We will investigate and respond within 2 business days." If you submit via JavaScript, leave this empty and show a success message inline.

3

Add your fields

Switch to the Fields tab. Bug report forms need more fields than most forms because they serve a technical audience. Every field here reduces follow-up questions for your engineers.

TextSubjectRequired

A short title that makes it easy to scan reports in the dashboard. Example: 'Login button unresponsive on mobile'.

name: subjectplaceholder: Brief summary of the issue
SelectSeverityRequired

Helps your team triage bugs by impact. Critical issues get addressed first.

name: severityplaceholder: Select severity
Critical - App unusableHigh - Major feature brokenMedium - Feature impairedLow - Minor issue or cosmetic
TextareaDescriptionRequired

A detailed explanation of what happened. Encourage users to include context like browser, device, or what they were doing.

name: descriptionplaceholder: Describe the issue in detail...
TextareaSteps to reproduce

A numbered list of steps to trigger the bug. This is the most valuable field for your engineering team.

name: steps_to_reproduceplaceholder: 1. Go to...\n2. Click on...\n3. See error
TextareaExpected behavior

Clarifies what the user thought should have happened. Helps disambiguate whether something is a bug or a misunderstanding.

name: expected_behaviorplaceholder: What did you expect to happen?
EmailEmailRequired

Required so your team can follow up with questions or notify the reporter when the bug is fixed.

name: emailplaceholder: you@example.com

Why so many fields?

Bug reports are different from most forms. Each field serves a specific purpose in the triage and debugging process. A vague "something is broken" report with no steps to reproduce wastes your team's time. These fields guide the reporter into providing useful, actionable information. You can make "steps to reproduce" and "expected behavior" optional if you prefer a lower-friction form.

4

Enable spam protection

Back on the Settings tab, set a Honeypot Field name. Even if the bug report form is behind authentication, the endpoint URL is public and bots can submit to it directly. The honeypot adds an extra layer of protection.

5

Restrict allowed domains

Add your app's domain in the Allowed Domains field. Since bug report forms typically live inside your product, this ensures only submissions from your domain are accepted:

allowed domains
yourapp.com
6

Embed the form

Click Create Form and copy the HTML below. Replace your-form-slug with the actual slug from your dashboard.

bug-report.html
<form action="https://bforms.dev/api/f/your-form-slug" method="POST">
  <label for="subject">Subject</label>
  <input type="text" id="subject" name="subject" placeholder="Brief summary of the issue" required />

  <label for="severity">Severity</label>
  <select id="severity" name="severity" required>
    <option value="">Select severity</option>
    <option value="critical">Critical - App unusable</option>
    <option value="high">High - Major feature broken</option>
    <option value="medium">Medium - Feature impaired</option>
    <option value="low">Low - Minor issue or cosmetic</option>
  </select>

  <label for="description">Description</label>
  <textarea id="description" name="description" placeholder="Describe the issue in detail..." required></textarea>

  <label for="steps_to_reproduce">Steps to reproduce</label>
  <textarea id="steps_to_reproduce" name="steps_to_reproduce" placeholder="1. Go to...&#10;2. Click on...&#10;3. See error"></textarea>

  <label for="expected_behavior">Expected behavior</label>
  <textarea id="expected_behavior" name="expected_behavior" placeholder="What did you expect to happen?"></textarea>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" required />

  <!-- Honeypot field - do not remove -->
  <input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off" />

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

Add context automatically

Use hidden inputs to capture context the user might forget to include. For example, add <input type="hidden" name="page_url" value="" /> and set its value to window.location.href with JavaScript. You can also capture the browser user agent automatically.

7

Enable notifications

For a bug report form, notifications are essential. Configure an email notification channel that delivers to your engineering team's inbox or shared channel. Critical bugs should be visible immediately, not sitting unread in a dashboard.

You can add multiple notification email addresses if different people handle different areas of your product.

8

Test your form

Submit a test bug report and verify:

  • All fields appear correctly in your BForms dashboard, including the severity select value.
  • The redirect or inline success message works as expected.
  • Your engineering team receives the email notification.
  • Optional fields (steps to reproduce, expected behavior) can be left empty without errors.
  • The honeypot correctly discards bot submissions.
Tips and next steps

Auto-capture browser info

Use JavaScript to populate hidden fields with the browser user agent, screen resolution, and current URL. This saves reporters from having to describe their setup.

Add a screenshot upload prompt

While BForms doesn't handle file uploads directly, you can add a text field for a screenshot URL (e.g. a link to an image on Imgur or a cloud storage service).

Triage by severity

Filter submissions by the severity field in your dashboard. Address critical and high bugs first, then batch medium and low issues into your next sprint.

Close the loop

When a bug is fixed, email the reporter to let them know. This builds trust and encourages future reports. Use the email field to follow up.

Feedback form tutorialAll templates