Gatsby Contact Form Without a Backend

Set up FormsReach with Gatsby

Create a free API key

Add the form to a page

In a page or shared component, add a form with method POST, action set to the FormsReach submit endpoint, and a hidden api_key input.

Build, deploy, test

Run your Gatsby build and deploy. Submit once - check email and/or WhatsApp depending on your delivery settings.

<form action="https://api.formsreach.com/submit" method="POST"> <input type="hidden" name="api_key" value="YOUR_API_KEY"> <input type="text" name="name" required> <input type="email" name="email" required> <textarea name="message" required></textarea> <button type="submit">Submit Form</button> </form>

<form action="https://api.formsreach.com/submit" method="POST"> <input type="hidden" name="api_key" value="YOUR_API_KEY" /> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required></textarea> <button type="submit">Submit Form</button> </form>

Static Gatsby still needs a form API

Gatsby ships HTML. Contact forms still need somewhere safe to POST. FormsReach is that form API - email and WhatsApp with monthly credits - without bolting on a function just for one form.

Platform notes

Prefer a shared form component imported by contact pages.
Works on any static host that serves your Gatsby build.
Use HTTPS on the site so browsers do not warn on form submit.

Troubleshooting

Nothing arrives: Confirm api_key in the built HTML output.
React prevents default: For classic POST, do not call preventDefault unless you implement your own submit to FormsReach.
Wrong fields: Ensure each input has a name attribute.

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 Gatsby Functions or Netlify Functions?+

Not for a basic contact form. FormsReach is the form backend. Your static HTML posts to our endpoint.

Can I use React components?+

Yes - render the form JSX with the same action, method, and field names. For the React hook path, see the React integration.

Free vs Pro delivery?+

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

Does SSG break form submit?+

No. The form submits from the browser after the static page loads.

Gatsby contact form without a backend