Platforms / React
Contact form for React — no backend required
Create React App and Vite SPAs have nowhere safe to put SMTP credentials. A public form backend is the missing piece.
Setup
- Create a FormHeron form and copy the public key.
- Use a plain <form> with action and method, or fetch() with JSON.
- Always include the _hp honeypot field in the DOM (off-screen).
- Handle JSON error codes if you use fetch.
Working example
export function ContactForm() {
return (
<form action="https://formheron.com/f/YOUR_KEY" method="POST">
<input type="email" name="email" required />
<textarea name="message" required />
<input type="text" name="_hp" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{ position: "absolute", left: "-9999px" }} />
<button type="submit">Send</button>
</form>
);
}Common problems
Controlled inputs + full page POST
Uncontrolled inputs work best with native form POST. For SPA navigation after submit, use fetch and your own router.
Vite preview vs production origin
Add both localhost and production origins to the allowlist while developing.
Double submit
FormHeron dedupes identical posts within a 5-minute window so double-clicks do not burn quota twice.
FAQ
How do I send React form data without a backend?
POST to FormHeron’s public form URL. No API keys in the browser except your optional Turnstile site key.
Is fetch or form POST better?
form POST works without JavaScript. fetch is better when you need inline validation and stay on the same page.
Where do leads go?
Your FormHeron inbox with status, search, and (on paid plans) tags and notes.