TanStack Start

TanStack Start contact form without a backend detour

Use useFormsReach from @formsreach/react in a TanStack Start client component. No custom server function for basic contact forms. Deliver submissions by email with spam filtering and to WhatsApp in seconds, metered with monthly credits.

Get Started

Set up FormsReach with TanStack Start

Connect your form in a few steps. No custom backend required.

1
Install @formsreach/react
npm install @formsreach/react and create an API key at FormsReach.
2
Add a client form component
Create a component that calls useFormsReach. Attach submit to onSubmit and disable the button while submitting.
3
Render from a route
Import the form into a Start route. Deploy and test - email and/or WhatsApp depending on your delivery settings.

React snippet

Copy this into your project, then swap in your FormsReach API key.

          // 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>
  );
}

Full-stack Start without a mail detour

TanStack Start makes full-stack routes convenient. A contact form still does not need a custom mail pipeline. FormsReach is the form API: Free email, Pro WhatsApp, same React hook pattern as other React apps.

Platform notes

Use named inputs so the hook can read FormData.
Keep the form in a client component if your route is otherwise server-oriented.
See the React and Next.js pages for related patterns.

Troubleshooting

submit is not a function: Confirm import from @formsreach/react and client-side execution.
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 TanStack Start.

Do I need a TanStack Start server function for contact forms?+

Not for the FormsReach path. useFormsReach posts to our form API from the browser.

Why @formsreach/react?+

TanStack Start is React-based. The same useFormsReach hook used on React and Next.js works here.

Free vs Pro delivery?+

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

Can I use plain HTML form POST instead?+

Yes - see the HTML integration if you prefer zero hooks and a classic form action.

More framework guides that use the same FormsReach form API.

Ready to receive form leads?

Create a free API key. Upgrade when you need more monthly credits.

Get started →Docs guide

Set up FormsReach with TanStack Start

Install @formsreach/react

Add a client form component

Render from a route