お問い合わせページを簡単に作ってくれるContact Form 7ですが、悲しいことにデフォルトだとスパムメールを素通ししてしまいます。
アクセス数が少ない頃は問題ありませんが、伸びてくると毎日のように大量のスパムメールが送られてくるようになるため非常に不便です。
そんなスパムメール、実はreCAPTCHAと呼ばれるものを導入することで防ぐことができちゃいます。
reCAPTCHAの登録方法
reCAPTCHAを導入するにはまず、GoogleのサイトであなたようのreCAPTCHAを登録する必要がありますから、早速やっていきましょう。
- STEP1reCAPTCHAのサイトへ
- STEP2必要な項目を入力
必要な項目を入力orチェックを入れていきます。
- ラベル:あとからわかりやすいように名前をつけます
- reCAPTCHAタイプ:contact form 7は現行verだとv3のみ対応なのでv3にチェック
- ドメイン:reCAPTCHAを使いたいサイトのドメインを入力
- 利用規約:チェックを入れる
必要な項目を入力したら下部にある送信をクリックします。
- STEP3キーをコピペ
サイトキーとシークレットキーをメモ帳などにコピペしておきます。
2つのキーがないとContact Form 7にreCAPTCHAが導入できませんので、忘れず控えておきましょう。
Contact Form 7にreCAPTCHA v3 を導入する
キーが手に入ったら、今度はContact Form7にreCAPTCHAを導入していきます。
(めっちゃ簡単です)
- STEP1【お問い合わせ】→【インテグレーション】を選択
サイドバーからインテグレーションをクリックします。
- STEP2【インテグレーションのセットアップ】→【キーの入力】
reCAPTCHAの欄にあるインテグレーションのセットアップをクリックします。
その後、先程用意したサイトキーとシークレットキーをコピペして貼り付けます。
入力できたら変更を保存で、reCAPTCHAの導入完了です。
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; }
要約すると
という話です。
消し方の例としましては
- 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 "送信"]
このサイトは~の文言を追加して、バッジを消しても利用規約に反しないようにしました。
- STEP2CSSを編集する
【外観】→【テーマエディター】からCSSに下記のコードを追加します。
.grecaptcha-badge { visibility: hidden; }
これで右下のバッジを消すことができました。
右下のバッジは大体のサイトにあるページトップへ飛ばすボタンを隠してしまったりするので、reCAPTCHAを導入する際はこの作業も合わせてやっておくのがおすすめ。
コメント