React Contact Form Without a Backend

Set up FormsReach with React

Install the package

Run npm install @formsreach/react (or pnpm/yarn). Create your API key in FormsReach.

Use the hook

const { submit, submitting } = useFormsReach('YOUR_API_KEY'). Attach submit to the form onSubmit handler and disable the button while submitting.

Ship and test

Deploy your React app. Submit once - check email and/or WhatsApp depending on your delivery settings.

// npm install @formsreach/react import { useFormsReach } from '@formsreach/react'; function ContactForm() { const { submit, submitting } = useFormsReach('YOUR_API_KEY'); return ( <form onSubmit={submit}> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" disabled={submitting}>Submit Form</button> </form> ); }

// npm install @formsreach/react import { useFormsReach } from '@formsreach/react'; function ContactForm() { const { submit, submitting } = useFormsReach('YOUR_API_KEY'); return ( <form onSubmit={submit}> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" disabled={submitting}>Submit Form</button> </form> ); }

The SPA form problem

In a client-rendered React app there is no natural place to POST a contact form. Teams either abuse third-party email widgets, stand up a tiny API, or postpone the form entirely. FormsReach is the form API: the hook submits to our endpoint so you keep building UI, not infrastructure.

Platform notes

Use uncontrolled inputs with name attributes (as in the snippet) so the hook can read FormData.
Handle success UI in your component after submit resolves (redirect or inline message).
Prefer the Next.js page if you are on the App Router and need the 'use client' boundary spelled out.

Troubleshooting

submit is not a function: Confirm import from @formsreach/react and that the hook is called inside a component.
Empty payload: Ensure inputs have name attributes.
Double submit: Disable the button with submitting.

What you get

Free

500 credits every month for form submissions, email, and WhatsApp. Spam filtering, webhooks, and workflow rules included. No credit card required.

Starter & Pro

Larger monthly credit pools (2,000 or 8,000) for growing sites and multi-site volume. Same channels - email, WhatsApp via the official Meta API, webhooks. See pricing.

FAQ

Do I need a React server or API route?+

No. useFormsReach talks to the FormsReach form API. You do not need a custom backend for basic contact forms.

What does useFormsReach return?+

submit and submitting - use submit as the form onSubmit handler and submitting to disable the button / show loading UI.

Free vs Pro delivery?+

Email and WhatsApp via Meta WhatsApp Business API, with spam filtering. Usage is metered in monthly credits.

Does this work with Vite / CRA / SPA hosts?+

Yes - any React setup that can install npm packages. For Next.js App Router specifics, see the Next.js integration page.

React contact form for any website