Building Production-Ready Contact Forms with Cloudflare Turnstile and Resend

First, grab your Turnstile site key from Cloudflare.

Add it to .env.local:

NEXT_PUBLIC_TURNSTILE_SITE_KEY=your-site-key
TURNSTILE_SECRET_KEY=your-secret-key

Then add the widget to your form:

"use client";

export default function ContactForm() {
  return (
    <form method="POST" action="/api/contact">
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="details" required />

      {/* Turnstile Challenge */}
      <div
        className="cf-turnstile"
        data-sitekey={process.env.NEXT_PUBLIC_TURNSTILE_SITE_KEY}
      />

      <button type="submit">Send Message</button>

      <Script
        src="https://challenges.cloudflare.com/turnstile/v0/api.js"
        async
        defer
      />
    </form>
  );
}

In your API route (/api/contact/route.ts), verify the token before sending any email. Always verify server-side—client tokens can be faked.

export async function POST(request: Request) {
  const formData = await request.formData();
  const turnstileToken = formData.get("cf-turnstile-response");

  if (!turnstileToken) {
    return NextResponse.json(
      { ok: false, message: "Spam verification failed." },
      { status: 400 },
    );
  }

  // Verify with Cloudflare
  const verifyResponse = await fetch(
    "https://challenges.cloudflare.com/turnstile/v0/siteverify",
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        secret: process.env.TURNSTILE_SECRET_KEY,
        response: turnstileToken,
      }),
    },
  );

  const verifyData = await verifyResponse.();

   (!verifyData.) {
     .(
      { : , :  },
      { :  },
    );
  }
}

Get your API key from Resend and send the email using their clean API:

const emailPayload = {
  from: process.env.RESEND_FROM,
  to: [process.env.RESEND_TO],
  subject: `New inquiry from ${formData.get("name")}`,
  reply_to: formData.get("email"),
  text: `Name: ${formData.get("name")}\nEmail: ${formData.get("email")}\n\n${formData.get("details")}`,
};

const emailResponse = await fetch("https://api.resend.com/emails", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${process.env.RESEND_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify(emailPayload),
});

Sending an email is easy. Having it land in the inbox is hard. You need three DNS records:

Without these, Gmail/Outlook will mark your emails as spam or reject them entirely. I learned this the hard way—our contact form wasn't working for weeks until we added DMARC.

Progressive Enhancement

Your form should work even if JavaScript fails to load. Use the platform by detecting the content type in your API route:

const contentType = request.headers.get("content-type") ?? "";
const isFormSubmit = contentType.includes("application/x-www-form-urlencoded");

if (isFormSubmit) {
  return NextResponse.redirect(new URL("/contact?success=1", request.url), 303);
}

Specific Error Handling

Don't just return generic messages. Be specific about what went wrong (Missing fields, invalid email, security check failed) to help the user fix it.