How to create an HTML Bug Tracker Form
Knowing when an error happens on our website or in our apps is a critical step to not only building better products, but also supporting our customers. Relying on error logs or reporting services alone is not always enough to respond appropriately and in a timely manner.
Being pro-active about error reporting is a great way to build trust and confidence in your product with your users. It also opens a direct line of communication between developers and stakeholders that creates a beneficial atmosphere and may relieve some tension when an error does inevitably occur.
Use the template below to add a bug report form to your website/app that allows a user to submit a screenshot, a severity ranking, and other critical information to help you team debug the issue. This form comes styled with Tailwind CSS and is ready to support any additional fields that you would like to add.
Bug Report Form Example
HTML Code For A Bug Report Submission Form
<form action="https://formeezy.com/api/v1/forms/YOUR_FORM_ID/submissions" method="POST" class="w-full space-y-6">
<fieldset>
<label for="name" class="font-semibold pb-2 block">Your Name</label>
<input type="text" id="name" name="name" placeholder="Enter name" required="" class="bg-gray-100 w-full rounded border px-3 py-1" />
</fieldset>
<fieldset>
<label for="email" class="font-semibold pb-2 block">Your Email</label>
<input type="email" id="email" name="email" placeholder="Enter email" required="" class="bg-gray-100 w-full rounded border px-3 py-1" />
</fieldset>
<fieldset>
<label for="description" class="font-semibold pb-2 block">Please describe your issue in detail</label>
<textarea id="description" name="description" placeholder="Describe your issue" required="" class="bg-gray-100 w-full rounded border px-3 py-1"></textarea>
</fieldset>
<fieldset>
<label for="priority" class="font-semibold pb-2 block">Priority</label>
<select id="priority" name="priority" required="" class="bg-gray-100 w-full rounded border px-3 py-2">
<option selected="" disabled="">Select an option</option>
<option value="high_priority">High Priority</option>
<option value="medium_priority">Medium Priority</option>
<option value="low_priority">Low Priority</option>
</select>
</fieldset>
<fieldset>
<label for="operating_system" class="font-semibold pb-2 block">Operating System</label>
<select id="operating_system" name="operating_system" required="" class="bg-gray-100 w-full rounded border px-3 py-2">
<option selected="" disabled="">Select an option</option>
<option value="mac">Mac OS</option>
<option value="window">Windows</option>
<option value="linux">Linux</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset>
<label for="browser" class="font-semibold pb-2 block">Browser</label>
<select id="browser" name="browser" required="" class="bg-gray-100 w-full rounded border px-3 py-2">
<option selected="" disabled="">Select an option</option>
<option value="chrome">Chrome</option>
<option value="safari">Safari</option>
<option value="firefox">Firefox</option>
<option value="opera">Opera</option>
<option value="internet_explorer">Internet Explorer</option>
<option value="other">Other</option>
</select>
</fieldset>
<fieldset>
<label for="screenshot" class="font-semibold pb-2 block">
Screenshot
<small class="block font-medium text-gray-700">Show us what the bug looks like.</small>
</label>
<input type="file" id="screenshot" name="screenshot" class="bg-gray-100 w-full rounded border px-3 py-1" />
</fieldset>
<button class="bg-cyan-500 rounded-lg text-white px-3 py-2 font-semibold w-full" type="submit">Submit Bug Report</button>
<a target="_blank" rel="noopener noreferrer" style="color:rgba(156, 163, 175)" href="https://tailwindcss.com/" class="block w-full pt-2 text-sm text-center">This example uses Tailwind CSS</a>
</form>