Gatsby Netlify Form Example
Example site integrating Netlify's form handing in Gatsby's starter template
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
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.
- Gatsby
GatsbyJS is a free and open-source static site generator based on React. It uses a modern development stack including Webpack, GraphQL, and modern JavaScript and CSS frameworks. It also provides a rich set of plugins, starters, and themes.
- GitHub Pages
Gridsome is a Vue.js-based static site generator that makes it easy to build fast and flexible websites and applications by leveraging modern web technologies like GraphQL, Webpack, and hot reloading