【迷惑メール対策】Contact Form 7にreCAPTCHAを設定してセキュリティアップ

Contact Form 7のスパム対策reCAPTCHA導入方法ワードプレス
カエルくん
カエルくん

海外から謎のメールが届いて、ちょっと怖いんだけど!

しょーちゃん
しょーちゃん

だいたいがボットと呼ばれるロボットが徘徊してメールを送り付けてくるんだ!

お問い合わせフォームに「reCAPTCHA」って機能を追加してスパム対策しておこう!

お問い合わせフォームで人気のプラグイン「コンタクトフォーム7」にGoogleの「reCAPTCHA v3」を設定してスパム対策を強化しておきましょう。

プラグインを入れて設定することもできますが、サイトが重くなるや不具合など考えて、reCAPTCHA公式の導入方法で解説してきます。

先に説明しておきますが、この方法でやるとreCAPTCHAのマークが全ページに表示され、トップに戻るボタンと重なってしまいます。

そこで公式に認められているCSSを使って、reCAPTCHAのマークを非表示にする方法も一緒に解説していきます。

reCAPTCHAとは

reCAPTCHAとは、Googleが提供しているスパム対策機能で、現在は「reCAPTCHA v3」がリリースされています。

この機能により、人間かロボットか判別することができます。

スパムメールの大半が海外からで、どれもbotと呼ばれる自動プログラムによってスパムメールを送り付けています。

reCAPTCHAによって、スパム行為をするロボットを排除することができるため、多くのところで導入されています。

reCAPTCHAの画像
Google reCAPTCHAより

この画像どこかで見ませんか?「私はロボットではありません。」って認証するこれがreCAPTCHAです。

Contact Form 7にreCAPTCHAを簡単に設定する方法

お問い合わせフォームで人気の「Contact Form 7」にGoogleの「reCAPTCHA v3」を簡単に導入することができるので紹介します。

1.Google reCAPTCHAに登録(無料)する。
2.Contact Form 7に設定する

Google reCAPTCHAに登録する

Google reCAPTCHAにアクセスしてください。

reCAPTCHAの登録方法

「管理コンソール(Admin Console)」をクリック

reCAPTCHAの登録方法

1.「ラベル」に任意の名前を入力

2.「reCAPTCHA タイプ」で「reCAPTCHA v3」を選択

3.「ドメイン」に自信のブログドメインを入力

4.「オーナー」Googleにログイン済みなら、メールアドレスが入力済みになっています。
もし入力されていなければメールアドレスを入力する

5.「reCAPTCHA 利用規約に同意」にチェック

6.「送信」をクリック

reCAPTCHAのサイトキーとシークレットキー

この画面に表示されている「サイトキーとシークレットキー」をContact Form 7の設定に使います。

Contact Form 7にキーを登録する

コンタクトフォーム7の設定に入るので、WordPress管理画面へアクセスしてください。

Contact Form 7のインテグレーションにアクセス

「お問い合わせ」→「インテグレーション」をクリック

Contact Form 7のreCAPTCHAインテグレーションのセットアップ

reCAPTCHAの「インテグレーションのセットアップ」をクリック

reCAPTCHAのサイトキー・シークレットキーを登録

reCAPTCHAで登録した各キーを入力します。

1.「サイトキー」reCAPTCHAのサイトキーを入力

2.「シークレットキー」reCAPTCHAのシークレットキーを入力

3.「変更を保存」をクリックで完了!

reCAPTCHAが表示される

ブログにアクセスしてみると「reCAPTCHAのマーク」が表示されています。

エラー表示になっていなければOKです。

この方法で一つ問題があり、全ページで「reCAPTCHAのマーク」が表示され、トップに戻るボタンと重なってしまいます。

reCAPTCHAのマークが重なってしまう

トップに戻るボタンを設定している方は、reCAPTCHAのマークが邪魔になってしまいます。

そこで、GoogleからCSSで非表示にしてもいいと認められているので、解説していきます。

CSSでreCAPTCHAのマークを消す方法

reCAPTCHAのマークを非表示にすることが、Googleから認められています。

reCAPTCHAの公式FAQにマークを消すことを許可するとありますが、代わりにGoogleのプライバシーポリシー利用規約をユーザーの目に留まる位置に表示させることが条件にあります。

GoogleのreCAPTCHA公式FAQ

実際にCSSでreCAPTCHAのマークを消す手順を紹介します。

CSSを貼り付けてreCAPTCHAのマークを非表示

CSSに貼り付けるコードはこちらになります。コピーしてください。

/*reCAPTCHAのマークを非表示にする*/
.grecaptcha-badge { visibility: hidden; }

このコードをCSS子テーマの方に貼り付けます。

reCAPTCHAのマークを非表示にするCSSを貼り付け

「外観」→「テーマエディター」をクリック

子テーマのスタイルシートに先ほどのコードを貼り付けて「ファイルを更新」をクリック

reCAPTCHAのマークが非表示になる

ブログにアクセスして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> が適用されます。
コンタクトフォームにアクセス

「お問い合わせ」→「コンタクトフォーム」をクリック

コンタクトフォームにアクセス

ブログのお問い合わせで使用しているフォームを選択する

複数ある場合は、すべてに貼り付けしましょう。

コンタクトフォームにGoogleのプライバシーポリシーと利用規約を書く

フォームの一番下に先ほどコピーしたHTMLを貼り付けて「保存」をクリック

これで完了です。

プライバシーポリシーと利用規約が表示される

お問い合わせページにアクセスするとプライバシーポリシーと利用規約が表示されている。

以上、長い設定お疲れ様でした。

ワードプレス
スポンサーリンク
シェアしてくれると助かります_(._.)_
フォロワー募集中(*´▽`*)
この記事を書いた人
しょっちゃ

可愛いわが子に親は何ができるのか?
【様々な本から子育てに役立つ情報を研究】
子育て本はもちろん
脳科学や心理学の本も大好きです。

少しでも日々の子育てに役に立てれば嬉しいです。

フォロワー募集中(*´▽`*)
子育てハビット

コメント