Platform Guide

Vercel Contact Form

Add a contact form to a site deployed on Vercel

Last updated October 28, 2026

To add a contact form to a site on Vercel without writing an API route, post the form to https://api.staticforms.dev/submit with your form's API key in an apiKey field. Static Forms receives each submission and emails it to you. This works for a plain HTML site, a static export and a full Next.js app alike, and on the free plan.

Plain HTML or static output

HTML

redirectTo must be a full URL on your vercel.app or custom domain. The HTML guide covers every field, CAPTCHA options and troubleshooting.

Next.js: keep the key in an environment variable

Add the variable

In your Vercel project, open Settings → Environment Variables and add NEXT_PUBLIC_STATIC_FORMS_KEY with your API key.

Use it in the form

TSX

Redeploy

NEXT_PUBLIC_ variables are inlined at build time, so redeploy after adding or changing one.

The NEXT_PUBLIC_ prefix puts the key in the browser bundle. That is fine: the form API key is public by design. For Server Actions, a fetch-based client component and static export, see the Next.js guide.

FAQ

Does this work on the free plan?

Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.

How do I keep spam out?

Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.

Is it safe to put the API key in my HTML?

Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard. From the Starter plan you can also restrict submissions to your own domains.