Feedback form

{
  "version": 1,
  "title": "Feedback",
  "fields": [
    {
      "id": "rating",
      "type": "rating",
      "label": "How useful was this?",
      "required": true,
      "validation": {
        "max": 5
      }
    },
    {
      "id": "comment",
      "type": "textarea",
      "label": "What would make it better?",
      "rows": 4,
      "validation": {
        "max_length": 4000
      }
    },
    {
      "id": "email",
      "type": "email",
      "label": "Email, if you'd like a reply"
    }
  ],
  "settings": {
    "submit_label": "Send feedback",
    "success_message": "Thanks for the feedback."
  }
}

IKIFORM_SECRET_KEY=ik_sk_your_secret_key

"use server";

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

export async function sendFeedbackForm(_previous: FeedbackFormState, formData: FormData): Promise<FeedbackFormState> {
  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 for the feedback." };
  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 FeedbackFormState, sendFeedbackForm } from "./actions";

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

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

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

  return (
    <form action={action}>
      <label htmlFor="rating">How useful was this?</label>
      <input id="rating" name="rating" type="number" min={1} max={5} step={1} required defaultValue={state.values?.rating?.[0]} />
      {state.fields?.rating ? <p>{state.fields.rating[0]}</p> : null}
      <label htmlFor="comment">What would make it better?</label>
      <textarea id="comment" name="comment" rows={4} maxLength={4000} defaultValue={state.values?.comment?.[0]} />
      {state.fields?.comment ? <p>{state.fields.comment[0]}</p> : null}
      <label htmlFor="email">Email, if you'd like a reply</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" : "Send feedback"}</button>
    </form>
  );
}