Remix Contact Form Without Server Actions

Set up FormsReach with Remix

Install @formsreach/react

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

Add a client form component

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

Render it from a route

Import the form into a Remix route module. 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> ); }

Remix actions are optional for contact forms

Remix makes server actions easy - and easy to overbuild for a single lead form. FormsReach is the form API: keep building routes and UI, not SMTP glue.

Platform notes

Named inputs work with the React hook’s FormData path.
Prefer a shared contact form component imported by marketing routes.
See the React page for hook return values (submit, submitting).

Troubleshooting

submit is not a function: Confirm import from @formsreach/react and that the hook runs in a component.
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 Remix action for contact forms?+

Not for the FormsReach path. useFormsReach posts to our form API from the browser, so you can skip a custom mail action for basic enquiries.

Can I use a plain HTML form instead?+

Yes - use the HTML integration snippet with method POST and a hidden api_key if you prefer zero React hooks.

Free vs Pro delivery?+

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

Does this work with Remix SPA mode?+

Yes - the hook runs on the client. Ensure the form component is only rendered where client JS is available.

Remix contact form without a mail stack