Gatsby Starters & Templates Logo Gatsby Starters & Templates
Gatsby Netlify Form Example screenshot

Gatsby Netlify Form Example

Author Avatar Theme by Imorente
Updated: 23 Jan 2019
137 Stars

Example site integrating Netlify's form handing in Gatsby's starter template

Github

Overview

The article discusses how to integrate a basic contact form with Netlify’s form handling feature in a Gatsby site. It provides an example and instructions on how to set up and configure the form. The article also mentions a troubleshooting tip for forms not working after upgrading to Gatsby v2.

Features

  • Integration of Netlify’s form handling feature with a contact form in Gatsby
  • Usage of react-google-recaptcha for rendering the reCAPTCHA widget
  • Configuration of reCAPTCHA API key pair for the site
  • Addition of environment variables in Netlify’s site settings for reCAPTCHA
  • Change in build command to make reCAPTCHA key available in Gatsby build in production
  • Local setup for viewing the reCAPTCHA widget
  • Troubleshooting tip for forms not working after upgrading to Gatsby v2

Installation

To integrate a basic contact form with Netlify’s form handling feature in a Gatsby site, follow these steps:

  1. Sign up for a reCAPTCHA API key pair for your site.
  2. Log in to your Netlify account and navigate to your site’s Settings > Build & deploy > Build environment variables.
  3. Add the following environment variables:
    • SITE_RECAPTCHA_KEY: Your reCAPTCHA site key
    • SITE_RECAPTCHA_SECRET: Your reCAPTCHA secret key Note: Ensure that the environment variables are named exactly as specified (SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRET), as the Netlify backend requires them in this format.
  4. Change the build command for your site to include the reCAPTCHA key. For example:
    GATSBY_SITE_RECAPTCHA_KEY=$SITE_RECAPTCHA_KEY gatsby build
    This will make the SITE_RECAPTCHA_KEY available to the Gatsby build in production. Adjust the command according to your build setup.
  5. To see the reCAPTCHA widget locally, add the following line to your local .env.development file:
    SITE_RECAPTCHA_KEY=your-reCAPTCHA-API-site-key
    Replace your-reCAPTCHA-API-site-key with your actual reCAPTCHA API site key.
  6. Save the file and run your Gatsby development server.
  7. Test your contact form with the integrated Netlify form handling.

Summary

The article provides a guide on integrating Netlify form handling in a Gatsby site. It includes instructions for setting up a contact form, configuring reCAPTCHA, and troubleshooting issues with forms after upgrading to Gatsby v2. This integration allows for easy form submission handling and storage using Netlify’s backend.