send.webforms.toRead the docs →

WebForms

Frameworks and libraries

Add a contact form to Gatsby

Gatsby builds to static files, which is great until you need a form. The usual answers are Gatsby Functions (which ties you to a specific host) or an SMTP service (which means keys and a server). Neither is necessary. Point the form at a WebForms endpoint and the static build keeps working anywhere you host it.

Get an endpointRead the docs

Setup

  1. Create your endpoint

    One form in the dashboard, one URL to copy.

  2. Add the form component

    A normal React component. Gatsby does not need to know anything about it at build time.

  3. Deploy anywhere

    Because there is no serverless function involved, the same build works on Netlify, Vercel, Cloudflare Pages, S3 or GitHub Pages.

Gatsby examples

Swap in your own endpoint and these run as-is.

src/components/contact-form.js
import React, { useState } from "react";

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

  async function onSubmit(e) {
    e.preventDefault();
    setStatus("sending");

    const res = await fetch("https://send.webforms.to/wft_your_key", {
      method: "POST",
      headers: { accept: "application/json" },
      body: new FormData(e.currentTarget),
    });

    setStatus(res.ok ? "sent" : "error");
  }

  if (status === "sent") return <p role="status">Thanks, we got it.</p>;

  return (
    <form onSubmit={onSubmit}>
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <button disabled={status === "sending"}>Send</button>
      {status === "error" && <p role="alert">Something went wrong.</p>}
    </form>
  );
}

No-JavaScript version. Works even if hydration fails.

src/pages/contact.js
import React from "react";

export default function ContactPage() {
  return (
    <form action="https://send.webforms.to/wft_your_key" method="POST">
      <input name="name" required />
      <input name="email" type="email" required />
      <textarea name="message" required />
      <input type="hidden" name="_next" value="https://example.com/thanks" />
      <button type="submit">Send</button>
    </form>
  );
}

Gatsby form FAQ

No. Gatsby Functions only run on hosts that support them, which defeats the portability of a static build. A direct POST works everywhere.

Related guides

Ready to wire up your Gatsby form?

Free for 300 submissions a month. Endpoint in under a minute, no card required.

Start free