HOME → 3 WordPress → 03 カスタマイズ → 

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

WordPress Twenty Seventeen
Contact Form 7
メールフォームの スパム対策
 
Contact Form 7をバージョン 5.1へとアップデートすると、reCAPTCHA v3へ変更してくださいと表示される。
 
reCAPTCHA v3へ変更してくださいと表示される
 
以下に、Contact Form 7の reCAPTCHA を【v2→v3】に変更した方法を記録。
 

 

スポンサー リンク

 

 
 
Googleは2018年10月29日、
人間とbotを識別するための新API「reCAPTCHA v3」を公開した。
従来のreCAPTCHAは、
・ゆがんだ文字を読み取ったり、
・チェックボックスにチェックを入れるなど、
ユーザーによる操作が必要だったが、v3はこれら操作が不要になった。
 
V2からV3に更新するメリット。
①.「私はロボットではありません」のチェックが不要になる
②.reCAPTCHA タグの挿入が不要になる
 
 
 
 
スポンサー リンク
 
 
 
1. 【 reCAPTCHA 】のインテグレーションのセットアップ
 
Contact Form 7をバージョン 5.1へとアップデートすると、「お問い合わせ」の横に赤丸が表示され、「インテグレーション」の中に【 reCAPTCHA 】のインテグレーションのセットアップが表示される。
reCAPTCHA v3へ変更してくださいと表示される
 
上部には、「reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。」との記述がある。
reCAPTCHA v3 と v2 の API キーはそれぞれ別のものです。
 
「 reCAPTCHA (v3)」の箇所をクリックしてみると、Contact Form 7の reCAPTCHA (v3)の説明画面になる。
Contact Form 7の reCAPTCHA (v3)の説明画面
 
「 MyreCAPTCHA 」の箇所をクリックすると、reCAPTCHAにログインされ、reCAPTCHA v3のAPI keyを取得する画面が表示される。
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のAPI keyを登録する
 
reCAPTCHA v3の「Site key(サイトキー)」と「Secret key(シークレットキー)」が生成されるので、コピペして保存しておく。
reCAPTCHA v3の「Site key(サイトキー)」と「Secret key(シークレットキー)」が生成される
 
「お問い合わせ」の「インテグレーション」画面に戻り、「インテグレーションのセットアップ」をクリックする。
「インテグレーションのセットアップ」をクリックする
 
「サイトキー」と「シークレットキー」を入力する画面になる。
「サイトキー」と「シークレットキー」を入力する画面になる
 
先ほど保存して置いたそれぞれのキーを入力し、「変更を保存」をクリックする。
それぞれのキーを入力し「変更を保存」をクリック
 
【 reCAPTCHA 】のインテグレーションのセットアップが完了するので、右上にある「Contact Fom 7 の設定を検証する」をクリックする。
「Contact Fom 7 の設定を検証する」をクリックする
 
登録されているコンタクトフォームの数が表示されるので、ここをクリックする。
登録されているコンタクトフォームの数が表示されるので、ここをクリックする
 
「設定検証が完了しました。」が表示される。
「設定検証が完了しました。」が表示される
 
【 reCAPTCHA 】のインテグレーションが完了し、「お問い合わせ」横の赤丸が消える。
「お問い合わせ」横の赤丸が消える
 
 
 
2. コンタクトフォームの編集
 
従来のコンタクトフォームには、[reCAPTCHA] タグを挿入する必要があった。
従来のコンタクトフォームには、[reCAPTCHA] タグを挿入していた
 
従来のコンタクトフォームでは、「私はロボットではありません」にチェックが必要だった。
「私はロボットではありません」のチェックが必要だった
 
v3のコンタクトフォームには、[reCAPTCHA] タグが不要になったので、削除する。
[reCAPTCHA] タグが不要になったので削除
 
 
スポンサー リンク
 
 
3. 動作確認
 
v3のコンタクトフォームには、「私はロボットではありません」が表示されない。
「私はロボットではありません」が表示されない
 
