Home / Gatsby contact form

Add a contact form to Gatsby — get submissions by email & Slack

The easiest way to handle Gatsby form submissions without building a backend. Connect your form to Formcatch and receive every message by email, Slack, and a dashboard.

Create your free form endpoint

1. Create a form (free) and copy your endpoint

Sign up and create a form — you'll get a URL like https://forms.mgm-llc.org/f/YOUR_FORM_ID.

2. Paste this into your Gatsby project

import React from "react";
export default function ContactForm() {
  async function onSubmit(e) {
    e.preventDefault();
    await fetch("https://forms.mgm-llc.org/f/YOUR_FORM_ID", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(e.target),
    });
  }
  return (
    <form onSubmit={onSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button>Send</button>
    </form>
  );
}

That's it. Submissions are stored in your dashboard and sent to your email/Slack. Add _redirect for a thank-you page, or send Accept: application/json for AJAX.

Why Formcatch for Gatsby

• No backend or API route to build or host
• Spam filtering, email & Slack notifications
• Free to start; Pro at $9/mo

Start free   Pricing

Other frameworks

HTMLReactNext.jsVueSvelteAstroNuxtTailwind CSS