Gatsby Starter Default + Netlify Forms Examples + reCAPTCHA v2

This starter contains Netlify forms examples and reCAPTCHA with the main Gatsby configuration files you might need to run your contact form page.

Below you will find instructions for each step.

🚀 Quick start

1. Clone this repository

   Download ZIP or:

   git clone https://github.com/RafalMCichon/gatsby-netlify-form-examples.git

   or:

   Clone and deploy with a click

   

2. Installation

   Install dependencies.

   yarn

📄 Environment variables files

1. Create two .env files at the top-level (root)
2. .env.development

3. .env.production

     .
     ├── node_modules
     ├── src
     ├── .env.development
     ├── .env.production
     ├── .gitattributes
     ├── .gitignore
     ├── .prettierignore
     ├── .prettierrc
     ├── gatsby-browser.js
     ├── gatsby-config.js
     ├── gatsby-node.js
     ├── gatsby-ssr.js
     ├── LICENSE
     ├── package.json
     ├── README.md
     └── yarn.lock

🔑 Create reCAPTCHA keys

1. To create reCAPTCHA keys click here or copy the link: https://www.google.com/recaptcha/intro/v3.html
2. Open Admin console

3. Click + button to create new key

   

🔍 Step by step Register a new site

4. Label

   

   your website domain or project name

5. reCAPTCHA type

   

   reCAPTCHA v2

6. "I'm not a robot" tickbox (checkbox)

7. Domains

   

8. your-domain
9. site-name.netlify.com (for netlify test)
10. localhost (for development)

11. ☑️ Accept the reCAPTCHA Terms of Service (checkbox)

    

12. Submit

    

    

13. COPY SITE KEY and paste in your .env files:

    GATSBY_SITE_RECAPTCHA_KEY = your_site_key

14. COPY SECRET KEY and paste in your .env files:

    GATSBY_SITE_RECAPTCHA_SECRET = your_secret_key

15. Go to analytics

⚛️ Start developing.

1. Navigate into your new site’s directory and start it up:

   gatsby develop

🔧 Netlify Settings for reCAPTCHA 2

1. Add New site from Git and Deploy site

2. Open Site settings and Change site name to your github project name

   

   this name is needed in the reCAPTCHA Domains configuration

3. Open Build & deploy / Environment / Edit variables Set the key and secret in your site’s build environment variables.

   

4. Use GATSBY_SITE_RECAPTCHA_KEY to set your site key, and GATSBY_SITE_RECAPTCHA_SECRET to set the secret value provided by reCAPTCHA 2 - more details here.

   

   remember to add a prefix **`GATABY`**_

   (unlike in netlify documentation)

5. Open Deploys / Trigger deploys and Clear cache and deploy site

   

📝 Setup Netlify Form submissions

1. Go to Forms and check if they are all visible there - if not make sure they have unique names.

   

🧐 Tips

Netlify Recaptcha: If you’re using the:

<form data-netlify-recaptcha="true"></form>

element to add our recaptcha, you can only have one form using this. If you create multiple forms, receiving submissions will not work.

Test - first submissions

1. Go to Site settings / Forms / Form notifications and Add notification.

2. Choose Email notification.

   

3. Add Email to notify - your-email

4. Choose Form

   

5. And Save !

   we are ready to test if everything works

#header h1 a {
  display: block;
  width: 300px;
  height: 80px;
}

<div hidden>
  <label>
    Don’t fill this out if you're human:
    <input name="bot-field" onChange={this.handleChange} />
  </label>
</div>