integrations · framework

A Gatsby contact form that moves house with you.

Gatsby builds to static files, so a contact form has to reach outside the build somehow. The two habits people picked up both age badly: Gatsby Functions tie the form to a runtime, and the host's own form feature ties it to the host. Anyone who lived through Gatsby Cloud's shutdown and moved their site elsewhere found out which parts of their stack were actually portable, and form handling was usually not one of them.

A form that posts to a mailcontact endpoint has no such attachment. It is markup in a React component with an action, so it survives a host migration, a Gatsby version bump, and eventually a rewrite into something else entirely.

Join the waitlist Read the docs

the snippet

A working form for Gatsby, in one paste.

Point the form at your project's mailcontact endpoint. Submissions land in your project inbox. No server, no API route, no email service to wire up.

src/pages/contact.js

import * as React from "react";

// No src/api/ function. No host form feature. Nothing to migrate later.
export default function ContactPage() {
  const [sent, setSent] = React.useState(false);

  async function submit(event) {
    event.preventDefault();
    await fetch("https://mailcontact.app/api/forms/your-form-id", {
      method: "POST",
      body: new FormData(event.target),
    });
    setSent(true);
  }

  if (sent) return <p>Thanks. We'll be in touch.</p>;

  return (
    <form onSubmit={submit}>
      <input name="name" placeholder="Your name" required />
      <input name="email" type="email" placeholder="you@email.com" required />
      <textarea name="message" placeholder="What's on your mind?" required />
      <input name="_gotcha" tabIndex={-1} autoComplete="off" hidden />

      <button>Send</button>
    </form>
  );
}

how it works

Three steps, start to finish.

Create an inbox

One inbox per project, with a form endpoint and a project email address ready before the first build.

Add the page

Drop it in src/pages/contact.js and swap the endpoint id. No gatsby-config plugin to install, no environment variable, and nothing to add to your build command.

Get notified

Add a Discord, Slack, email, or webhook channel and every submission pings you there.

why mailcontact

Built to pair well with Gatsby.

No plugin in gatsby-config

Form plugins are a place things break on a major upgrade, and they are usually abandoned before your site is. There is nothing here to be incompatible with a future Gatsby version.

Host-independent by construction

Netlify Forms only work on Netlify, and a Gatsby Function needs a host willing to run it. An action pointing at an external URL has no opinion about where the built files are served from.

Your submission history moves too

Host-native form features leave the archive behind when you migrate. Messages live in your project inbox, so changing hosts does not lose the last two years of enquiries.

faq

Gatsby + mailcontact, answered

Can a static Gatsby site handle form submissions?

Not by itself. gatsby build produces HTML, CSS and JS with nothing running to accept a POST. You need something outside the build to receive it, whether that is a Gatsby Function on a host that supports one, a third-party service, or your own API.

What about Gatsby Functions?

They work, but they turn a static site into one with a runtime, which is the thing you get to skip otherwise. You also write the mail delivery, the spam filtering and the storage yourself, and it only deploys on hosts that support Gatsby Functions. For a contact form, that is a lot of surface for very little.

Do I need gatsby-plugin-react-helmet or any config for this?

No. This touches no config at all. It is a React component with a form element and a submit handler, so it needs no plugin, no GraphQL query, and no entry in gatsby-config.js.

Is Gatsby still worth using in 2026?

That is your call, and plenty of Gatsby sites are running happily. What is worth noting is that the framework's momentum has slowed, so the pieces you can keep portable are the ones you will thank yourself for later. A form that is markup pointing at a URL is one of them.

One inbox for every Gatsby project you ship.

Forms and a real email address, together, with notifications where you live. Launching soon. Be the first to know.