Contact form for Vercel — no serverless function required

Serverless functions for contact forms mean cold starts, secrets, and spam work you did not want.

Setup

Deploy your frontend to Vercel.
Create a FormHeron form.
Point forms at FormHeron.
Allow your production domain.

Working example

app/contact/page.tsx

export default function ContactPage() {
  return (
    <form action="https://formheron.com/f/YOUR_KEY" method="POST">
      <input type="email" name="email" required />
      <textarea name="message" required />
      <input type="text" name="_hp" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px" }} />
      <button type="submit">Send</button>
    </form>
  )
}

Common problems

Edge functions for forms

Skip them — FormHeron is already the edge for submissions.

Preview deployments

Add vercel.app preview hosts to the origin allowlist.

Environment secrets

Form public keys are not secrets. Never put ENCRYPTION or SMTP keys in the frontend project.

FAQ

Do I need a Vercel serverless function for contact forms?

No. Post directly to FormHeron.

Next.js on Vercel?

See the Next.js platform page.

Webhooks to my API?

Indie/Pro deliver HMAC-signed webhooks you can verify in any language.

Start free Docs