Contact forms for Vercel
Add a contact form to your Vercel site with no serverless function and no backend of your own. The form is markup you deploy with the site, and submissions post straight to Formpaste and land in your inbox - spam filtered. Preview it live or copy the code.
How to create a Vercel form
- 1
Create a form in your Formpaste dashboard and copy its access key.
- 2
Add the markup above to a page in your project and pick your styling.
- 3
Replace YOUR_ACCESS_KEY_HERE with your access key, then deploy.
Prompt for your AI coding agent
Give me a plain HTML contact form for my Vercel site that POSTs to https://api.formpaste.com/submit with method POST and a hidden access_key input. Do not add an API route, a Serverless Function, or an Edge Function.Or connect the Formpaste MCP server to Claude Code, Codex, Cursor, Claude Desktop, VS Code, or any mcp-remote client. See the setup guide.
Markup you deploy, not a function
Vercel is happy to run serverless code for you, but a contact form does not need any. The form above is markup you ship with the site, and the browser posts it straight to Formpaste. There is no API route to add, no Serverless Function, and no Edge Function to keep an eye on.
The same form in any framework
Vercel deploys Next.js, Astro, plain HTML and much more. Because this is ordinary form markup, it drops into whichever one you use and behaves identically. Switching frameworks later does not change how submissions are collected.
Nothing of yours runs at submit time
When a visitor submits, the request goes to Formpaste, not to your deployment. That means no cold starts, no function logs to read, and no server-side code of yours in the path between the visitor and their message landing in your inbox.
How it works
Three simple steps for form submissions to land in your email inbox.
Create your form, set your form's action URL to Formpaste's endpoint, and add your access key.
Create your form
Sign up, verify your email, and create an access key in your dashboard.
Copy the code
Paste the snippet above into your project. Pick CSS or Tailwind to match your site.
<form action="https://api.formpaste.com/submit" method="POST" class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Name
<input type="text" name="name" placeholder="Your name" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Email
<input type="email" name="email" placeholder="you@example.com" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
</label>
<label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Message
<textarea name="message" required class="min-h-28 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100"></textarea>
</label>
<button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">Send</button>
</form>Add your access key
Replace the placeholder with your access key to start receiving submissions.
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">Contact forms for Vercel FAQ
Paste a form. Get submissions.
Instantly without setting up any backend, servers or databases. 250 submissions/mo free - no credit card.
What you get with Formpaste
No server, no DNS
Point your form at Formpaste - no backend, no DNS, no email server to run.
Spam filtered automatically
Heuristics + a quarantine folder you control. Real messages always get through.
Quarantine you control
Suspicious submissions land in a folder you review - nothing silently dropped.
Built for AI agents
An MCP server your coding agent calls to create a form and wire it up.
Copy-paste components
Accessible, copy-paste form code for HTML, React, TypeScript, JavaScript, and Astro.
Simple dashboard
Manage forms, inbox, quarantine, and delivery from one place.