React contact form
without a custom backend.

"use client";
import { useRef, useState } from "react";

export default function ContactForm() {
  const [status, setStatus] = useState("");
  const [busy, setBusy] = useState(false);
  const request = useRef(null);
  const submitting = useRef(false);


  async function submit(event) {
    event.preventDefault();
    if (submitting.current) return;
    const form = event.currentTarget;
    const body = new FormData(form);
    
    submitting.current = true;
    setBusy(true);
    setStatus("");
    const controller = new AbortController();
    const timeout = setTimeout(() => controller.abort(), 20000);
    try {
      const fingerprint = JSON.stringify([...body.entries()].filter(([name]) => name !== "cf-turnstile-response"));
      if (request.current?.fingerprint !== fingerprint) {
        request.current = { fingerprint, id: crypto.randomUUID() };
      }
      const response = await fetch("https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY", {
        method: "POST",
        headers: { "Idempotency-Key": request.current.id },
        body,
        signal: controller.signal,
      });
      const result = await response.json().catch(() => null);
      if (!response.ok || result?.success !== true) {
        throw new Error(result?.error?.message || "We could not confirm receipt. Your details are still here. Please try again.");
      }
      setStatus("Thanks! Your message has been received.");
      form.reset();
      request.current = null;
    } catch (error) {
      setStatus(controller.signal.aborted
        ? "This is taking longer than expected. We could not confirm receipt. Your details are still here; please try again."
        : error instanceof Error && !(error instanceof TypeError)
          ? error.message
          : "We could not complete the request. Your details are still here. Please try again.");
    } finally {
      clearTimeout(timeout);
      submitting.current = false;
      setBusy(false);
    }
  }

  return (
    <form onSubmit={submit}>
      <fieldset disabled={busy} aria-label="Contact details" style={{ border: 0, margin: 0, padding: 0 }}>
      <label>Your name <input name="name" autoComplete="name" required /></label>
      <label>Email address <input name="email" type="email" autoComplete="email" required /></label>
      <label>Your message <textarea name="message" required /></label>
      <input name="botcheck" type="text" tabIndex={-1} autoComplete="off" style={{ display: "none" }} hidden />
      </fieldset>
      <button disabled={busy}>{busy ? "Sending…" : "Send message"}</button>
      <p role="status">{status}</p>
    </form>
  );
}