Generate a free splitforms key
Sign in at splitforms.com — your access key is created instantly. No credit card, no setup wizard, no SDK to install.
Newsletter Signup · React
Newsletter Signup for React
Email-only newsletter capture — perfect for footers and landing pages. Free for 500 submissions total — no backend, no SDK, no plugin.
- 500 free total
- 1 fields ready
- 60-second setup
Overview
A React newsletter signup form needs no API route, no server action, and no backend of any kind — a client component POSTs the subscriber's email straight to SplitForms' single endpoint. Leave the email input uncontrolled and let a plain <form> submit natively, or add one useState flag plus a fetch in onSubmit when you want the inline "You're subscribed" message to appear without navigating the SPA away. Either way you drop in a hidden access_key input, and SplitForms captures every signup, emails you free on every plan, and shows the list in a dashboard you can export to CSV.
Copy-paste code
Drop into any React project.
Replace YOUR_ACCESS_KEY with your splitforms key, paste into a React page, and ship. No build-time integration required.
'use client';
import { useEffect, useState, type FormEvent } from 'react';
export default function NewsletterForm() {
const [status, setStatus] = useState<'idle' | 'sending' | 'sent' | 'error'>('idle');
// splitforms tracker (drop-off analytics + partial leads), loaded once. It
// finds the form by data-sf-key and adds a hidden sf_sid field to it.
useEffect(() => {
const src = 'https://splitforms.com/embed.js';
if (document.querySelector(`script[src="${src}"]`)) return;
const script = document.createElement('script');
script.src = src;
script.async = true;
document.body.appendChild(script);
}, []);
async function onSubmit(e: FormEvent<HTMLFormElement>) {
e.preventDefault();
setStatus('sending');
// Capture the form now: React clears e.currentTarget once the handler
// yields at the first await, so calling e.currentTarget.reset() later throws.
const form = e.currentTarget;
const data = new FormData(form);
data.set('access_key', 'YOUR_ACCESS_KEY');
data.set('subject', 'New newsletter subscriber');
const res = await fetch('https://splitforms.com/api/submit', {
method: 'POST',
body: data,
headers: { Accept: 'application/json' },
});
const json = await res.json();
if (json.success && json.payment_url) {
// Payment form: finish the payment on the secure Stripe page.
window.location.href = json.payment_url;
return;
}
setStatus(json.success ? 'sent' : 'error');
if (json.success) form.reset();
}
if (status === 'sent') return <p>Thanks — we’ll be in touch.</p>;
return (
<form data-sf-key="YOUR_ACCESS_KEY" onSubmit={onSubmit}>
<label htmlFor="email">Your email *</label>
<input id="email" type="email" name="email" placeholder="[email protected]" required />
<button type="submit" disabled={status === 'sending'}>
{status === 'sending' ? 'Sending…' : 'Send'}
</button>
{status === 'error' && <p>Something went wrong. Try again.</p>}
</form>
);
}React + Newsletter Signup
Built for React developers who hate operating a backend.
React ships nothing for form delivery — it's a view layer. The historical options are an Express server you stand up just for POST /api/contact, a Vercel serverless function with SMTP wiring, or a third-party library like Formik that still leaves the backend problem unsolved. The newsletter signup on this page uses useState for submit state and a plain fetch POST to splitforms — no form library, no context provider, no wrapper component. It works in Create React App, Vite, Remix, and every React bundler because it's just standard FormData and the Fetch API.
- 500 form submissions total, free to start
- Unlimited forms on every plan, including Free
- Spam protection — honeypot plus a rule-based filter
Newsletter Signup fields
What every field actually does.
The posted payload contains your email. Required fields are your email. Rename, remove, or add your own — splitforms accepts any name you POST.
- Your email — Reply-to address — splitforms wires this so hitting reply goes back to the sender.
Template playbook
The reason this newsletter signup exists.
Newsletter conversion benchmarks haven't moved much: ConvertKit / Substack landing pages convert at 1-2% of visitors, popup forms at 2-4%, content-upgrade lead magnets at 8-15%. The form itself is trivially simple (email field, optional name) but where it lives matters — exit-intent popup, scroll-triggered slide-in, footer inline, content-end inline all behave differently. Push the submission to your ESP (Mailchimp / ConvertKit / Substack / Beehiiv / Buttondown) via webhook so the welcome email fires automatically. GDPR / CASL require explicit consent — a checkbox or unbundled-consent text under the form covers it for EU and Canadian visitors.
- Pick the form placement
- Push to your ESP
- Add GDPR / CASL consent
Setup
Generate, embed, receive.
Three actions stand between you and your first newsletter signup submission — no backend, no database, no CAPTCHA library.
Paste the newsletter signup into your React project
Drop the form snippet into a React page, component, or layout. Replace YOUR_ACCESS_KEY with the key from your dashboard. The form action is a hard-coded URL — no env vars or build-time wiring needed.
Receive submissions
Dashboard updates live on Free. Free includes owner email delivery; paid plans add signed webhooks, CSV export, Slack/Discord forwarding, and BCC to your team.
How SplitForms works
What happens after someone submits your form?
splitforms receives the submission, filters spam, saves it to your dashboard and emails you — then, on paid plans, sends it on to your webhooks and integrations. No backend infrastructure to build.
Add your endpoint
Point your form to your unique SplitForms endpoint. That's it.
Receive submissions
We instantly capture and organize every submission in your inbox.
Route anywhere
Send data to email, spreadsheets, CRMs, webhooks, and 7,000+ apps.
No credit card required. Set up in under 60 seconds.
Connect & automate
Where can submissions go besides email?
On paid plans, submissions can also go to Slack, Discord, Google Sheets, Notion, Airtable, Zapier or any signed webhook — and splitforms works on the platforms you build on, from WordPress and Shopify to Next.js. With Stripe connected, your forms can take payments too.
NewTake payments on your formsDeposits, bookings, order forms — submitters check out through Stripe and the money goes straight to your Stripe account. Included on every paid plan.See plans →Common questions
Newsletter Signup on React — answered.
View all FAQsDo I need useState and a controlled input, or can the newsletter form be uncontrolled?
Uncontrolled is the simpler path: a native <form action="https://splitforms.com/api/submit" method="POST"> with a plain email input and a hidden access_key needs zero state. Only reach for useState when you want an inline success message that keeps the subscriber on the page — then you preventDefault, fetch the endpoint, and flip a boolean like setSubscribed(true) instead of letting the browser navigate to the endpoint's response.
Do I need a Next.js API route or a server action to handle the subscribe?
No. The form talks directly to https://splitforms.com/api/submit from the browser, so there's no route handler and no 'use server' action to write. The same component works in Vite or Create React App, in the Next App Router or Pages Router, and even in a fully static export deployed to GitHub Pages or Cloudflare Pages with no Node server running.
How do I show a 'You're subscribed' message without a full page redirect?
In your onSubmit handler call e.preventDefault() and capture the form first (const form = e.currentTarget — React clears currentTarget once the handler awaits), then await fetch('https://splitforms.com/api/submit', { method: 'POST', body: new FormData(form) }). On a successful response set a state flag to swap the form for a thank-you node, and call form.reset() so the subscriber can't double-submit the same email before your UI updates.
How do I block bot signups without adding reCAPTCHA to my React bundle?
You don't install a CAPTCHA package or load a third-party script in a useEffect. SplitForms filters spam server-side with a hidden honeypot field plus a rule-based content filter, so you just add one visually-hidden input (styled display:none) that real users never fill — no extra dependency, no bundle-size hit, no widget to render, and no CAPTCHA challenge shown to a real subscriber.
Does this newsletter signup work on React?
Yes. The form is plain HTML with a single POST endpoint, so it runs on any React site without server-side code, plugins, or SDKs. Drop the snippet into a React page or component and submissions land in your splitforms dashboard.
How much does the newsletter signup cost on React?
Free for 500 submissions — no credit card, no time limit. Pro is $5/mo for 5,000 submissions a month, and Annual is $49/year for 15,000 submissions a month. The same pricing applies regardless of which framework hosts the form.
Can I customize the fields?
Yes. The template ships with sensible defaults (your email…) — add, remove, or rename any of them. Splitforms accepts whatever fields you POST.
Simple pricing
How much does splitforms cost?
Free gives you 500 submissions for $0 — no card, no time limit. Pro is $5/month for 5,000 submissions a month, and Annual is $49/year for 15,000 a month with every Pro feature.
Free
$0— 500 submissions
For side projects and indie devs.
- 500 free submissions
- Unlimited forms
- Email notifications included
- Smart spam filtering
- Submissions dashboard
- Redirect after submit
- MCP server included
Recommended
Pro
$5/ month
Billed monthly
Every paid feature, for agencies and growing products.
- 5,000 submissions / mo
- Unlimited forms
- Webhooks and integrations
- CC/BCC, auto-replies and routing
- File uploads with 500 MB storage
- Stripe payments on your forms
- 3 team seats
- Cancel anytime
Annual
$49/ year
About $4.08/mo, billed yearly
Every Pro feature with triple the volume — $0.27 per 1,000 at full use.
- 15,000 submissions / mo
- Unlimited forms
- Everything in Pro
- File uploads with 5 GB storage
- 3 team seats
- Priority email support
No credit card required on Free • Cancel anytime • Full pricing and FAQ