Technical Guide5 min readLast updated: 2026-08-01

How to Handle 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.

Direct AnswerGEO / AEO Extractable

TL;DR: How to implement how to handle 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.

Verified product capabilityRead documentation →

The Problem With Custom Next.js API Form Handlers

Writing custom `/api/contact` routes in Next.js requires configuring nodemailer/Resend, 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://submit.form2lead.com/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

Direct AnswerGEO / AEO Extractable

Will this work with Vercel deployment?

Yes! Because submission requests go directly to Form2Lead endpoints, your Vercel serverless function execution budget remains untouched.