Headless WordPress Gravity Forms with Gatsby – Step by Step Tutorial

There are several articles published that describe how to use a headless WordPress install with Gravity Forms on a Gatsby site. However one of the issues I have found is they were written before WpGraphQL for Gravity Forms was released.

I wrote an article back in 2020 that has the same problem. It covers setting up API keys, creating custom lambda functions and a number of other convoluted steps. It was not particularly ‘plug and play’.

This article aims to introduce a far cleaner, simpler way of using Gravity Forms with Gatsby. It will provide a step by step walkthrough of what is needed, as well as provide an example repo for that good old copy/paste.

---

Note: I have recently written a follow up to this article for Next JS, for those that have moved frameworks.

---

TLDR

1. Install wp-graphql-gravity-forms on your WordPress site.
2. Install gatsby-source-wordpress on your Gatsby site.
3. Install gatsby-plugin-gravity-forms on your Gatsby site.
4. Example repo with solution:  https://github.com/robmarshall/gatsby-gravity-form-example

Contents

• What Packages Do I Need?
• Step 1 – Setup WordPress Side
  • Install WordPress Plugin
  • Limit Submissions to Domain/Cors Issues
• Step 2 – Install Gatsby Plugins
  • Add the WordPress source plugin to your Gatsby Project
  • Add Gravity Form plugin to your Gatsby project
  • Update your gatsby-config.js file
• Step 3 – Using the Gatsby Plugin in a Project
  • GraphQL Data and Form Component
  • Add Google reCaptcha to the Form
• What About Styling?

 

What Packages Do I Need?

We will use the following packages:

• wp-graphql-gravity-forms (WordPress side)
• gatsby-source-wordpress (Gatsby side)
• gatsby-plugin-gravity-forms (Gatsby side)

Step 1 – Setup WordPress Side

Install WordPress Plugin

The first step is to get the WordPress site set up. This is pretty painless (much like the whole process tbh).

The aim is to expose your Gravity Forms form data to Gatsby so you can render forms/receive submissions.

1. Install & activate WPGraphQL on your WordPress site – This can be installed from the plugin directory on your WordPress backend.
2. Install & activate Gravity Forms (if you haven’t already).
3. Download zip from the wp-graphql-gravity-forms repository (Direct download link here) and upload it to your WordPress install. Then activate the plugin.

Limit Submissions to Domain/Cors Issues

To make sure that submissions can only come from your frontend domain, and make sure that you avoid any CORs issues from WordPress you can add the following snippet. This should be added to your functions.php file on your WordPress site.

add_filter( 'graphql_response_headers_to_send', function( $headers ) {
	return array_merge( $headers, [
		'Access-Control-Allow-Origin'  => 'https://yourfrontendurl.com',
		'Access-Control-Allow-Methods' => 'POST, GET, OPTIONS, PUT, DELETE',
		'Access-Control-Allow-Credentials' => 'true'
	] );
} );

Make sure to update the ‘https://yourfrontendurl.com’ to your actual frontend domain. Make sure that there is no trailing slash.

Step 2 – Install Gatsby Plugins

Add the WordPress source plugin to your Gatsby Project

# Use Yarn
yarn add gatsby-source-wordpress

# Or NPM
npm i gatsby-source-wordpress

Add Gravity Form plugin to your Gatsby project

# Use Yarn
yarn add gatsby-plugin-gravity-forms

# Or NPM
npm i gatsby-plugin-gravity-forms

Update your gatsby-config.js file.

{
   resolve: "gatsby-source-wordpress",
   options: {
      url: "https://yourwebdomain.com/graphql",
   },
},
{
  resolve: "gatsby-plugin-gravity-forms",
  options: {
    // This URL should be the same as you use for your
    // gatsby-source-wordpress options.
    url: "https://yourwebdomain.com/graphql",
  },
},

Step 3 – Using the Gatsby Plugin in a Project

From this point onwards you will have access to your WordPress and Gravity Form GraphQl data in your GraphiQL viewer. Try running your develop command and take a look at http://localhost:8000/___graphql.

The exciting bit is plugging our data into the form component!

GraphQL Data and Form Component

There are two steps to rendering a form in Gatsby. The first is getting the data from GraphQl, and the second is placing the form on the correct part of the page.

The below section of code shows an example page, and how you can use the useStaticQuery hook to make this super easy.

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Layout from "../components/layout"
import GravityFormForm from "gatsby-plugin-gravity-forms"

const IndexPage = () => {
  // Use useStaticQuery to get the form data for form 1.
  // There is no need to import the fragment ...GravityFormFields as this is
  // imported globally by the gatsby-plugin-gravity-forms plugin.
  const data = useStaticQuery(graphql`
    query formQuery {
      wpGfForm(databaseId: { eq: 1 }) {
        ...GravityFormFields
      }
    }
  `)

  // Then pass the data into the form component.
  return (
    <Layout>
      <p>Some intro text here</p>
      <GravityFormForm data={data} />
    </Layout>
  )
}

export default IndexPage

Once you have added the above to your project you should be at the position to render forms and send entries to your headless WordPress install.

[support-block]

Add Google recaptcha to the Form

The plugin connects smoothly to the WordPress Gravity Forms install. As long as the reCaptcha details have been set on the WordPress site you could be set with just one small addition to the above code.

As well as the basic query, another smaller graphQl fragment needs adding to pass in your Google reCaptcha v2 site key (Gravity Forms does not support v3 yet).

import React from "react"
import { useStaticQuery, graphql } from "gatsby"

import Layout from "../components/layout"
import GravityFormForm from "gatsby-plugin-gravity-forms"

const IndexPage = () => {
  // Set your form ID in the query below:
  // Include the wpGfSettings object if you are using reCaptcha.
  const data = useStaticQuery(graphql`
    query formQuery {
      wp {
        ...GravityFormSettings
      }
      wpGfForm(databaseId: { eq: 1 }) {
        ...GravityFormFields
      }
    }
  `)

  // Then pass the data into the form component.
  return (
    <Layout>
      <p>Some intro text here</p>
      <GravityFormForm data={data} />
    </Layout>
  )
}

export default IndexPage

Everything else stays as it already was!

What About Styling?

There is no default styling currently packaged in with the gatsby-plugin-gravity-forms plugin. This means that you will need to handle all the styling yourself.

The GravityFormForm component uses exactly the same CSS classes as the PHP Gravity Forms HTML. This means you can move your styling from a pre-existing WordPress site to Gatsby very easily. It doesnt include support for CSS-in-JS/styled components yet.

There is baseline styling CSS file included in the example repo. This should get you to a point where you can see the form working.

Link to example form styling file.

 

Example repo with solution if you missed it in the article:  https://github.com/robmarshall/gatsby-gravity-form-example

Hopefully this article has helped, and if you have any questions you can reach me at: @robertmars