Gatsby

Gatsby contact form without a backend

Point a Gatsby page form at FormsReach with a plain HTML form POST. No serverless function, no DIY email pipeline. Deliver submissions by email with spam filtering and to WhatsApp in seconds, metered with monthly credits.

Get Started

Set up FormsReach with Gatsby

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

1
Create a free API key
Sign up at FormsReach and copy your form API key. Free includes monthly credits for email and spam filtering.
2
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.
3
Build, deploy, test
Run your Gatsby build and deploy. Submit once - check email and/or WhatsApp depending on your delivery settings.

HTML snippet

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

          <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

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 Gatsby.

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.

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 Gatsby

Create a free API key

Add the form to a page

Build, deploy, test