Bug report form

{
  "version": 1,
  "title": "Bug report",
  "fields": [
    {
      "id": "summary",
      "type": "text",
      "label": "Summary",
      "required": true,
      "placeholder": "Export button does nothing on Safari",
      "validation": {
        "min_length": 8,
        "max_length": 140
      }
    },
    {
      "id": "steps",
      "type": "textarea",
      "label": "Steps to reproduce",
      "required": true,
      "rows": 6,
      "placeholder": "Open the dashboard, click Export, nothing downloads",
      "validation": {
        "min_length": 20,
        "max_length": 8000
      }
    },
    {
      "id": "expected",
      "type": "textarea",
      "label": "What did you expect?",
      "rows": 3,
      "validation": {
        "max_length": 4000
      }
    },
    {
      "id": "severity",
      "type": "radio",
      "label": "How bad is it?",
      "required": true,
      "options": [
        {
          "value": "blocker",
          "label": "I can't continue"
        },
        {
          "value": "major",
          "label": "Something important is broken"
        },
        {
          "value": "minor",
          "label": "Small or cosmetic"
        }
      ]
    },
    {
      "id": "page_url",
      "type": "url",
      "label": "Page where it happened"
    },
    {
      "id": "screenshot_url",
      "type": "url",
      "label": "Screenshot or recording link",
      "help_text": "Optional. A link to an image or video, for example from a screenshot tool."
    },
    {
      "id": "email",
      "type": "email",
      "label": "Email for follow-up questions"
    }
  ],
  "settings": {
    "submit_label": "Report bug",
    "success_message": "Thanks. We'll look into it."
  }
}

IKIFORM_SECRET_KEY=ik_sk_your_secret_key

"use server";

export interface BugReportFormState {
  ok: boolean;
  message: string;
  fields?: Record<string, string[]>;
  values?: Record<string, string[]>;
}

export async function sendBugReportForm(_previous: BugReportFormState, formData: FormData): Promise<BugReportFormState> {
  const body = new URLSearchParams();
  for (const [name, value] of formData) {
    if (typeof value === "string" && !name.startsWith("$ACTION")) body.append(name, value);
  }
  const response = await fetch("https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx", {
    method: "POST",
    headers: {
      Accept: "application/json",
      Authorization: `Bearer ${process.env.IKIFORM_SECRET_KEY}`,
    },
    body,
  });
  const result = await response.json();
  if (result.ok) return { ok: true, message: "Thanks. We'll look into it." };
  const values = Object.fromEntries([...new Set(body.keys())].map((name) => [name, body.getAll(name)]));
  return { ok: false, message: result.error.message, fields: result.error.fields, values };
}

"use client";

import { useActionState } from "react";
import { type BugReportFormState, sendBugReportForm } from "./actions";

const initial: BugReportFormState = { ok: false, message: "" };

export function BugReportForm() {
  const [state, action, pending] = useActionState(sendBugReportForm, initial);

  if (state.ok) return <p>{state.message}</p>;

  return (
    <form action={action}>
      <label htmlFor="summary">Summary</label>
      <input id="summary" name="summary" type="text" placeholder="Export button does nothing on Safari" minLength={8} maxLength={140} required defaultValue={state.values?.summary?.[0]} />
      {state.fields?.summary ? <p>{state.fields.summary[0]}</p> : null}
      <label htmlFor="steps">Steps to reproduce</label>
      <textarea id="steps" name="steps" rows={6} placeholder="Open the dashboard, click Export, nothing downloads" minLength={20} maxLength={8000} required defaultValue={state.values?.steps?.[0]} />
      {state.fields?.steps ? <p>{state.fields.steps[0]}</p> : null}
      <label htmlFor="expected">What did you expect?</label>
      <textarea id="expected" name="expected" rows={3} maxLength={4000} defaultValue={state.values?.expected?.[0]} />
      {state.fields?.expected ? <p>{state.fields.expected[0]}</p> : null}
      <fieldset>
        <legend>How bad is it?</legend>
        <label><input type="radio" name="severity" value="blocker" required defaultChecked={state.values?.severity?.includes("blocker")} /> I can't continue</label>
        <label><input type="radio" name="severity" value="major" required defaultChecked={state.values?.severity?.includes("major")} /> Something important is broken</label>
        <label><input type="radio" name="severity" value="minor" required defaultChecked={state.values?.severity?.includes("minor")} /> Small or cosmetic</label>
      </fieldset>
      {state.fields?.severity ? <p>{state.fields.severity[0]}</p> : null}
      <label htmlFor="page_url">Page where it happened</label>
      <input id="page_url" name="page_url" type="url" defaultValue={state.values?.page_url?.[0]} />
      {state.fields?.page_url ? <p>{state.fields.page_url[0]}</p> : null}
      <label htmlFor="screenshot_url">Screenshot or recording link</label>
      <input id="screenshot_url" name="screenshot_url" type="url" aria-describedby="screenshot_url-help" defaultValue={state.values?.screenshot_url?.[0]} />
      <p id="screenshot_url-help">Optional. A link to an image or video, for example from a screenshot tool.</p>
      {state.fields?.screenshot_url ? <p>{state.fields.screenshot_url[0]}</p> : null}
      <label htmlFor="email">Email for follow-up questions</label>
      <input id="email" name="email" type="email" autoComplete="email" defaultValue={state.values?.email?.[0]} />
      {state.fields?.email ? <p>{state.fields.email[0]}</p> : null}
      <input name="_gotcha" type="text" tabIndex={-1} autoComplete="off" hidden />
      {state.message && !state.fields ? <p role="alert">{state.message}</p> : null}
      <button disabled={pending}>{pending ? "Sending" : "Report bug"}</button>
    </form>
  );
}