A (relatively) plug and play component for parsing gatsby-source-gravityforms GraphQL data. Outputs a component using BEM classes, meaning all you need to do it style it.
Uses React Hook Forms under the hood for all that good state management.
# Install the component
yarn add gatsby-gravityforms-component
# Or with NPM
npm i gatsby-gravityforms-component
- Once you have set up gatsby-source-gravityforms
- Import the component where you want to use it
- Grab the GraphQL data from the gatsby-source-gravityforms plugin and pass to component
- Set the form ID
- Add your environment variables
- Add the Lambda function (scroll down a little)
import React from 'react'
import GravityFormForm from 'gatsby-gravityforms-component'
// Would recommend moving this into a separate /src/hooks/gravityforms.js file
// and import where needed
import { useStaticQuery, graphql } from 'gatsby'
const allGravityData = () => {
const { allGfForm } = useStaticQuery(
graphql`
query {
allGfForm {
edges {
node {
formId
slug
apiURL
descriptionPlacement
formFields {
id
label
description
descriptionPlacement
type
choices
content
errorMessage
inputMaskValue
isRequired
visibility
cssClass
placeholder
size
defaultValue
maxLength
}
button {
text
}
confirmations {
message
}
}
}
}
}
`
)
return allGfForm
}
const examplePage = () => (
<GravityFormForm
id={1}
formData={allGravityData()}
presetValues={{ input_1: 'special_value' }}
lambda={process.env.LAMBDA_ENDPOINT}
/>
)
export default examplePage
This outputs the form that has been set up in WordPress - Gravity Forms. Ready for you to style it!
id: The ID of the form, get in WordPress Gravity Forms formDate: The data passed from the query function - this is the same for all forms presetValues: An object, with the keys set as the input ID (shown in Gravity Forms editor) and the value to set the field as. Great for hidden fields. lambda: The URL to the lambda endpoint
The following environment variables should be added to your hosting provider backend. If unsure, most providers have an article explaining. A quick Google should find this.
GF_CONSUMER_KEY = 'XXXXXX'
GF_CONSUMER_SECRET = 'XXXXXX'
LAMBDA_ENDPOINT = 'https://examplesite.com/.netlify/functions/newGfEntry'
See "/examples/lambda/.env/sample" for the file.
Depending on what build (Gatsby/React/ect) you are using, these will need to be defined and pulled into your project in different ways.
- Webpack: https://webpack.js.org/plugins/define-plugin/
- Gatsby: https://www.gatsbyjs.org/docs/environment-variables/#accessing-environment-variables-in-javascript
To enable the component to pass data from a static site to a server needs a little big of help to bridge the gap. As Gravity Forms uses secret keys to read/write, there needs to be somewhere safe to hold and manage these details.
Using a combination of environment variables and a Lambda function we can navigate these insecure waters.
Add the following function as a Lambda function, and add your Gravity Form keys as environment variables (these will be already set if you are using the gatsby-source-gravityforms plugin)
- Add a folder called "lambda" in your projects /src folder
- Create a file inside called "newGfEntry.js"
- Copy the code from /examples/lambda/newGfEntry.js into that file
- Make sure all environment variables at the top of the code have been updated with yours.
- Add a folder at the root of your project called "built-lambda"
- Create a file at the root of your project called netlify.toml
- Add the following code to netlify.toml
- TODO - add details about deployment
[build]
functions = "built-lambda"
If you have any issues with these steps, see these articles:
- https://www.netlify.com/docs/functions/
- https://travishorn.com/netlify-lambda-functions-from-scratch-1186f61c659e
- https://macarthur.me/posts/building-a-lambda-function-with-netlify
If you are running this in a development build on localhost in Chrome, you will come across a Cors issue. No matter what you do, the request will not be read. This is due to Chrome not allowing this.
A solution for a development environment - Run Chrome with the following flag: --disable-web-security
For more information: https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin/10892392#10892392
If you are having Self Signed Certificate issues, put this at the top of the newGfEntry.js file.
process.env.NODE_TLS_REJECT_UNAUTHORIZED = "0"
- But only on your localhost!!! *
Firstly, yes please! Any help would be great.
If you are developing locally, you may run into an error "Cannot resolve React". If you do, check out this article: https://thoughtsandstuff.com/building-react-components-for-gatsby-using-npm-link-and-hooks-cant-resolve-react-solution
-
Input
-
Textarea
-
Select
-
Multiselect
-
Number
-
Checkbox
-
Radio
-
Hidden
-
HTML
-
Add masking to inputs
- Honeypot
- Add submit/error callback for custom use
- Turn data into Gravity Forms schema
- Function to send/receive data from CMS
- Error handling provided by Gravity Forms