Next.js newsletter form
Add a newsletter signup to your Next.js site with no backend. One email field, copy-paste code, and subscribers land in your inbox or your email tool. No API route required.
How to build it
- Create a form in your Formpaste dashboard and copy its access key.
- Copy the Next.js code into a client component and pick your styling.
- Replace YOUR_ACCESS_KEY_HERE with your access key, then deploy.
Prompt for your AI coding agent
Add a Formpaste newsletter signup form to my Next.js app. Use a client component with a single email field that POSTs as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. Show a subscribed message after the fetch resolves. Do not add an API route.Or connect the Formpaste MCP server to Claude Code, Codex, Cursor, Claude Desktop, VS Code, or any mcp-remote client. See the setup guide.
Next.js gotchas
Next.js gives you API routes, but for simpler forms, spinning up a route handler is overkill. Formpaste handles the backend so you can keep your Next.js app focused on the frontend. Works with both App Router and Pages Router.
Client component for the fetch version
The onSubmit fetch needs to run in the browser, so put the form in a file with "use client" at the top. A plain <form action> with a redirect works in a server component too if you do not need JS.
No API route needed
You do not need /api/contact. Posting straight to the Formpaste endpoint keeps the app static-friendly and deployable anywhere, including static export.
Server Actions are optional
You can wire a Server Action, but it is not required and adds a server round-trip. The direct POST is simpler and works on static hosting.
Edge runtime and file uploads
If a route uses the Edge runtime, multipart form data handling differs from Node. For file-upload forms, post directly to Formpaste from the client so your own runtime never parses the upload.
Static export friendly
Because the form posts to an external endpoint, output: export keeps working. No server code of yours runs at request time.
What to get right
One field converts best
A newsletter form should ask for email only. Every extra field lowers signups.
Confirm before you celebrate
Show a subscribed message on success. If you need double opt-in, send the confirmation from your email tool, not the form.
Push to your email tool
Forward submissions to your ESP with a webhook so new subscribers land where you send campaigns.
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.
export function ContactForm() {
async function onSubmit(e) {
e.preventDefault();
const form = new FormData(e.currentTarget);
await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form) });
}
return (
<form onSubmit={onSubmit} className="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 className="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 className="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>
<button type="submit" className="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">Subscribe</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">Next.js newsletter form FAQ
Paste a form. Get submissions.
Instantly without setting up any backend, servers or databases. 250 submissions/mo free - no credit card.