• HOME
  • BLOG
  • Web制作
  • お問い合わせフォームにスパム対策をする方法(WordPress/Contact Form 7/reCAPTCHA)

お問い合わせフォームにスパム対策をする方法(WordPress/Contact Form 7/reCAPTCHA)

WordPressで制作したWebサイトやブログに設置する「お問い合わせフォーム」。ただ設置するだけだとスパムメールがどんどん届くことが多いので、ぜひ対策をしたいところ。今回は、スパム対策のひとつとして、「reCAPTCHA」を使った方法をご紹介します。

前提

今回は、WordPressプラグイン「Contact Form 7」で設置したお問い合わせフォームへの対策を紹介します。

Contact Form 7でのスパム対策

Contact Form 7で用意してくれている「reCAPTCHA統合モジュール」を使って対策をします。それにより、スパムbotからの不正なフォーム送信を防げます。
Contact Form 7 公式ページの「reCAPTCHA」についてのページはこちら

reCAPTCHAにWordPressサイトを登録

まず、Googleのサービスである「reCAPTCHA」にWordPressサイトを登録します。reCAPTCHAはGoogleのサービスなので、登録にあたってはGoogleアカウントが必要です。Googleにサインインして下記ページにアクセスします。
https://www.google.com/recaptcha/admin/create

このようなページが表示されるので、入力・選択していきます。

  • ラベル
    → どのWebサイトを登録したかが後からわかるような名前をつけます。ドメイン名などがいいでしょう。
  • reCAPTCHA タイプ
    → 現在のバージョンは「reCAPTCHA v3」なのでこちらを選びます。
  • ドメイン
    → 登録するWordPressサイトのドメインを入力します。
  • オーナー
    → ログインしているGoogleアカウントのメールアドレスが表示されているはずです。ちがうメールアドレスを設定しているときは入力します。
  • reCAPTCHA 利用条件に同意する
    → 利用規約をよく読んで同意する場合はチェックを入れます。
  • アラートをオーナーに送信する
    → 設定エラーなどサイトに問題があったときにアラートを受け取る場合はチェックを入れます。

入力・選択が終わったら「送信」ボタンをクリックします。

登録ができると、「reCAPTCHA」のサイトキー・シークレットキーが発行されます。発行されたことを確認します。このページはブラウザ上で開いたままにしておきます。

WordPress管理画面の更新箇所を確認

ブラウザの別タブを開き、WordPress管理画面にログインします。次に、「お問い合わせ」 > 「インテグレーション」を開き、「reCAPTCHA」の「インテグレーションのセットアップ」ボタンをクリックします。

この箇所に、先ほど取得した「reCAPTCHA」のサイトキー・シークレットキーを入力して、「保存」ボタンをクリックします。これで設定完了です。

reCAPTCHAアイコンを非表示にする方法

このようにreCAPTCHAを設定すると、登録したサイトの全ページの右下にreCAPTCHAアイコンが表示されます。

全部のページにこのアイコンが表示されるとちょっと邪魔なので、Google公認の方法で非表示にします。

CSSでアイコンを非表示にする

Google reCAPTCHAの「よくある質問」にある、下記のCSSコードをWordPress内に記載します。

.grecaptcha-badge { visibility: hidden; }

WordPressの管理画面でCSSコードを記載する場所はお使いのテーマなどにもよりますが、一般的には、「外観」 > 「カスタマイズ」を開き、「追加CSS」を開いた箇所に追加します。

これで、ページ上からアイコンが非表示になりました。

お問い合わせフォームの近くに注意書きを入れる

次に、先ほど見たGoogle reCAPTCHAの「よくある質問」にある以下の記載に従い、お問い合わせフォームの近くに注意書きを入れましょう。

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
Privacy Policy and
Terms of Service apply.

Google reCAPTCHA Frequently Asked Questions

日本語だと、こんな感じで入れると良いでしょう。(文中のリンクもそのまま設定します)

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

以上で設定完了です。

スパムメールがたくさん届くと、せっかく本当にお問い合わせのメールをもらっても、見落としてしまう場合があります。簡単に設定できるので、対策しておきましょう。

WEB制作・開発、iPhoneアプリ、DTMなどのTipsやメモを書いています。

関連記事