React Contact Form Without a Backend

React contact form for any website

Add a React contact form to your website with the useFormsReach hook. No custom API route, no serverless handler, no DIY email pipeline. Deliver submissions by email with spam filtering and to WhatsApp in seconds, metered with monthly credits.

// 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

Monthly credits for submissions and delivery. Scale when volume grows.

Free

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

Starter, Pro & Agency

Larger monthly credit pools (2,000 / 5,000 / 18,000). WhatsApp via Meta Business API unlocks on Pro and Agency. See pricing.

FAQ

Common questions about FormsReach with React.

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

Set up FormsReach with React

Install the package

Use the hook

Ship and test

React snippet

The SPA form problem

Platform notes

Troubleshooting

What you get

FAQ

Ready to receive form leads?

Set up FormsReach with React

Install the package

Use the hook

Ship and test

React snippet

The SPA form problem

Platform notes

Troubleshooting

What you get

FAQ

Related frameworks

Ready to receive form leads?