Skip to content

Gatsby Guide

Add A Contact Form To Gatsby

Here is a guide for integrating Fabform with a Gatsby site:

Step 1: Setting up a Gatsby site

Ensure you have the Gatsby CLI installed:

Terminal window
npm install -g gatsby-cli

Create a new Gatsby site:

Terminal window
gatsby new gatsby-site

Navigate into your site folder and start the development server:

Terminal window
cd gatsby-site
gatsby develop

Gatsby will start a hot-reloading development environment accessible by default at localhost:8000.

Step 2: Adding a Form to your Gatsby site

  1. Create a Form Component: Create a new file called contact.js under your src/pages directory and update its content with the following code block:
import React, { useState } from "react";
import axios from "axios";
import Layout from "../components/layout";
const Contact = () => {
const [serverState, setServerState] = useState({
submitting: false,
status: null
const handleServerResponse = (ok, msg, form) => {
submitting: false,
status: { ok, msg }
if (ok) {
const handleOnSubmit = e => {
const form =;
setServerState({ submitting: true });
method: "post",
url: "{your-form-endpoint}",
data: new FormData(form)
.then(r => {
handleServerResponse(true, "Thanks!", form);
.catch(r => {
handleServerResponse(false,, form);
return (
<div className="col-md-8 mt-5">
<h3> Gatsby Form Example</h3>
<form onSubmit={handleOnSubmit}>
<input type="email" name="email" placeholder="Your Email" />
<input type="text" name="name" placeholder="Your Name" />
<input type="text" name="message" placeholder="Your Message" />
<button type="submit">Send</button>
export default Contact;

Note: Replace {your-form-endpoint} with the unique form endpoint provided by Fabform.

Step 3: Run your Gatsby site locally to finalize setup

Run the following command to see your Gatsby form in action at localhost:8000/contact/:

Terminal window
gatsby develop

That’s it! Your Gatsby site is now integrated with Fabform for handling form submissions.