Next.js Form Submissions Without Custom API Routes
Learn how to connect Next.js App Router forms to Form2Lead form endpoints cleanly with AJAX fetch or native POST submission.
TL;DR: How to implement next.js form submissions without custom api routes?
In Next.js, you can handle form submissions without writing custom API routes by submitting form data directly to a Form2Lead HTTP endpoint using `fetch()` or standard HTML form POST actions.
The Problem With Custom Next.js API Form Handlers
Writing custom `/api/contact` routes in Next.js requires configuring a transactional email provider, managing rate limiters, setting up database tables, handling CORS headers, and managing error states.
Connecting Next.js Client Components to Form2Lead
Use `fetch()` to post FormData to Form2Lead and provide feedback state to users without full-page reloads.
'use client';
import { useState } from 'react';
export function ContactSection() {
const [loading, setLoading] = useState(false);
const [done, setDone] = useState(false);
async function handleForm(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
setLoading(true);
const data = new FormData(e.currentTarget);
const res = await fetch('https://form2lead.com/api/v1/f/YOUR_ID', {
method: 'POST',
body: data,
headers: { Accept: 'application/json' },
});
setLoading(false);
if (res.ok) setDone(true);
}
if (done) return <div className="p-4 bg-green-50 text-green-800 rounded">Lead received!</div>;
return (
<form onSubmit={handleForm} className="space-y-4">
<input name="email" type="email" required placeholder="Email" className="p-2 border" />
<button type="submit" disabled={loading} className="px-4 py-2 bg-black text-white">
{loading ? 'Submitting...' : 'Submit'}
</button>
</form>
);
}Guide Q&A
Will this work with Vercel deployment?
Yes! Because submission requests go directly to Form2Lead endpoints, your Vercel serverless function execution budget remains untouched.