ContactForm7でgrecaptcha is not defined が出て[recaptcha]が表示されない問題

ここのURLをクリップボードにコピー(copied!)

コンソールを見るとJavaScriptでエラー「Uncaught ReferenceError: grecaptcha is not defined」が出ている。

具体的な状況としては、

長期間メンテナンスされていないサイトのプラグイン「ContactForm7」のバージョンアップをした
[recaptcha]タグがあるにも関わらず、「私はロボットではありません」チェックボックスが表示されなくなった

という状況である。

調べてみると、以下のようなJavaScriptを</head>前に読み込ませてやる、のようなサイトがいくつか見受けられるが…

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

やってみても直らないし、header.php／footer.phpでプラグインで必要なJavaScriptやCSS類は読み込んでいるはずである。。。

結論

お問い合わせプラグイン「ContactForm7」がバージョン5.1から、reCAPTCHA v2 APIではなく「v3」のみの対応となったため、v2のサイトキー／シークレットキーではこのエラーが出て、正常に機能しなかった(表示されなかった)

解決策

Google reCAPTCHAのAdmin consoleより、v3のサイトキー／シークレットキーを発行する
ContactForm7の設定画面 > インテグレーションで上記2種類のキーを設定する

この対応で正常に表示されるようになります。

v3ではv2と違い、画像選択などの閲覧者側の操作が不要になるため、サイトのデザイン上、違いが出てきます。

reCAPTCHAのv2とv3、それぞれのサイト側の表示の違い

reCAPTCHA v2 APIの場合

[recaptcha]タグを入れた箇所に、「私はロボットではありません」のチェックボックスが表示されます。

※Invisible reCaptcha for WordPressのプラグイン等でチェックボックスを非表示にしていない場合

reCAPTCHA v3 APIの場合

サイトの右下にバッジの様なロゴが表示されます。

これで意味があるのか？と思う方もいらっしゃるかもしれませんが、v3ではバックグラウンドで認証を行う仕組みに変更されたため、閲覧者の操作は不要になりました。

これはメリットしかありませんよね。
しかしながらデザイン的には非表示にしたい、などの場合があるかもしれませんので、次にそちらをご紹介します。

reCAPTCHA v3のバッジを非表示にする方法

Googleの公式ページにも記載があります。

以下の表示をすればバッジを非表示にしても構わない

This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and 
<a href="https://policies.google.com/terms">Terms of Service</a> apply.

日本語に訳すと、以下のような感じでしょうか。

このサイトはreCAPTCHAと、Googleの<a href="https://policies.google.com/privacy">プライバシーポリシー</a>、<a href="https://policies.google.com/terms">利用規約</a>によって保護されています。

非表示にするCSS

.grecaptcha-badge { visibility: hidden; }

まとめ

JavaScriptでエラー「Uncaught ReferenceError: grecaptcha is not defined」が出たら、ContactForm7のバージョンを確認する。

5.1以上の場合は、登録しているGoogle reCAPTCHAのAPIバージョンがv2である可能性が高いので、その場合は新たにv3のキーを発行し、設定する。

v3特有のreCAPTCHAバッジを非表示にしたい場合は、Googleの規約に基づいてサイトに明記し、CSSは以下を使用すると良い。

.grecaptcha-badge { visibility: hidden; }