Frameworks

Next.js

Add a Next.js contact form with useFormsReach in a Client Component - no contact API route required.

What you will achieve

A Next.js contact form using @formsreach/react in a Client Component, without app/api/contact mail handlers.

Prerequisites

Steps

1. Install

npm install @formsreach/react

2. Create a Client Component

"use client";

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

export default 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>
 );
}

Keep 'use client' (or "use client") on the form module only. Pages and layouts can stay Server Components and import this form.

3. Render from a page

import ContactForm from "@/components/ContactForm";

export default function ContactPage() {
 return (
 <main>
    <h1>Contact</h1>
    <ContactForm />
 </main>
 );
}

4. Test

Run the dev server, submit once, confirm Submissions in the dashboard.

Verify

  • No hooks/server-component error in the console
  • Submission row stored for your form
  • Works with static export hosts because the browser posts to FormsReach

Common failures

Symptom Check
Hooks error on server Missing "use client" on the form file
Empty fields Inputs need name attributes
Domain denied on production Add your deploy host to the allowlist

Next

Previous
Next