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)
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:
- Sign up for a reCAPTCHA API key pair for your site.
- Log in to your Netlify account, and add the following environment variables to your site’s Settings > Build & deploy > Build environment variables:
SITE_RECAPTCHA_KEYwith your reCAPTCHA site key.
SITE_RECAPTCHA_SECRETwith your reCAPTCHA secret key.
Important: the environment variables need to be called
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.
- 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
to your local .env.development file.