How to Connect React Forms to Form2Lead
Step-by-step developer instructions for React applications.
How do you send React form submissions to Form2Lead?
Build a React contact form with no backend — submit FormData with fetch() to Form2Lead for email alerts, honeypot spam blocking, and a lead dashboard.
Why use Form2Lead with React?
React apps handle form state beautifully but still need a backend to receive, validate, and store submissions. Form2Lead turns that into one fetch() call: call preventDefault on submit, read the fields with `new FormData(e.target)` (uncontrolled) or send controlled-input state as JSON, and post to your endpoint. No SDK, no server, no database. Works with Vite, Create React App, Remix, and any React 18+ setup — and the same component logic ships unchanged inside Next.js and other React frameworks.
Prerequisites
- ✔React 18+
- ✔Form2Lead endpoint URL
Step-by-Step Integration Guide
01. Get Endpoint URL
Copy your Form2Lead endpoint from the dashboard.
02. Submit an Uncontrolled Form via FormData
Uncontrolled forms let the DOM own the values: call preventDefault, wrap the form with `new FormData(e.target)`, and POST it. No per-field state needed.
import React, { useState } from 'react';
export function ReactForm() {
const [status, setStatus] = useState('idle');
const onSubmit = async (e) => {
e.preventDefault(); // stop the browser's default navigation
setStatus('submitting');
const data = new FormData(e.target);
const res = await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
method: 'POST',
body: data,
headers: { Accept: 'application/json' },
});
setStatus(res.ok ? 'success' : 'error');
};
if (status === 'success') return <p>Thank you! We will get back to you soon.</p>;
return (
<form onSubmit={onSubmit}>
<input name="name" placeholder="Your Name" required />
<input name="email" type="email" placeholder="Your Email" required />
<input type="text" name="_gotcha" style={{ display: 'none' }} tabIndex={-1} autoComplete="off" />
<button type="submit" disabled={status === 'submitting'}>
{status === 'submitting' ? 'Sending...' : 'Submit'}
</button>
</form>
);
}03. Or Use Controlled Inputs and Post JSON
If your form already lives in React state (controlled inputs), skip FormData and post the values object as JSON with the application/json header.
import React, { useState } from 'react';
export function ControlledForm() {
const [values, setValues] = useState({ name: '', email: '', message: '' });
const [done, setDone] = useState(false);
const onSubmit = async (e) => {
e.preventDefault();
await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
method: 'POST',
headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
body: JSON.stringify(values),
});
setDone(true);
};
return (
<form onSubmit={onSubmit}>
<input value={values.name} onChange={(e) => setValues({ ...values, name: e.target.value })} required />
<input type="email" value={values.email} onChange={(e) => setValues({ ...values, email: e.target.value })} required />
<textarea value={values.message} onChange={(e) => setValues({ ...values, message: e.target.value })} required />
<button type="submit">Send</button>
{done && <p aria-live="polite">Lead received!</p>}
</form>
);
}04. Add the Honeypot and Verify
Include the hidden `_gotcha` input in uncontrolled forms (as above) and add your deployed origin to Allowed Domains. Submit a test lead and confirm the email alert and dashboard entry.
React Integration FAQ
Can I use React Hook Form with Form2Lead?
Yes. In your `handleSubmit(data)` callback, post the validated values to your Form2Lead endpoint — either `JSON.stringify(data)` with the application/json header, or append the fields to a FormData object. Both are accepted.
Do I always need e.preventDefault() before submitting?
Only when you submit with fetch()/Axios and want to render the result in React — otherwise the browser navigates away. If you use a plain form action pointing at the Form2Lead endpoint, no JavaScript or preventDefault is needed at all.
Should I use controlled inputs or FormData?
Either works. FormData (uncontrolled) is less code and matches a classic HTML form; controlled inputs make sense when you already validate or transform values in React state — then post them as JSON.
Does this work with Vite, Create React App, and Remix?
Yes. The submission is a standard fetch() POST, so it behaves identically in Vite, CRA, Remix, Gatsby, Next.js, and any other React environment — nothing is bundled or configured per platform.
How do I show success and error states in React?
Check `res.ok` on the fetch response and store the result in state, as shown in the uncontrolled example: disable the button while submitting, render a thank-you message on success, and fall back to an error message on failure or a caught network exception.