Integration Tutorial

How to Connect Gatsby Forms to Form2Lead

Step-by-step developer instructions for Gatsby applications.

Last updated: 2026-08-15

Direct Answer

How do you send Gatsby form submissions to Form2Lead?

Add a serverless contact form to any Gatsby site by posting form data from a React component to a Form2Lead endpoint — no plugins, no server.

Verified product capabilityRead documentation →

Why use Form2Lead with Gatsby?

Gatsby compiles to static React pages with no server runtime, so a contact form needs an external backend. Form2Lead is that backend: a React component posts FormData to your Form2Lead URL with `fetch()`, and submissions are validated, spam-filtered, emailed, and stored. No GraphQL, no Lambda functions, no email SMTP setup.

Prerequisites

✔A Gatsby site
✔A Form2Lead endpoint URL

Step-by-Step Integration Guide

01. Create a Gatsby Form Component

Add a React component that posts FormData to Form2Lead on submit.

import React, { useState } from 'react';

export default function ContactForm() {
  const [sent, setSent] = useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    const res = await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
      method: 'POST',
      body: new FormData(e.target),
      headers: { Accept: 'application/json' },
    });
    if (res.ok) setSent(true);
  };

  if (sent) return <p>Thank you! We’ll get back to you soon.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input name="name" placeholder="Name" required />
      <input name="email" type="email" placeholder="Email" required />
      <textarea name="message" placeholder="Message" required />
      <button type="submit">Send</button>
    </form>
  );
}

02. Render the Component on a Page

Import ContactForm into any Gatsby page or layout.

import ContactForm from '../components/ContactForm';

export default function ContactPage() {
  return (
    <main>
      <h1>Contact</h1>
      <ContactForm />
    </main>
  );
}

Gatsby Integration FAQ

Direct Answer

Does Form2Lead work with Gatsby Functions or serverless builds?

Yes — but you do not need either. The browser posts straight to Form2Lead, so Gatsby Functions and Netlify/Vercel serverless functions stay unused.