Example site integrating Netlify's form handing in Gatsby's starter template
Switch branches/tags
Nothing to show
Clone or download
Latest commit 6bbe08d Oct 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Add recaptcha example May 25, 2018
.gitignore Add recaptcha example May 25, 2018
.travis.yml Stop testing Node 0.10 as it's not supported any longer May 3, 2016
LICENSE Initial commit Jul 21, 2015
README.md Update README.md Oct 4, 2018
gatsby-config.js Add recaptcha example May 25, 2018
package.json Add recaptcha example May 25, 2018
yarn.lock Add recaptcha example May 25, 2018

README.md

Integrating Netlify Form Handling in Gatsby

Example for integrating a basic contact form with Netlify’s form handling feature (based on the default Gatsby starter)

Demo: https://gatsby-form-example.netlify.com

Deploy

Deploy to Netlify

reCAPTCHA

This example site uses react-google-recaptcha to render the reCAPTCHA widget.

To make the reCAPTCHA example work in your own copy of this site, you’ll need to do the following:

  1. Sign up for a reCAPTCHA API key pair for your site.
  2. Log in to your Netlify account, and add the following environment variables to your site’s Settings > Build & deploy > Build environment variables:
  • SITE_RECAPTCHA_KEY with your reCAPTCHA site key.
  • SITE_RECAPTCHA_SECRET with your reCAPTCHA secret key.

Important: the environment variables need to be called SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET for the Netlify backend to find them. If you add a GATSBY_ prefix to the variable names, the Netlify backend won't recognize them, the reCAPTCHA verification will fail, and your form submissions won't be stored.

  1. Change the build command for your site to
echo SITE_RECAPTCHA_KEY=$SITE_RECAPTCHA_KEY >> env.production && gatsby build

This will make the SITE_RECAPTCHA_KEY available to the Gatsby build in production.

To see the reCAPTCHA widget locally, add SITE_RECAPTCHA_KEY=your-reCAPTCHA-API-site-key to your local .env.development file.

Troubleshooting

Forms stop working after upgrading to Gatsby v2

This can be caused by the offline-plugin. Workaround is to use ?no-cache=1 in the POST url to prevent the service worker from handling form submissions (Thanks to @phmu_office for the heads up )