How to Add a Contact Form to Vercel

Vercel is one of the most popular hosting platforms for static sites and frontend frameworks. But Vercel doesn't include built-in form handling. You'd normally need to write serverless functions or API routes. With a form backend service, you can add a fully functional contact form to any Vercel-hosted site using just HTML.

In this guide, you'll learn why Vercel doesn't handle forms natively, how to add a contact form to your Vercel project in four steps, and how it works across every framework Vercel supports.

Why Vercel doesn't handle forms natively

Vercel is a deployment platform, not a form processor. Unlike Netlify (which has Netlify Forms), Vercel expects you to handle form submissions through your own API routes, serverless functions, or external services.

That means if you want a contact form on your Vercel site, you typically have to:

Write an API route or serverless function to receive the POST request
Set up an email service (SendGrid, AWS SES, etc.) to deliver notifications
Handle spam filtering, validation, and error handling yourself
Store submissions somewhere if you want to review them later

A form backend like FormWit fills that gap without adding complexity to your Vercel project. You get a form endpoint URL, point your HTML form at it, and submissions are handled for you: email notifications, spam protection, and a dashboard to view all responses.

Add a contact form to your Vercel site

Here's how to get a working contact form on your Vercel-hosted site in four steps. No serverless functions, no API routes, no backend code.

Step 1: Create a FormWit account and get your endpoint

Go to app.formwit.com/auth/signup and create a free account. No credit card required.

Once you're in, click Create Form and give it a name (e.g., "Vercel Contact Form"). You'll get a unique endpoint URL that looks like https://app.formwit.com/api/s/YOUR_FORM_ID.

Step 2: Add the HTML form to your site

Add the following form to any page in your Vercel project. This works whether your project uses Next.js, Astro, SvelteKit, Nuxt, or plain HTML.

<form action="https://app.formwit.com/api/s/YOUR_FORM_ID" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <!-- Honeypot spam protection -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

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

Replace YOUR_FORM_ID with the endpoint ID from your FormWit dashboard. The hidden _gotcha field is a honeypot that catches bots without annoying your users with a CAPTCHA.

Step 3: Deploy to Vercel

Push your changes to your git repository. Vercel automatically detects the push and deploys your updated site. If you haven't connected your repo to Vercel yet, go to vercel.com/new and import your project.

No special configuration is needed. The form submits directly to FormWit's endpoint, so there are no environment variables, serverless functions, or build settings to configure.

Step 4: Test the form

Visit your deployed site and submit the form. You'll see the submission appear in your FormWit dashboard and receive an email notification within seconds.

Works with any Vercel framework

Because the form submits directly to an external endpoint via a standard HTTP POST, it works with every framework Vercel supports. There's nothing framework-specific about the integration.

Next.js (App Router or Pages Router) - Add the form to any page or client component. No need for app/api/ route handlers or pages/api/ serverless functions. See our Next.js contact form guide for a detailed walkthrough.
Astro - Works in both static and SSR mode. Drop the form into any .astro page or component. See our Astro contact form guide.
SvelteKit - Add the form to any +page.svelte file. No form actions or server-side load functions needed.
Nuxt - Place the form in any Vue component or page. No server/api/ routes required. See our Nuxt contact form guide.
Plain HTML / Vite - The simplest case. Just add the HTML form to your index.html or any other page.

AJAX submission (no page reload)

If you want a smoother experience without a full page reload, submit the form with JavaScript using fetch():

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);

  const response = await fetch(form.action, {
    method: 'POST',
    body: data,
  });

  if (response.ok) {
    alert('Message sent!');
    form.reset();
  } else {
    alert('Something went wrong. Please try again.');
  }
});

This approach works with any Vercel framework. In React-based projects (Next.js), you'd put this logic inside a handleSubmit function. In Svelte or Vue, use the framework's event handling. The FormWit endpoint accepts standard FormData POST requests regardless of how you send them.

Custom redirects

By default, FormWit shows a confirmation page after submission. To redirect users to your own thank-you page instead, add a hidden redirect_to field:

<input type="hidden" name="redirect_to" value="https://yoursite.com/thank-you" />

Place this inside your <form> tag. After a successful submission, users are redirected to the URL you specify. This is useful for keeping users on your Vercel site and showing them a branded confirmation page.

Summary

You don't need serverless functions, API routes, or any backend code to add a contact form to your Vercel site. A form backend service like FormWit handles the entire submission pipeline: receiving data, filtering spam, sending email notifications, and storing submissions in a dashboard.

It works with every framework Vercel supports: Next.js, Astro, SvelteKit, Nuxt, and plain HTML. Set it up once and your form just works on every deploy.

FormWit's free plan includes unlimited forms, 100 submissions per month, email notifications, and built-in spam protection. Get started free.

Frequently asked questions

Does FormWit work on Vercel?

Yes. FormWit works on every Vercel-hosted site regardless of framework. The form submits directly from the browser to FormWit's endpoint, so no Vercel serverless functions, Edge functions, or API routes are needed. Zero Vercel-specific configuration required.

Can I use FormWit instead of Vercel serverless functions?

Yes, for contact forms and similar data collection. FormWit handles submission storage, email notifications, and spam protection out of the box. Serverless functions make sense when you need custom server-side logic like payment processing or database writes. For standard contact forms, FormWit is simpler and requires no code.

Does it work with Vercel Edge?

Yes. The form submission bypasses Vercel's infrastructure entirely. The browser sends the POST request directly to FormWit's API, so it works the same whether your Vercel project uses Edge Runtime, Node.js Runtime, or static hosting. Vercel never sees the form submission.