Next.js Contact Form Without API Routes

Next.js contact form for any website

Add a Next.js contact form to your website with useFormsReach in a Client Component. No route handlers, no nodemailer, no extra serverless function. Deliver submissions by email with spam filtering and to WhatsApp in seconds, metered with monthly credits.

// npm install @formsreach/react 'use client'; import { useFormsReach } from '@formsreach/react'; export default 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 'use client'; import { useFormsReach } from '@formsreach/react'; export default 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> ); }

API routes are optional for contact forms

Next.js makes it easy to add app/api/... handlers - and easy to overbuild. For many marketing and product sites, a contact form only needs a reliable form API and email and WhatsApp delivery from one credit pool, not a custom mail stack. Credits meter usage across channels.

Platform notes

Keep 'use client' on the form module only; leave data pages as Server Components.
Same package as React: @formsreach/react.
Optional custom thank-you redirect is a Pro product capability - configure in the app when available.

Troubleshooting

Hooks error / server component: Move the form into a file that starts with 'use client'.
Hydration warnings: Do not conditionally render the form only on the client without a stable placeholder if you also SSR different markup.
Env keys: Prefer the app-issued API key in the form component for public contact forms (same model as other browser form APIs); never put private secrets in the client bundle that are not meant to be public form keys.

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 Next.js.

Why 'use client'?+

useFormsReach uses client-side form handling. Mark the form component as a Client Component; the rest of the page can stay a Server Component.

Can I avoid API routes entirely?+

Yes for standard contact forms. FormsReach is the form backend, so you do not need app/api/contact/route.ts just to forward email and WhatsApp.

Does this work with static export?+

Yes - the form posts to FormsReach from the browser, so you do not need a Next.js server runtime for submission delivery.

Free vs Pro?+

Deliver by email with spam filtering and to WhatsApp via the official Meta WhatsApp Business API. Usage is metered in monthly credits.

Next.js contact form for any website

Set up FormsReach with Next.js

Install @formsreach/react

Add a Client Component

Import it from a Server Component page

Next.js snippet

API routes are optional for contact forms

Platform notes

Troubleshooting

What you get

FAQ

Ready to receive form leads?

Set up FormsReach with Next.js

Install @formsreach/react

Add a Client Component

Import it from a Server Component page

Next.js snippet

API routes are optional for contact forms

Platform notes

Troubleshooting

What you get

FAQ

Related frameworks

Ready to receive form leads?