FRAMEWORK

Add a form backend to your Gatsby site

Formstork is the backend your static Gatsby site posts to. Your form sends its fields to a Formstork endpoint with your access key, and Formstork emails you each submission, sets the visitor's email as the reply-to, and saves it to a searchable dashboard.

How it works

A Gatsby site builds to static HTML and JavaScript, so once it is deployed there is no server running to catch a form POST. Formstork is that server. You point your form at a single Formstork endpoint, add a hidden access_key field, and every submission is emailed to you and stored in a searchable, taggable dashboard, with the visitor's email set as the reply-to. Because the request goes straight to Formstork over HTTPS, you do not need Gatsby Functions, a serverless handler, or any backend of your own. It works the same whether you deploy your static output to Netlify, Vercel, a CDN, or plain object storage.

jsx

import React, { useState } from "react"

export default function ContactForm() {
  const [status, setStatus] = useState("")

  async function handleSubmit(e) {
    e.preventDefault()
    setStatus("sending")
    const res = await fetch("https://api.formstork.com/submit", {
      method: "POST",
      body: new FormData(e.target),
    })
    setStatus(res.ok ? "sent" : "error")
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
      <input type="email" name="email" required />
      <textarea name="message" required />
      <button type="submit">Send</button>
      {status === "sent" && <p>Thanks, we got your message.</p>}
    </form>
  )
}

Stay static, skip the backend

Your site stays fully static. There are no Gatsby Functions, no Lambda, and no server for you to maintain. The form POSTs straight to Formstork and Formstork does the rest.

Every submission, searchable

Formstork stores each submission so you can tag it, search it, and export it as CSV or JSON. The visitor's email is set as the reply-to, so you answer straight from your inbox or the dashboard.

Spam filtered, submissions routed

A hidden honeypot and a server-side content filter run automatically, and you can add Turnstile, hCaptcha, or reCAPTCHA. A rules engine can route submissions to Slack, Google Sheets, and other integrations by field value.

Set it up

1Create a form in your Formstork dashboard and copy its access key.
2Add a React component to your Gatsby page and post the form data to https://api.formstork.com/submit.
3Send your access key as a hidden access_key field so Formstork routes the submission to the right form.
4Run gatsby build and deploy. Submit once to test, and the submission arrives by email and in your dashboard.

Frequently asked questions

How do I handle form submissions in Gatsby?

Because a Gatsby site is static, there is no server in production to receive a form POST. Point your form at the Formstork endpoint with your access key, and Formstork receives the POST, emails you, and saves the submission to your dashboard. No extra server is needed.

Do I need Gatsby Functions or a serverless backend?

No. The form POSTs directly to Formstork over HTTPS, so it works without Gatsby Functions, a Lambda, or an API of your own. You can deploy your static output anywhere you like.

Is Formstork free for a Gatsby form?

Yes. The free plan includes 250 submissions per month, the full dashboard, email delivery, spam filtering, integrations, CSV and JSON export, and 90-day retention, with no credit card required.

Try Formstork free

250 submissions a month with a full dashboard. No credit card required.

Get your access key Read the docs