How to Connect Next.js Forms to Form2Lead
Step-by-step developer instructions for Next.js applications.
How do you send Next.js form submissions to Form2Lead?
Build a Next.js contact form without an API route — post FormData to a Form2Lead endpoint and get email alerts, spam filtering, and a searchable inbox.
Why use Form2Lead with Next.js?
Next.js projects usually handle forms with a custom `/api/contact` route that needs a database, an email provider, rate limiting, and error handling — or with a Server Action that still has to store the lead somewhere. Form2Lead replaces all of that with a single external HTTP POST endpoint: because the endpoint is not part of your app, you need no API route, no Server Action, and no route handler. Your Next.js app stays lean, and leads land in a searchable inbox with honeypot spam protection, instant email notifications, and CSV export. Works in the App Router and Pages Router alike.
Prerequisites
- ✔Next.js 13+ (App Router recommended)
- ✔A Form2Lead endpoint URL from your dashboard
Step-by-Step Integration Guide
01. Copy Form2Lead Endpoint
Create a form in Form2Lead dashboard and copy its submission URL (`https://form2lead.com/api/v1/f/YOUR_FORM_ID`).
02. Or Use a Native HTML Form (no Server Action needed)
Because the endpoint is external, a plain form with an action attribute works inside any component — even a Server Component — with zero JavaScript and no API route:
// app/contact/page.tsx — no 'use client', no Server Action, no API route
export default function ContactPage() {
return (
<form action="https://form2lead.com/api/v1/f/YOUR_FORM_ID" method="POST">
<input name="name" required placeholder="Name" />
<input name="email" type="email" required placeholder="Email" />
<textarea name="message" required placeholder="Message" />
<input type="text" name="_gotcha" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
<button type="submit">Send Message</button>
</form>
);
}03. Or Use a Client Component with fetch (App Router)
For inline success states, mark the component with `'use client'`, call preventDefault, and POST FormData to your endpoint:
'use client';
import { useState } from 'react';
export default function ContactForm() {
const [status, setStatus] = useState<'idle' | 'submitting' | 'success' | 'error'>('idle');
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setStatus('submitting');
const formData = new FormData(e.currentTarget);
try {
const res = await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
method: 'POST',
body: formData,
headers: { Accept: 'application/json' },
});
if (res.ok) setStatus('success');
else setStatus('error');
} catch {
setStatus('error');
}
}
return (
<form onSubmit={handleSubmit} className="space-y-4">
<input name="name" required placeholder="Name" className="border p-2 rounded" />
<input name="email" type="email" required placeholder="Email" className="border p-2 rounded" />
<textarea name="message" required placeholder="Message" className="border p-2 rounded" />
<input type="text" name="_gotcha" className="hidden" tabIndex={-1} autoComplete="off" />
<button type="submit" disabled={status === 'submitting'} className="bg-black text-white px-4 py-2 rounded">
{status === 'submitting' ? 'Sending...' : 'Send Message'}
</button>
{status === 'success' && <p className="text-green-600">Lead sent successfully!</p>}
</form>
);
}04. Deploy and Verify
Deploy to Vercel or any host, add your production domain to the form’s Allowed Domains in Form2Lead, and submit a test lead — the notification email and dashboard entry confirm the wiring. Your serverless function usage stays untouched because nothing posts through your app.
Next.js Integration FAQ
Do I need an API route or Server Action to handle a Next.js contact form?
No. The Form2Lead endpoint is external, so the browser posts to it directly — either via a plain form action attribute or a fetch() call in a client component. No `/api/contact` route, no Server Action, and no serverless function is involved.
Does Form2Lead work with Next.js Server Actions?
Yes, if you prefer that pattern: call fetch("https://form2lead.com/api/v1/f/...") inside a Server Action and return the response state to your form. It works — but it is unnecessary plumbing, since the client-side POST already skips your server entirely.
Will this work when deployed to Vercel?
Yes. Submissions go straight from the browser to Form2Lead, so your Vercel serverless function execution budget remains untouched. The same applies to self-hosted Next.js, Docker, or any other deployment target.
How do I stop bots from spamming my Next.js form?
Add the hidden `_gotcha` honeypot input shown in the examples. Form2Lead also applies IP rate limiting server-side, so automated floods are rejected without any client-side friction for real users.
Does this work with the Pages Router?
Yes. The plain form action works in any page, and the fetch-based client component works identically in `pages/` — nothing in the setup is App Router specific.