Templates / Next.js 16
Next.js App Router contact form
App Router apps that want either zero server code or a thin action wrapper.
Live preview
Preview only — does not submit. Copy the code block below for the real snippet.
Copy-paste code
export default function ContactPage() {
return (
<form action="https://formheron.com/f/YOUR_KEY" method="POST" className="space-y-3">
<input className="w-full border px-3 py-2" type="email" name="email" required />
<textarea className="w-full border px-3 py-2" name="message" required />
<input type="text" name="_hp" tabIndex={-1} autoComplete="off" aria-hidden="true"
style={{ position: "absolute", left: "-9999px" }} />
<button type="submit" className="rounded bg-emerald-700 px-4 py-2 text-white">
Send
</button>
</form>
);
}What to change
- Replace YOUR_KEY.
- Add your production origin to the allowlist.
- Set form redirect to /thanks on your domain if you want a branded success page.