Frameworks

React

Add a React contact form with useFormsReach from @formsreach/react - no custom API route required.

What you will achieve

A React contact form that posts to FormsReach from the browser using the official hook.

Prerequisites

Steps

1. Install

npm install @formsreach/react

2. Use the hook

import { useFormsReach } from "@formsreach/react";

export function ContactForm() {
 const { submit, submitting, error } = useFormsReach("YOUR_ACCESS_KEY");

 return (
 <form onSubmit={submit}>
    <input name="name" required />
    <input name="email" type="email" required />
    <textarea name="message" required />
    <button type="submit" disabled={submitting}>
    {submitting ? "Sending…" : "Send"}
    </button>
    {error ? <p role="alert">{error.message}</p> : null}
 </form>
 );
}

Use uncontrolled inputs with name attributes so the hook can read FormData.

3. Ship and test

Render ContactForm in your app, deploy or run locally, and submit once.

Verify

  • Submissions shows the test row
  • Button disables while submitting is true

Common failures

Symptom Check
Empty payload Every field needs a name
Hook error outside component Call useFormsReach only inside a React component
Next.js server error Use a Client Component - see Next.js

Next

Previous
Next