問い合わせが、正常に送信できた。
問い合わせが、正常に送信できた
 
 
 
4. 【 プライバシー・利用規約 】のマークが表示される
 
【 プライバシー・利用規約 】マーク(バッジ)。
【 プライバシー・利用規約 】バッジ
 
reCAPTCHA v3を適用すると、すべての画面の右下に【 プライバシー・利用規約 】のマークが表示されるようになる。
画面の右下に【 プライバシー・利用規約 】のマークが表示される
 
これが、「ページのトップへ戻る」ボタンと重なる場合がある。
「ページのトップへ戻る」ボタンと重なる
 
スマホでの【 プライバシー・利用規約 】マークの表示。
スマホでの【 プライバシー・利用規約 】マークの表示
 
但し、AMP画面では表示されない。
AMP画面では表示されない
 
 
 
5. reCAPTCHAの「プライバシー・利用規定」のマークを消す方法
 
問い合わせフォーム用の固定ページ』を編集し、テキストタブで下記のhtmlソースを追記する。
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.
 
問い合わせフォーム用の固定ページを編集した例:テキスト画面。
問い合わせフォーム用の固定ページを編集した例:テキスト画面
 
問い合わせフォーム用の固定ページを編集した例:ビジュアル画面。
問い合わせフォーム用の固定ページを編集した例:ビジュアル画面
 
マーク(バッジ)を消すCSSの追加。
外観」→「カスタマイズ」→「追加CSS」にて、テーマに以下のCSSを追加して「公開」ボタンをクリックする。
.grecaptcha-badge {
    opacity: 0;
}
 
テーマにCSSを追加した例。
テーマにCSSを追加した例
 
reCAPTCHAの「プライバシー・利用規定」のマークが消えた。
reCAPTCHAの「プライバシー・利用規定」のマークが消えた
 
「ページのトップへ戻る」ボタンだけになった。
「ページのトップへ戻る」ボタンだけになった
 
変更後の問い合わせフォーム。
2つのリンクが自動的に設定されている。
変更後の問い合わせフォーム。2つのリンクが自動的に設定されている。
 
「Privacy Policy」をクリックしたときのリンク先画面。
「Privacy Plicy」をクリックしたときに表示される画面
 
「Terms of Service」をクリックしたときのリンク先画面。
「Terms of Service」をクリックしたときに表示される画面
 
確認のために送信すると、エラーが出た。
確認のために送信するとエラーが出た
 
再度送信すると、OKになった。
再度送信すると、OKになった
 
 
 
6. reCAPTCHA V3 を 問い合わせページのみで読み込む
 
「reCAPTCHA (v3)」を Contact Form 7 に設定すると、
・全ページにJSファイルが読み込まれてしまう。
・ページの表示速度が遅くなる。
 
この対策として、
問い合わせフォームが設置されているページのみに、
「reCAPTCHA (v3)」を読み込ませる。
 
functions.php に、以下のコードを追記する。
function load_recaptcha_js() {
 if ( ! is_page( 'xxxxx' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js' );
上記コード内の( 'xxxxx' )は、問い合わせページ(固定ページ)のスラッグ
 
固定ページで、スラッグを表示させるには、表示オプションで「スラッグ」にチェックを入れる。
固定ページで、スラッグを表示させるには、表示オプションで「スラッグ」にチェックを入れる
 
チェックを入れると、固定ページの最下部に「スラッグ」が表示されるので、分かりやすい英文字に変更する。
チェックを入れると、固定ページの最下部に「スラッグ」が表示されるので、分かりやすい英文字に変更する
 
上手くいったかどうかを確認するには、マーク(バッジ)を消すCSSを削除する。と、問い合わせページ(固定ページ)にのみ『マーク(バッジ)』が表示され、その他のページには『マーク(バッジ)』は表示されなくなる。
 
マーク(バッジ)を消すCSSは、設定しない方が良いらしい。
 
 
以上。
(2019.01.02)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください