Gatsby製ブログでreCAPTCHA付きのNetlify Formを実装する方法（スパム対策）

<input type="hidden" name="form-name" value="(formのname)" />

npm install --save react-google-recaptcha

import * as React from "react"
import { Link, graphql, navigate } from "gatsby"
import Recaptcha from "react-google-recaptcha"

import Layout from "../components/layout"
import Seo from "../components/seo"

const RECAPTCHA_KEY = process.env.GATSBY_APP_SITE_RECAPTCHA_KEY
if (typeof RECAPTCHA_KEY === "undefined") {
  throw new Error(`
  reCAPTCHAキーが登録されていません
  `)
}

function encode(data) {
  return Object.keys(data)
    .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
    .join("&")
}

const Contact = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata?.title || `Title`
  const [state, setState] = React.useState({})
  const recaptchaRef = React.createRef()
  const [recaptchaStatus, setRecaptchaStatus] = React.useState(false)

  const handleChange = e => {
    setState({ ...state, [e.target.name]: e.target.value })
  }

  const handleSubmit = e => {
    e.preventDefault()
    const form = e.target
    const recaptchaValue = recaptchaRef.current.getValue()
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": form.getAttribute("name"),
        "g-recaptcha-response": recaptchaValue,
        ...state,
      }),
    })
      .then(() => navigate(form.getAttribute("action")))
      .catch(error => alert(error))
  }

  const recaptchaSuccess = () => {
    setRecaptchaStatus(true)
  }

  return (
    <Layout location={location} title={siteTitle}>
      <Seo title="お問い合わせフォーム" />
      <h1>お問い合わせフォーム</h1>
      <p>これはサンプルです。</p>
      <form
        name="contact"
        action="/success/"
        method="POST"
        data-netlify="true"
        data-netlify-recaptcha="true"
        onSubmit={handleSubmit}
      >
        {/*静的サイトジェネレータの場合必要*/}
        <input type="hidden" name="form-name" value="contact" />
        <div className="inputGroup">
          <label htmlFor="name">お名前(必須): </label>
          <input
            type="text"
            name="name"
            id="name"
            required
            onChange={handleChange}
          />
        </div>
        <div className="inputGroup">
          <label htmlFor="email">メールアドレス(必須): </label>
          <input
            type="email"
            name="email"
            id="email"
            required
            onChange={handleChange}
          />
        </div>
        <div className="inputGroup">
          <label htmlFor="message">お問い合わせ内容(必須): </label>
          <textarea
            name="message"
            id="message"
            rows="5"
            cols="50"
            required
            onChange={handleChange}
          ></textarea>
        </div>
        <div className="checkbox">
          <input
            type="checkbox"
            name="agreement"
            id="agreement"
            required
            onChange={handleChange}
          />
          <label htmlFor="agreement">
            <Link to="/privacy-policy/">プライバシーポリシー</Link>
            に同意する(必須)
          </label>
        </div>
        <div className="center">
          <Recaptcha
            ref={recaptchaRef}
            sitekey={RECAPTCHA_KEY}
            onChange={recaptchaSuccess}
          />
        </div>
        <div className="center">
          <button type="submit" disabled={!recaptchaStatus}>
            送信
          </button>
        </div>
      </form>
    </Layout>
  )
}

export default Contact

export const pageQuery = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

echo SITE_RECAPTCHA_KEY=$SITE_RECAPTCHA_KEY >> .env.production && gatsby build

GATSBY_APP_SITE_RECAPTCHA_KEY='(先ほど取得したサイトキー)'