Gatsby
Contact form for Gatsby without a backend.
Gatsby's build creates the public directory before deployment, so it cannot receive a submission by itself. Render a standard form in a page, post it to FormsFort, and keep the deployed site static.
How it works
Three steps to production forms.
Create a FormsFort form
Create the form, configure delivery, and copy its public access key.
Render the page form
Add the form to src/pages/contact.js or a shared Gatsby component. The browser submits directly to FormsFort.
Build the public directory
Run gatsby build and deploy public/ to a static host. Gatsby's generated files do not need a server-side submission handler.
Setup
Gatsby page with a static contact form
// src/pages/contact.js
import React from "react";
export default function ContactPage() {
return (
<main>
<h1>Contact us</h1>
<form action="https://api.formsfort.com/submit" method="POST">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
<label htmlFor="gatsby-name">Name</label>
<input id="gatsby-name" name="name" type="text" required />
<label htmlFor="gatsby-email">Email</label>
<input id="gatsby-email" name="email" type="email" required />
<label htmlFor="gatsby-project">Project details</label>
<textarea id="gatsby-project" name="message" rows="6" required />
<input type="checkbox" name="botcheck" style={{ display: "none" }} />
<button type="submit">Send project details</button>
</form>
</main>
);
}Migration
Migration checklist.
Move an existing form in minutes without rebuilding markup.
Create a FormsFort form and copy its public access key.
Add the form to src/pages/contact.js or a shared component.
Set the action to https://api.formsfort.com/submit and method to POST.
Use Gatsby's htmlFor and className conventions without adding a server route.
Include name, email, message, and botcheck fields.
Run gatsby build, deploy public/, and test from the production domain.
Related Resources
Keep building from here.
FAQ
Common questions.
Can a Gatsby static build receive form submissions?
No. gatsby build writes static files to public/; it does not create a submission endpoint. The browser must post to a hosted form endpoint such as FormsFort.
Do I need Gatsby SSR or a Gatsby function for this form?
No. This workflow intentionally uses only the generated page and a standard POST to FormsFort. Gatsby SSR or functions are not required for delivery.
Where does the Gatsby form code belong?
Put a page form in src/pages/contact.js, or place the JSX in a component imported by that page. It will be included in the generated public/contact/ output.
Can I add file uploads to a Gatsby form?
Yes. Add enctype="multipart/form-data" and a file input, then enable uploads for the FormsFort form. The static Gatsby page still posts to the same endpoint.
Stop managing form servers.
Create a production form endpoint, migrate your first form free, and scale when you are ready.