Integration Tutorial

How to Connect Next.js Forms to Form2Lead

Step-by-step developer instructions for Next.js applications.

Last updated: 2026-08-01

Direct AnswerGEO / AEO Extractable

How do you send Next.js form submissions to Form2Lead?

Connect HTML forms or Server Actions in Next.js (App Router & Pages Router) to a Form2Lead HTTP POST endpoint to handle lead capture without building custom database schemas or email server handlers.

Verified product capabilityRead documentation →

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://submit.form2lead.com/f/YOUR_FORM_ID`).

02. Implement Next.js Form Component

Create a client or server component making a POST request on submission.

'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://submit.form2lead.com/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" />
      <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>
  );
}

Next.js Integration FAQ

Direct AnswerGEO / AEO Extractable

Does Form2Lead work with Next.js Server Actions?

Yes! You can invoke `fetch("https://submit.form2lead.com/f/...")` inside a Next.js Server Action and return response state.