# Gatsby Integration

GatsbyJS is a a React-based progressive web-app framework that uses GraphQL to store and access content from any data source and includes static site generation. You can integrate Getform to your Gatsby website to handle the backend of your static forms.

# Setting up a Gatsby site

Make sure you have the Gatsby CLI installed:

$ npm install -g gatsby-cli

Create a new site

$ gatsby new gatsby-site

Change directories into site folder and run the following:

$ gatsby develop

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

# Adding a Form to your Gatsby site

Create a new file called contact.js under your src/pages directory, change its content with the following code block:

import React, { useState }  from "react"
import axios from "axios";
import { Link } from "gatsby"
import Layout from "../components/layout"
const MyForm = () => {

    const [serverState, setServerState] = useState({
      submitting: false,
      status: null
    });
    const handleServerResponse = (ok, msg, form) => {
      setServerState({
        submitting: false,
        status: { ok, msg }
      });
      if (ok) {
        form.reset();
      }
    };
    const handleOnSubmit = e => {
      e.preventDefault();
      const form = e.target;
      setServerState({ submitting: true });
      axios({
        method: "post",
        url: "https://getform.io/f/{unique-endpoint-generated-on-step-1}",
        data: new FormData(form)
      })
        .then(r => {
          handleServerResponse(true, "Thanks!", form);
        })
        .catch(r => {
          handleServerResponse(false, r.response.data.error, form);
        });
    };
    return (
        <Layout>

    <div>
         <div className="col-md-8 mt-5">
            <h3>Getform.io 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>
          </form>
        </div>
      </div>

  </Layout>

    );
  };

  export default MyForm;

TIP

Don't forget to change the action attribute to a form endpoint URL with yours in your contact.js file.

# Run your Gatsby site locally to finalize setup

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

gatsby develop

That's it! Your Gatsby site is now running Getform.

← Jekyll →