How to Add a Contact Form to a Vercel Site

Vercel has no forms product. Unlike Netlify, there is nothing to enable: your form posts into the void until you give it somewhere to go. You have two options. Write a Vercel Function or a Next.js Server Action and own the email, spam, and rate limiting yourself, or point the form's action at an external form endpoint and write no backend at all:

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <textarea name="message" required></textarea>
  <!-- honeypot: bots fill it, humans never see it -->
  <input type="text" name="_gotcha" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" />
  <button type="submit">Send</button>
</form>

Full disclosure: ShipMyForm is our product. The function route below is written to be actually usable, not as a strawman, and there is a section on when it is the better choice.

Why there is no easy answer here

Netlify detects a form at build time and captures submissions for you. Vercel does not do this and has never offered it. Vercel's own answer to "how do I handle a form" is Vercel Functions, and its marketplace lists third-party form backends for people who would rather not write one.

So the question is not which Vercel setting do I turn on. It is who writes the submission handler.

Option 1: a Next.js Server Action

If you are on Next.js, this is the path the framework points you at. The action runs on the server, so your email API key never reaches the browser.

// app/actions.ts
"use server";

export async function sendContact(initialState, formData) {
  const email = String(formData.get("email") ?? "");
  const message = String(formData.get("message") ?? "");
  if (!email.includes("@") || message.length < 10) {
    return { message: "Please check your details." };
  }

  // your transactional email provider goes here
  await sendEmail({ to: "[email protected]", from: "[email protected]", text: message });
  return { message: "Thanks, we'll be in touch." };
}

// app/contact-form.tsx
"use client";

import { useActionState } from "react";
import { sendContact } from "./actions";

export function ContactForm() {
  const [state, formAction, pending] = useActionState(sendContact, { message: "" });
  return (
    <form action={formAction}>
      <input type="email" name="email" required />
      <textarea name="message" required />
      <p aria-live="polite">{state.message}</p>
      <button disabled={pending}>Send</button>
    </form>
  );
}

That is the tutorial version, and it works. Here is what the tutorials leave out.

The action is a public endpoint

It is tempting to read a Server Action as a private function call, because there is no visible API route. It is not. Next.js documentation is blunt about this: an action runs as a POST request against the page and is reachable by anyone who can send the same POST, so you should treat every action as an untrusted entry point.

Next.js does compare the request's Origin against the Host and reject mismatches, which stops a browser on another site from firing your action. It does not stop curl, or a script that sets whatever headers it likes. Once a bot finds the endpoint, every submission it sends runs your handler and, if you have not checked, sends you an email.

Rate limiting does not work the way you expect

The obvious fix is a per-IP counter. On Vercel, this is the usual first attempt:

// This does not work.
const seen = new Map();

Functions are stateless and scale out to many parallel instances, so that map is per-instance and empty again after a cold start. A bot spreading requests across instances never trips it. Real limiting needs shared state, which means Redis or a rule in Vercel's WAF. That is another service, another account, and another set of keys, for a contact form.

Deploys can break a form that is already open

Each Server Action has a build-time ID, and new deployments generate new ones. Next.js rotates them at least every 14 days even when nothing changed. A visitor who opened your contact page before a deploy and submits after it can hit an action ID that no longer exists, producing a "Failed to find Server Action" error. It is recoverable with a refresh, but the visitor has to know that, and a contact form is exactly the kind of page people leave open.

The Hobby plan bars commercial use

This is the one that catches agencies. Vercel's documentation states plainly that the Hobby plan restricts users to non-commercial, personal use only. A contact form on a client site, a business site, or anything that sells is commercial use, and the Pro plan starts at 20 dollars per user per month.

None of this makes Server Actions wrong. It means a production contact form built this way is a small project, not a snippet.

Option 2: a Vercel Function

On Astro, SvelteKit, Nuxt, or plain HTML, the same work lives in a function instead. The trade-offs are identical: you still write the validation, the spam defense, the rate limiting, and the email sending. Two platform limits worth knowing, current as of September 2026: a function's request body is capped at 4.5 MB, and a Server Action's body defaults to 1 MB, which matters the moment your form accepts file uploads.

What the DIY path actually costs

"Just write a function" is one line of advice that expands into five pieces of infrastructure:

Each is a solved problem, and each is a service, a key, and a thing that can break on a Friday.

Option 3: point the form somewhere else

A form backend is a URL that does all five. Your Vercel project stays static, which also sidesteps the Hobby commercial-use question, because the form posts off-platform.

The markup at the top of this page is the whole integration. To submit without a page reload, post it with fetch instead:

const res = await fetch("https://shipmyform.com/f/YOUR_FORM_ID", {
  method: "POST",
  body: new FormData(form),
  headers: { Accept: "application/json" },
});
if (res.ok) form.outerHTML = "<p>Thanks, we'll be in touch.</p>";

Nothing here is Next.js-specific, so the same markup works on Astro, SvelteKit, Nuxt, or a hand-written HTML page on Vercel.

Which one should you pick?

• The submission has to do something custom such as writing to your database, calling your API, or branching on business logic → write the function. A form backend delivers a submission; it does not run your code.
• You already have Redis, an email provider, and a queue → you have paid the setup cost. Use them.
• You want a contact form, not a subsystem → point it at an endpoint and spend the afternoon on something else.
• Your Vercel project is a static marketing site on Hobby → keep it static. An external endpoint keeps you out of Function invocations and out of the commercial-use clause.

Next steps

• Going deeper on the framework side: Next.js form handling
• Moving off a host with built-in forms? Netlify Forms alternatives
• Build the markup in a browser: contact form generator
• Start free: 100 submissions a month, spam filtering included, no credit card.