「お問い合わせ」 reCAPTCHA インテグレーションのセットアップ

Contact Form 7をバージョン 5.1へとアップデートすると、「お問い合わせ」の横に赤丸が表示され、「インテグレーション」の中に【 reCAPTCHA 】のインテグレーションのセットアップが表示される。

上部には、「reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。」との記述がある。

「 reCAPTCHA （v3）」の箇所をクリックしてみると、Contact Form 7の reCAPTCHA （v3）の説明画面になる。

「 MyreCAPTCHA 」の箇所をクリックすると、reCAPTCHAにログインされ、reCAPTCHA v3のAPI keyを取得する画面が表示される。

v2のAPI keyは取得済みだが v3は無いので、新規にサイトを登録する。
・[Label]：わかりやすい名前を入力（今回はドメイン名＋reCAPTCHAと入力）
・[Choose the type of reCAPTCHA]：「reCAPTCHA v3」を選択
・[Domains]：ドメイン名を入力（複数ある場合は改行して入力）
・[Accept the reCAPTCHA Terms of Service.]：チェックを入れる
・[Send alerts to owners]：チェックを入れる
最後に「Register」をクリックする。

reCAPTCHA v3の「Site key（サイトキー）」と「Secret key（シークレットキー）」が生成されるので、コピペして保存しておく。

「お問い合わせ」の「インテグレーション」画面に戻り、「インテグレーションのセットアップ」をクリックする。

「サイトキー」と「シークレットキー」を入力する画面になる。

先ほど保存して置いたそれぞれのキーを入力し、「変更を保存」をクリックする。

【 reCAPTCHA 】のインテグレーションのセットアップが完了するので、右上にある「Contact Fom 7 の設定を検証する」をクリックする。

登録されているコンタクトフォームの数が表示されるので、ここをクリックする。

「設定検証が完了しました。」が表示される。

【 reCAPTCHA 】のインテグレーションが完了し、「お問い合わせ」横の赤丸が消える。

従来のコンタクトフォームには、［reCAPTCHA］ タグを挿入する必要があった。

従来のコンタクトフォームでは、「私はロボットではありません」にチェックが必要だった。

v3のコンタクトフォームには、［reCAPTCHA］ タグが不要になったので、削除する。

v3のコンタクトフォームには、「私はロボットではありません」が表示されない。

問い合わせが、正常に送信できた。

【 プライバシー・利用規約 】マーク（バッジ）。

reCAPTCHA v3を適用すると、すべての画面の右下に【 プライバシー・利用規約 】のマークが表示されるようになる。

これが、「ページのトップへ戻る」ボタンと重なる場合がある。

スマホでの【 プライバシー・利用規約 】マークの表示。

但し、AMP画面では表示されない。

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

問い合わせフォーム用の固定ページを編集した例：テキスト画面。

問い合わせフォーム用の固定ページを編集した例：ビジュアル画面。

.grecaptcha-badge {
    opacity: 0;
}

テーマにCSSを追加した例。

reCAPTCHAの「プライバシー・利用規定」のマークが消えた。

「ページのトップへ戻る」ボタンだけになった。

変更後の問い合わせフォーム。
２つのリンクが自動的に設定されている。

「Privacy Policy」をクリックしたときのリンク先画面。

「Terms of Service」をクリックしたときのリンク先画面。

確認のために送信すると、エラーが出た。

再度送信すると、OKになった。

function load_recaptcha_js() {
 if ( ! is_page( 'xxxxx' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js' );

固定ページで、スラッグを表示させるには、表示オプションで「スラッグ」にチェックを入れる。

チェックを入れると、固定ページの最下部に「スラッグ」が表示されるので、分かりやすい英文字に変更する。