スパム撃退。Contact Form 7にreCAPTCHA v3を導入する方法

お問い合わせページを簡単に作ってくれるContact Form 7ですが、悲しいことにデフォルトだとスパムメールを素通ししてしまいます。

アクセス数が少ない頃は問題ありませんが、伸びてくると毎日のように大量のスパムメールが送られてくるようになるため非常に不便です。

そんなスパムメール、実はreCAPTCHAと呼ばれるものを導入することで防ぐことができちゃいます。

reCAPTCHAの登録方法
Contact Form 7にreCAPTCHA v3 を導入する
1. reCAPTCHAマークが右下にでて気になる！
2. reCAPTCHAマークをお問い合わせページにだけ表示する方法

reCAPTCHAの登録方法

ちなみにreCAPTCHAは簡単に説明すると、送信者が人間かどうかを判断するためのシステムです

reCAPTCHAを導入するにはまず、GoogleのサイトであなたようのreCAPTCHAを登録する必要がありますから、早速やっていきましょう。

STEP1
reCAPTCHAのサイトへ
「GoogleのreCAPTCHA登録サイトへ」アクセスします。
移動したサイトで、右上にある『Admin console』というのをクリックします。
Googleアカウントでのログインが必要です
STEP2
必要な項目を入力
必要な項目を入力orチェックを入れていきます。
- ラベル：あとからわかりやすいように名前をつけます
- reCAPTCHAタイプ：contact form 7は現行verだとv3のみ対応なのでv3にチェック
- ドメイン：reCAPTCHAを使いたいサイトのドメインを入力
- 利用規約：チェックを入れる
必要な項目を入力したら下部にある送信をクリックします。
STEP3
キーをコピペ
サイトキーとシークレットキーをメモ帳などにコピペしておきます。
２つのキーがないとContact Form 7にreCAPTCHAが導入できませんので、忘れず控えておきましょう。

Contact Form 7にreCAPTCHA v3 を導入する

キーが手に入ったら、今度はContact Form7にreCAPTCHAを導入していきます。

（めっちゃ簡単です）

STEP1
【お問い合わせ】→【インテグレーション】を選択
サイドバーからインテグレーションをクリックします。
STEP2
【インテグレーションのセットアップ】→【キーの入力】
reCAPTCHAの欄にあるインテグレーションのセットアップをクリックします。
その後、先程用意したサイトキーとシークレットキーをコピペして貼り付けます。
入力できたら変更を保存で、reCAPTCHAの導入完了です。
注意点としてreCAPTCHA v3は導入直後だとうまくスパムメールを除外してくれない場合があります。しかし時間経過でうまく機能してくれますんで、数日は様子見てみるとよいかと。

reCAPTCHAマークが右下にでて気になる！

導入完了後にサイトを見てみると、全ページの右下にreCAPTCHAのマークが有ることに気づくかもしれません。

こんな感じのがある

実はreCAPTCHAv3以降は、reCAPTCHAを使っているページにこのマークを表示する義務があるんですね。

「サイトの景観が損なわれてヤダ！」

というとき用の対策が実はあります。

reCAPTCHAマークをお問い合わせページにだけ表示する方法

「GoogleのQ&Aページ」に、下記のような文言があります。

I’d like to hide the reCAPTCHA badge. What is allowed?
You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:
This site is protected by reCAPTCHA and the Google
<a href=”https://policies.google.com/privacy”>Privacy Policy</a> and
<a href=”https://policies.google.com/terms”>Terms of Service</a> apply.
Note: if you choose to hide the badge, please use
.grecaptcha-badge { visibility: hidden; }

要約すると

Google「reCAPTCHAを使うページにプライバシーポリシーと利用規約へのリンクを貼るんだったらマークを消してもいいよ」

という話です。

消し方の例としましては

STEP1

お問い合わせページに文言追加

【お問い合わせ】→【コンタクトフォーム】→【コンタクトフォーム1】から、内容を以下のような感じに内容を修正します。

<label> お名前 (必須)
[text* your-name] </label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> 題名
[text your-subject] </label>

<label> メッセージ本文
[textarea your-message] </label>

<p style="font-size:90%;">このサイトはreCAPTCHAとGoogleによって保護されています<a href="https://policies.google.com/privacy">プライバシーポリシー</a>と<a href="https://policies.google.com/terms">利用規約</a>が適用されます。 </p>

[submit "送信"]

このサイトは～の文言を追加して、バッジを消しても利用規約に反しないようにしました。