Free Bug Report Backend

<form action="YOUR_ENDPOINT_URL" method="POST">
  <div>
    <label for="title">Bug Title</label>
    <input type="text" id="title" name="title" required minlength="3" maxlength="200" placeholder="Short description of the bug" />
    <span class="fd-error" data-fd-error="title"></span>
  </div>
  <div>
    <label for="steps">Steps to Reproduce</label>
    <textarea id="steps" name="steps" required minlength="10" maxlength="5000" rows="5" placeholder="1. Go to...&#10;2. Click on...&#10;3. See error"></textarea>
    <span class="fd-error" data-fd-error="steps"></span>
  </div>
  <div>
    <label for="severity">Severity</label>
    <select id="severity" name="severity" required>
      <option value="">Select severity</option>
      <option value="Low">Low</option>
      <option value="Medium">Medium</option>
      <option value="High">High</option>
      <option value="Critical">Critical</option>
    </select>
    <span class="fd-error" data-fd-error="severity"></span>
  </div>
  <div>
    <label for="email">Your Email</label>
    <input type="email" id="email" name="email" required placeholder="you@example.com" />
    <span class="fd-error" data-fd-error="email"></span>
  </div>
  <button type="submit">Submit Bug Report</button>
</form>

<style>
  .fd-error { color: #dc2626; font-size: 0.875rem; margin-top: 0.25rem; display: none; }
  .fd-success { color: #16a34a; padding: 1rem; border: 1px solid #16a34a; border-radius: 4px; display: none; }
  .fd-fail { color: #dc2626; padding: 1rem; border: 1px solid #dc2626; border-radius: 4px; display: none; }
  button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
</style>

<div class="fd-success" id="fd-success">Thanks! Your message has been received.</div>
<div class="fd-fail" id="fd-fail">Something went wrong. Please try again.</div>

<script>
  (function () {
    const form = document.currentScript.closest("form") || document.querySelector("form");
    if (!form) return;

    const fields = {
      title:    { required: true, minlength: 3,  maxlength: 200,  label: "Bug title" },
      steps:    { required: true, minlength: 10, maxlength: 5000, label: "Steps to reproduce" },
      severity: { required: true,                                  label: "Severity" },
      email:    { required: true, type: "email",                   label: "Email" },
    };

    function validate(name, value) {
      const rule = fields[name];
      if (!rule) return null;
      if (rule.required && !value.trim()) return `${rule.label} is required.`;
      if (rule.type === "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value))
        return "Enter a valid email address.";
      if (rule.minlength && value.trim().length < rule.minlength)
        return `${rule.label} must be at least ${rule.minlength} characters.`;
      if (rule.maxlength && value.trim().length > rule.maxlength)
        return `${rule.label} must be under ${rule.maxlength} characters.`;
      return null;
    }

    function showError(name, message) {
      const el = form.querySelector(`[data-fd-error="${name}"]`);
      if (!el) return;
      el.textContent = message;
      el.style.display = message ? "block" : "none";
    }

    form.querySelectorAll("input, textarea, select").forEach((input) => {
      input.addEventListener("blur", () => {
        showError(input.name, validate(input.name, input.value) || "");
      });
    });

    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      let hasErrors = false;
      form.querySelectorAll("input, textarea, select").forEach((input) => {
        const error = validate(input.name, input.value);
        showError(input.name, error || "");
        if (error) hasErrors = true;
      });
      if (hasErrors) return;

      const btn = form.querySelector("button[type='submit']");
      const originalText = btn.textContent;
      btn.disabled = true;
      btn.textContent = "Sending…";

      try {
        const res = await fetch(form.action, { method: "POST", body: new FormData(form) });
        if (res.ok) {
          form.reset();
          form.style.display = "none";
          document.getElementById("fd-success").style.display = "block";
        } else throw new Error();
      } catch {
        document.getElementById("fd-fail").style.display = "block";
        btn.disabled = false;
        btn.textContent = originalText;
      }
    });
  })();
</script>