TanStack Start Contact Form Without API Routes

Set up FormsReach with TanStack Start

Install @formsreach/react

npm install @formsreach/react and create an API key at FormsReach.

Add a client form component

Create a component that calls useFormsReach. Attach submit to onSubmit and disable the button while submitting.

Render from a route

Import the form into a Start route. Deploy and test - email and/or WhatsApp depending on your delivery settings.

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

Free

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

Starter & Pro

Larger monthly credit pools (2,000 or 8,000) for growing sites and multi-site volume. Same channels - email, WhatsApp via the official Meta API, webhooks. See pricing.

FAQ

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.

TanStack Start contact form without a backend detour