Gatsby GraphQl Gravity Forms Component

A plug and play component for parsing GraphQL Gravity Form data. Outputs a component using BEM classes, meaning all you need to do is style it.

To be used alongside gatsby-source-wordpress and wp-graphql-gravity-forms (version 0.10.0 up).

Uses React Hook Forms under the hood for all that good state management.

Apollo is baked in for handling the data submission.

Installation

# Install the component
yarn add gatsby-plugin-gravity-forms

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

How To Use

Add the component to your gatsby-config.js file.

{
  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",
  },
},

Import the component and use it with a GraphQL query. Select the required form using its databaseId.

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

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

const ExamplePage = () => {
  const data = useStaticQuery(graphql`
    query formQuery {
      wpGfForm(databaseId: { eq: 1 }) {
        ...GravityFormFields
      }
    }
  `);

  return (
    <Layout>
      <GravityFormForm data={data} />
    </Layout>
  );
};

export default ExamplePage;

The ...GravityFormFields fragment is included within the gatsby-plugin-gravity-forms plugin.

This outputs the form that has been set up in WordPress - Gravity Forms. Ready for you to style it!

Tutorial on setup: https://robertmarshall.dev/blog/headless-wordpress-gravity-forms-with-gatsby-step-by-step-tutorial/

Passing in Preset Values

Sometimes you will want to conditionally set default values, or pass in data to hidden fields. This could be values for a user ID, or a current page.

This is handled by the presetValues prop.

<GravityFormForm data={form} presetValues={{ input_2: "My preset value" }} />

In the above example input_2 corresponds to the 2nd field added in the WordPress Gravity Forms edit page. This value can be found by clicking on the field and looking at the top right just under Field Settings.

WordPress Backend Not Allowing Submission

Having CORS issues?

Add the following snippet of code to your WordPress functions.php file.

Make sure to update the 'https://yourfrontendurl.com' to your actual frontend. With no trailing slash.

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'
    ] );
} );

Implementing Google reCAPTCHA

On your WordPress backend within the Gravity Forms settings set up reCaptcha. Follow the instructions provided by Gravity Forms.

Testing & Developing

Firstly, yes please! Any help would be great.

Developing Locally

To develop the component, you first need to link it to a Gatsby project. This is so you have an environment to work with. The Gatsby Default Starter is a good choice.

To Do

Field Components

<input checked="" disabled="" type="checkbox"> Input
- <input disabled="" type="checkbox"> Email - Confirmation Email
<input checked="" disabled="" type="checkbox"> Textarea
<input disabled="" type="checkbox"> Select (half done, need to add default values)
<input disabled="" type="checkbox"> Multiselect
<input checked="" disabled="" type="checkbox"> Number
<input disabled="" type="checkbox"> Checkbox (half done, need to add default values)
<input disabled="" type="checkbox"> Radio (half done, need to add default values and correct error placement)
<input checked="" disabled="" type="checkbox"> Hidden
<input checked="" disabled="" type="checkbox"> HTML
<input checked="" disabled="" type="checkbox"> Captcha
<input checked="" disabled="" type="checkbox"> Add masking to inputs
<input disabled="" type="checkbox"> Section
<input disabled="" type="checkbox"> Page
<input disabled="" type="checkbox"> Date
<input disabled="" type="checkbox"> File upload
<input disabled="" type="checkbox"> Post Fields
<input disabled="" type="checkbox"> Pricing Fields
<input disabled="" type="checkbox"> Phone
<input disabled="" type="checkbox"> Email
<input disabled="" type="checkbox"> Configure error message (currently just 'An Unknown Error Occurred')
<input disabled="" type="checkbox"> Integrate Success/Failure Handler from previous plugin

General Form

<input disabled="" type="checkbox"> Honeypot
<input disabled="" type="checkbox"> Save and Continue
<input checked="" disabled="" type="checkbox"> Add submit/error callback for custom use

Add Tests to Inputs

<input disabled="" type="checkbox"> Input
<input disabled="" type="checkbox"> Textarea
<input disabled="" type="checkbox"> Select (half done, need to add default values)
<input disabled="" type="checkbox"> Multiselect
<input disabled="" type="checkbox"> Number
<input disabled="" type="checkbox"> Checkbox (half done, need to add default values)
<input disabled="" type="checkbox"> Radio (half done, need to add default values)
<input disabled="" type="checkbox"> Hidden
<input disabled="" type="checkbox"> HTML
<input disabled="" type="checkbox"> Captcha

Confirmations

<input checked="" disabled="" type="checkbox"> Text Confirmation
<input disabled="" type="checkbox"> Page Change
<input disabled="" type="checkbox"> Redirect
<input disabled="" type="checkbox"> Redirect query strings
<input disabled="" type="checkbox"> Conditional Logic

Known Issues

<input disabled="" type="checkbox"> Invalid phone number results in failed submission w/ non-descript general error message.

Changelog

v3.1.0 - Added Invisible Gravity Forms reCaptcha

New fragment added, as well as support for the Invisible Google reCaptcha.

v3.0.2 - Fixed errors, and added initial confirmation handling

The Gravity Form error object had slightly changed. This has been corrected.
Confirmations were being forced to default. Now new confirmations can be added in WordPress and picked over default if active.

v3.0.1 - Small Fixes

Implements a Select Fix (Thanks @embergardens)
Adds basic confirmation redirect support.
Small typo fixes.

v3.0.0 - Updates button query

Updates button query to latest GraphQL GF format.

v2.0.3 - Bugfix

Removed the checking of an entry ID on submission. This is because some users delete the entry immediately for GDPR purposes. Meaning there is no entry to check for. This has been replaced with a simple check of an error object.

v2.0.2 - Hotfix

This hotfix updates how errors/messaging is handled for empty fields containing checkboxes.

v2.0.1 - Hotfix

This hotfix adds the missed wpGraphQl fields from the v0.10.0 update. Now submits as it should! No more strange errors.

v2.0.0 - Support WP GraphQL Gravity Forms v0.10.0 Updates

:warning: This release contains breaking changes.

This major release updates the GraphQL queries to match those in the recently updated v0.10.0 wp-graphql-gravity-forms.

What's New

GraphQl query now uses wpGfForm rather than wpGravityFormsForm.
The form is now selected by its databaseId rather than formId.
Gravity Forms entries and draft entries now inherit the gfEntry interface, and use the GfSubmittedEntry and GfDraftEntry object types.
A large number of scheme changes. See here for more details.

Package detail

gatsby-plugin-gravity-forms

readme