「お問い合わせ」 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ソースを追記する。
 
問い合わせフォーム用の固定ページを編集した例:テキスト画面。
問い合わせフォーム用の固定ページを編集した例:テキスト画面
 
問い合わせフォーム用の固定ページを編集した例:ビジュアル画面。
問い合わせフォーム用の固定ページを編集した例:ビジュアル画面
 
マーク(バッジ)を消すCSSの追加。
外観」→「カスタマイズ」→「追加CSS」にて、テーマに以下のCSSを追加して「公開」ボタンをクリックする。
 
テーマにCSSを追加した例。
テーマにCSSを追加した例
 
reCAPTCHAの「プライバシー・利用規定」のマークが消えた。
reCAPTCHAの「プライバシー・利用規定」のマークが消えた
 
「ページのトップへ戻る」ボタンだけになった。
「ページのトップへ戻る」ボタンだけになった
 
変更後の問い合わせフォーム。
2つのリンクが自動的に設定されている。
変更後の問い合わせフォーム。2つのリンクが自動的に設定されている。
 
「Privacy Policy」をクリックしたときのリンク先画面。
「Privacy Plicy」をクリックしたときに表示される画面
 
「Terms of Service」をクリックしたときのリンク先画面。
「Terms of Service」をクリックしたときに表示される画面
 
確認のために送信すると、エラーが出た。
確認のために送信するとエラーが出た
 
再度送信すると、OKになった。
再度送信すると、OKになった
 
 
以上。
(2019.01.02)
 
スポンサー リンク

 

           

 

 

 

コメントを残す

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

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