v0 contact form that actually sends: 3 ways

// app/api/contact/route.ts — runs on the server, so the key stays secret.
import { Resend } from "resend";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const form = await request.formData();
  const name = String(form.get("name") ?? "").slice(0, 200);
  const email = String(form.get("email") ?? "").slice(0, 200);
  const message = String(form.get("message") ?? "").slice(0, 5000);
  if (!email.includes("@") || !message) {
    return Response.json({ success: false, message: "Email and message are required." }, { status: 400 });
  }
  const { error } = await resend.emails.send({
    from: "Website <contact@your-verified-domain.com>",
    to: ["you@your-verified-domain.com"],
    replyTo: email,
    subject: `New message from ${name || email}`,
    text: message,
  });
  if (error) return Response.json({ success: false, message: "Could not send." }, { status: 502 });
  return Response.json({ success: true });
}

Add a contact section with a form. Build it as a React client component ("use client") that posts with fetch.
Submissions go to Formgong, a hosted form backend. Do not use Server Actions, route handlers (app/api) or Resend.
- POST the fields name, email, message to https://formgong.com/submit with FormData and the header Accept: application/json.
- Append access_key = "fk_your_access_key" (public, belongs in frontend code).
- Add a hidden honeypot input named "botcheck".
- Show success only if the JSON response has success === true; otherwise keep the input and show the returned message.

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

// Your public access key from https://formgong.com/new (safe in frontend code).
const ACCESS_KEY = "fk_your_access_key";

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

  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const form = event.currentTarget; // React clears currentTarget after await
    setStatus("sending");
    const body = new FormData(form);
    body.append("access_key", ACCESS_KEY);
    try {
      const res = await fetch("https://formgong.com/submit", {
        method: "POST",
        headers: { Accept: "application/json" },
        body,
      });
      const data = await res.json();
      if (!data.success) throw new Error(data.message || data.code);
      form.reset();
      setStatus("sent");
    } catch (e) {
      setError(e instanceof Error ? e.message : "Could not send");
      setStatus("error");
    }
  }

  return (
    <form onSubmit={onSubmit}>
      <input name="name" required placeholder="Name" />
      <input name="email" type="email" required placeholder="Email" />
      <textarea name="message" required placeholder="Message" />
      {/* Honeypot: hidden from people, bots fill it in */}
      <input name="botcheck" tabIndex={-1} autoComplete="off" aria-hidden="true"
        style={{ position: "absolute", left: "-9999px" }} />
      <button disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send message"}
      </button>
      <p aria-live="polite">
        {status === "sent" && "Thanks, your message was sent."}
        {status === "error" && error}
      </p>
    </form>
  );
}