環境

GatsbyにFlexFormプラグインをインストールしてお問い合わせページを作成・運用している。

目的

スパム送信を防ぐため、お問い合わせフォームページでreCAPCHAを利用したい。

方法

FlexFormによると、以下のスクリプトをソースコードに追加するとのこと。

<script src="https://www.google.com/recaptcha/api.js?render=XXXXXxxXXXXXXXXXX2Z6XXXXXXXXXXxxxxx-MXXXXX"></script>
<script src="https://www.flexyform.com/js/recaptcha.js"></script>
<input type="hidden" name="_recaptcha" id="_recaptcha"/>

さて、

Gatsbyページに`<script>`コードを埋め込むには？？

結論：<Helmet>タグを使う。

手順

Helmetプラグインをインストール
参考：GatsbyでSEO対策をする
お問合せページ（contact.jsx）にコードを追加。まずHelmetインポート文を宣言記述

import { Helmet } from "react-helmet"

FlexForm指定の<scrip>タグを<Helmet>タグで挟んで記述

<Helmet>
   <script src="https://www.google.com/recaptcha/api.js?render=XXXXXxxXXXXXXXXXX2Z6XXXXXXXXXXxxxxx-MXXXXX"></script>
   <script src="https://www.flexyform.com/js/recaptcha.js" />
</Helmet>

<Form>内の適当な場所にFlexForm指定の<input>タグを記述

<input type="hidden" name="_recaptcha" id="_recaptcha"/>

reCAPCHAが表示された。

ソースコード全文

// contact.jsx
// bootstrapを使っているので<input>タグはbootstrap形式の<Form.Control...>になっている.

import React from "react"
import { Link } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { Container, Button, Form } from 'react-bootstrap'
import Style from './contact.module.css'

import { Helmet } from "react-helmet" 


const Contact = () => (
    <>
    <Layout>
      <SEO title="お問い合わせ" />
      <Helmet>
          <script src="https://www.google.com/recaptcha/api.js?render=6XXXXXXXXXXXXXXXXgLyXXXXXXXXXXX-XXXXph" />
          <script src="https://www.flexyform.com/js/recaptcha.js" />
      </Helmet>

      <Container fluid="md">
      <h1 style={{fontSize:`1.2rem`}}>お問い合わせ（Contact Form）</h1>
      <p style={{color:`gray`}}>
      </p>
        <form method="post" action="https://www.flexyform.com/f/0d9a762c9e63a346d30047f4900222125d7208d2">
            <Form.Control type="text" as="input" placeholder="お名前（Name）※仮名でも構いません" name="name" required />
            <br />
            <Form.Control type="email" as="input" placeholder="メールアドレス（Email address）" name="email" required />
            <br />
            <Form.Control type="email" as="input" placeholder="メールアドレス（確認用にもう一度打ってください）" name="_reply_to" required />
            <br />
            <Form.Control as="textarea" placeholder="お問い合わせ内容（Message）" rows="3" name="message" required />
            <Form.Control as="input" style={{visibility:`hidden`}} name="_recaptcha" id="_recaptcha"/>
            <Button variant="info" type="submit">送信</Button>
        </form>
      </Container>
    </Layout>
    </>
)

export default Contact

reCAPCHAはこのようなものではなくなりました
↓

これはバージョン２。現在のreCAPCHAはバージョン３になっている。reCAPTCHA v3 はバックグラウンドで動作し、メールフォームやコメント欄に投稿しようとしている何者かが「人間らしい振る舞い(操作)をしているか」を常に監視しているため、読みにくい文字を入力させたりチェックボックスにチェックを入れる必要が無くなった。

参考

FLEXFORM
Add Script tag in Gatsby [closed]
「reCAPTCHAで保護されています」って何？表示を消す方法はある？

本の宣伝

Gatsbyバージョン５>>>>改訂２版

前編の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と後編の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ https://yah-space.work

静的サイトジェネレーターGatsby最新バージョン５の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《Slicy API》《Script API》《Head API》を紹介、実装方法も。《Gatsby Functions》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！

最新Gatsby５とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《サイト内検索機能》をGatsbyバージョン４からの新機能《Gatsby Functions》と《microCMSのqパラメータ》で実装。また、SEOコンポーネントをカスタマイズしてmicroCMS APIをツイッターカードに表示させるOGPタグ実装方法も解説。

Gatsbyで<script>タグを埋め込む方法～お問合せフォームでreCAPCHAを使いたくて～

環境

目的

方法

Gatsbyページに<script>コードを埋め込むには？？

手順

ソースコード全文

参考

本の宣伝

Gatsbyバージョン５>>>>改訂２版

Gatsbyページに`<script>`コードを埋め込むには？？