Headless WordPress Gravity Forms with Gatsby - Step by Step Tutorial | Rob Marshall (2024)

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.


  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


  • 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:

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 Yarnyarn add gatsby-source-wordpress# Or NPMnpm i gatsby-source-wordpress

Add Gravity Form plugin to your Gatsby project

# Use Yarnyarn add gatsby-plugin-gravity-forms# Or NPMnpm 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.


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

Headless WordPress Gravity Forms with Gatsby - Step by Step Tutorial | Rob Marshall (2024)


What is WPGraphQL for Gravity Forms? ›

WPGraphQL for Gravity Forms extends the WPGraphQL plugin, allowing frontend apps to interact with the Gravity Forms data stored in a headless WordPress backend. This plugin couples the great forms functionality of Gravity Forms with the powerful WordPress-specific GraphQL implementation that WPGraphQL provides.

What are WordPress Gravity Forms? ›

What is Gravity Forms? Gravity Forms is a premium WordPress plugin that lets you create forms to place on your website. With this plugin, you can add contact forms, quizzes, and surveys to your website with ease.

Can you use Gravity Forms without WordPress? ›

No, Gravity Forms is a WordPress plugin and it is designed specifically to work within the WordPress environment. Therefore, it cannot be used without WordPress. Gravity Forms is a popular form builder plugin for WordPress that allows users to easily create and manage complex forms on their WordPress website.

What is the difference between MetForm and gravity forms? ›

MetForm allows seamless editing and customization for all form fields with Elementor page builder. 1. Gravity Forms offer the highest number of 3rd party integrations for Pro and Elite license users.

What is SyncS3 for gravity forms? ›

SyncS3 for Gravity Forms – SyncS3 gives Gravity Forms users the ability to push any files to any Amazon S3 bucket. When files are submitted through a form, you can send those files to any Amazon account, and any S3 bucket. Simply add your Amazon AWS credentials, chose which fields should push to S3, and save.

What is the best free form for WordPress? ›

We recommend WPForms as the best free form builder for WordPress. It's popularly known as the best contact form builder, but it lets you build any kind of form you need. It gives you access to templates, the visual editor, and other essential features you need to create a good functional form for your site.

Is there a free version of Gravity Forms? ›

If you're looking for a free form builder plugin, Gravity Forms isn't the plugin for you. However, our entry-level plan is very affordable. There are three different pricing plans. Each gives you access to the full Gravity Forms core plugin.

Is Gravity Forms worth it? ›

Drag and drop form builder for Wordpress

I highly recommend Gravity Forms for anyone in need of a professional and reliable form builder. Its robust features and ease of use make it a top choice for website owners looking to enhance their website's functionality and user experience.

What is the best way to style Gravity Forms? ›

The easiest way to style your Gravity Forms is by using form themes (introduced in Gravity Forms 2.7). Form themes change the look and feel of your forms with preset styles. Currently, there's only one theme available for Gravity Forms—Orbital.

How do I add a script to gravity form? ›

To add custom JavaScript, got to the Settings menu for your desired form and select the “Code Chest” item. Now just copy-and-paste your desired snippet into the JavaScript setting or start writing something from scratch, you little code pirate!

How do I add Captcha to gravity form in WordPress? ›

Step 2: Add reCAPTCHA to WordPress Gravity Forms
  1. Log into your website Dashboard.
  2. Go to Forms > Settings > reCAPTCHA Settings.
  3. Enter the private and public keys. ...
  4. Edit the form.
  5. Open the “Advanced Fields” box on the right-hand side.
  6. Drag the “CAPTCHA” field into the form.
  7. Update the form to save your changes.

Why use Gravity Forms in WordPress? ›

Gravity Forms is the most powerful and reliable form plugin for WordPress. Gravity Forms is a leader in website accessibility, allowing you to build forms that are SEO optimized and WCAG compliant using an intuitive drag and drop interface. The power of Gravity Forms lies in its extensibility and flexibility.

How many websites use Gravity Forms? ›

According to BuiltWith, there are 990,513 live websites currently using Gravity Form. Gravity Form is a WordPress plugin that lets you create custom forms the way you want. This contact form comes with a paid version.

What is gravity forms about? ›

What is Gravity Forms? Gravity Forms is a plugin for WordPress. It allows you to quickly create data collection forms, polls and surveys for your WordPress website.

What is the use of gravity form? ›

Gravity Forms allows you to create email notifications that send to admins or users when you receive a new form submission. You can create a new notification by going to the forms page, hovering over your form, and clicking on Settings. Next, click on Notifications in the left-hand menu and then Add New.

Is gravity form free? ›

If you're ready to try out Gravity Forms yourself, you have two ways to get started: Purchase your Gravity Forms license today to start building on your own sites right away. Spin up a 100% free, fully functional demo site to try all of the Gravity Forms features and add-ons on a working WordPress site.

How does gravity forms store data? ›

ALL of the data received via your form submissions is stored in tables in your own WordPress database on your own hosting provider. Please see our statement here https://docs.gravityforms.com/wordpress-gravity-forms-and-gdpr-compliance/ for additional related information.


Top Articles
Latest Posts
Article information

Author: Twana Towne Ret

Last Updated:

Views: 5521

Rating: 4.3 / 5 (44 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Twana Towne Ret

Birthday: 1994-03-19

Address: Apt. 990 97439 Corwin Motorway, Port Eliseoburgh, NM 99144-2618

Phone: +5958753152963

Job: National Specialist

Hobby: Kayaking, Photography, Skydiving, Embroidery, Leather crafting, Orienteering, Cooking

Introduction: My name is Twana Towne Ret, I am a famous, talented, joyous, perfect, powerful, inquisitive, lovely person who loves writing and wants to share my knowledge and understanding with you.