![カエルくん](https://sho-chanblog.com/wp-content/uploads/2020/11/c_choju50_0026_s256_choju50_0026_0.png)
海外から謎のメールが届いて、ちょっと怖いんだけど!
![しょーちゃん](https://sho-chanblog.com/wp-content/uploads/2020/08/s1-1.png)
だいたいがボットと呼ばれるロボットが徘徊してメールを送り付けてくるんだ!
お問い合わせフォームに「reCAPTCHA」って機能を追加してスパム対策しておこう!
お問い合わせフォームで人気のプラグイン「コンタクトフォーム7」にGoogleの「reCAPTCHA v3」を設定してスパム対策を強化しておきましょう。
プラグインを入れて設定することもできますが、サイトが重くなるや不具合など考えて、reCAPTCHA公式の導入方法で解説してきます。
先に説明しておきますが、この方法でやるとreCAPTCHAのマークが全ページに表示され、トップに戻るボタンと重なってしまいます。
そこで公式に認められているCSSを使って、reCAPTCHAのマークを非表示にする方法も一緒に解説していきます。
reCAPTCHAとは
reCAPTCHAとは、Googleが提供しているスパム対策機能で、現在は「reCAPTCHA v3」がリリースされています。
この機能により、人間かロボットか判別することができます。
スパムメールの大半が海外からで、どれもbotと呼ばれる自動プログラムによってスパムメールを送り付けています。
reCAPTCHAによって、スパム行為をするロボットを排除することができるため、多くのところで導入されています。
![reCAPTCHAの画像](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA1-800x193.png)
この画像どこかで見ませんか?「私はロボットではありません。」って認証するこれがreCAPTCHAです。
Contact Form 7にreCAPTCHAを簡単に設定する方法
お問い合わせフォームで人気の「Contact Form 7」にGoogleの「reCAPTCHA v3」を簡単に導入することができるので紹介します。
1.Google reCAPTCHAに登録(無料)する。
2.Contact Form 7に設定する
Google reCAPTCHAに登録する
Google reCAPTCHAにアクセスしてください。
![reCAPTCHAの登録方法](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA2-800x232.png)
「管理コンソール(Admin Console)」をクリック
![reCAPTCHAの登録方法](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA3-800x1079.png)
1.「ラベル」に任意の名前を入力
2.「reCAPTCHA タイプ」で「reCAPTCHA v3」を選択
3.「ドメイン」に自信のブログドメインを入力
4.「オーナー」Googleにログイン済みなら、メールアドレスが入力済みになっています。
もし入力されていなければメールアドレスを入力する
5.「reCAPTCHA 利用規約に同意」にチェック
6.「送信」をクリック
![reCAPTCHAのサイトキーとシークレットキー](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA4-800x497.png)
この画面に表示されている「サイトキーとシークレットキー」をContact Form 7の設定に使います。
Contact Form 7にキーを登録する
コンタクトフォーム7の設定に入るので、WordPress管理画面へアクセスしてください。
![Contact Form 7のインテグレーションにアクセス](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA5-800x440.png)
「お問い合わせ」→「インテグレーション」をクリック
![Contact Form 7のreCAPTCHAインテグレーションのセットアップ](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA6-800x587.png)
reCAPTCHAの「インテグレーションのセットアップ」をクリック
![reCAPTCHAのサイトキー・シークレットキーを登録](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA7-800x403.png)
reCAPTCHAで登録した各キーを入力します。
1.「サイトキー」reCAPTCHAのサイトキーを入力
2.「シークレットキー」reCAPTCHAのシークレットキーを入力
3.「変更を保存」をクリックで完了!
![reCAPTCHAが表示される](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA8-800x535.png)
ブログにアクセスしてみると「reCAPTCHAのマーク」が表示されています。
エラー表示になっていなければOKです。
この方法で一つ問題があり、全ページで「reCAPTCHAのマーク」が表示され、トップに戻るボタンと重なってしまいます。
![reCAPTCHAのマークが重なってしまう](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA9.png)
トップに戻るボタンを設定している方は、reCAPTCHAのマークが邪魔になってしまいます。
そこで、GoogleからCSSで非表示にしてもいいと認められているので、解説していきます。
CSSでreCAPTCHAのマークを消す方法
reCAPTCHAのマークを非表示にすることが、Googleから認められています。
reCAPTCHAの公式FAQにマークを消すことを許可するとありますが、代わりにGoogleのプライバシーポリシーと利用規約をユーザーの目に留まる位置に表示させることが条件にあります。
![GoogleのreCAPTCHA公式FAQ](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA10-800x510.png)
実際にCSSでreCAPTCHAのマークを消す手順を紹介します。
CSSを貼り付けてreCAPTCHAのマークを非表示
CSSに貼り付けるコードはこちらになります。コピーしてください。
/*reCAPTCHAのマークを非表示にする*/
.grecaptcha-badge { visibility: hidden; }
このコードをCSS子テーマの方に貼り付けます。
![reCAPTCHAのマークを非表示にするCSSを貼り付け](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA11-800x318.png)
「外観」→「テーマエディター」をクリック
子テーマのスタイルシートに先ほどのコードを貼り付けて「ファイルを更新」をクリック
![reCAPTCHAのマークが非表示になる](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA12.png)
ブログにアクセスしてreCAPTCHAのマークが非表示になっていればOKです。
続いて、非表示にする条件のプライバシーポリシーと利用規約を表示させます。
reCAPTCHAを非表示にしたら利用規約を表示しよう
reCAPTCHAのマークを非表示にする条件のプライバシーポリシーと利用規約をユーザーの目に留まる位置に表示していきます。
今回は、お問い合わせなので「Contact Form 7」にプライバシーポリシーと利用規約を貼り付けていきます。
貼り付けるHTMLはこちらになるので、コピーしてください。
このサイトはGoogle reCAPTCHAで保護されています。
<a href="https://policies.google.com/privacy">プライバシーポリシー</a>
<a href="https://policies.google.com/terms">利用規約</a> が適用されます。
![コンタクトフォームにアクセス](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA13-800x398.png)
「お問い合わせ」→「コンタクトフォーム」をクリック
![コンタクトフォームにアクセス](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA14-800x290.png)
ブログのお問い合わせで使用しているフォームを選択する
複数ある場合は、すべてに貼り付けしましょう。
![コンタクトフォームにGoogleのプライバシーポリシーと利用規約を書く](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA15-800x560.png)
フォームの一番下に先ほどコピーしたHTMLを貼り付けて「保存」をクリック
これで完了です。
![プライバシーポリシーと利用規約が表示される](https://sho-chanblog.com/wp-content/uploads/2020/11/reCAPTCHA16-800x334.png)
お問い合わせページにアクセスするとプライバシーポリシーと利用規約が表示されている。
以上、長い設定お疲れ様でした。
コメント