Next.js

// app/contact/page.tsx: a Server Component. No React code runs in the browser, so the form also works before hydration.
// The bot check is one small plain script (no cookies, no widget). Without it, submissions wait in your Spam folder.
export default function ContactPage() {
  return (
    <form action="https://f.formparcel.live/f/f_k7QmXp2aVb9sTn4cLw8RhE" method="POST">
      <script src="https://f.formparcel.live/f/formparcel.js" async />
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" />
      </div>
      <input type="hidden" name="_next" value="https://your-site.example/thanks" />

      <label htmlFor="name">Name</label>
      <input id="name" name="name" required />
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
      <button type="submit">Send</button>
    </form>
  );
}

"use client";

import Script from "next/script";
import { useState, type FormEvent } from "react";

const ENDPOINT = "https://f.formparcel.live/f/f_k7QmXp2aVb9sTn4cLw8RhE";
// FormParcel's bot check: no cookies, no widget. Without it, submissions wait in your Spam folder.
const BOT_CHECK_SCRIPT = "https://f.formparcel.live/f/formparcel.js";
declare global {
  interface Window {
    FormParcel?: { proof: (endpoint: string) => Promise<string> };
  }
}

export function ContactForm() {
  const [status, setStatus] = useState<"idle" | "sending" | "sent" | "error">("idle");

  async function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("sending");
    const data = Object.fromEntries(new FormData(event.currentTarget));
    try {
      // One proof per submission. The bot check may still be loading on a slow phone, so wait for it (10 seconds at most). If it cannot load, the lead is still sent and waits in your Spam folder.
      const fp = window.FormParcel ?? (await new Promise<Window["FormParcel"]>((ok) => { addEventListener("formparcel:ready", () => ok(window.FormParcel), { once: true }); setTimeout(() => ok(undefined), 10000); }));
      const _fp_proof = await fp?.proof(ENDPOINT).catch(() => undefined);
      const response = await fetch(ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ ...data, _fp_proof }),
      });
      // 204: the post was dropped as spam (the trap field was filled). Nothing was saved.
      const result = response.status === 204 ? null : await response.json();
      setStatus(result?.accepted ? "sent" : "error");
    } catch {
      setStatus("error");
    }
  }

  if (status === "sent") return <p>Thanks, we got your message.</p>;

  return (
    <form onSubmit={onSubmit}>
      <Script src={BOT_CHECK_SCRIPT} strategy="afterInteractive" />
      {/* Spam trap: keep it hidden from people. */}
      <div aria-hidden="true" style={{ position: "absolute", left: "-10000px" }}>
        <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" />
      </div>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" required />
      <label htmlFor="email">Email</label>
      <input id="email" name="email" type="email" required />
      <label htmlFor="message">Message</label>
      <textarea id="message" name="message" required />
      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send"}
      </button>
      {status === "error" ? <p role="alert">Your message was not sent. Please try again.</p> : null}
    </form>
  );
}