お問い合わせフォームのスパム対策で利用する「Google reCAPTCHA V3」の使い方

お問い合わせフォームを公開していると、海外を中心にスパムメールが多数届く状況になることがあります。日本語で手作業で入力していると思われる営業メールはなかなか防げませんが、海外からのスパムメールを防ぐ方法の一つである reCAPTCHA の設定方法についてご紹介します。

Google reCAPTCHA のキーを発行するまで

各種フォームサービスに設定するためのreCAPTCHA V3 のキーの発行までの手順を紹介します。

まずは、Googleアカウントが必要になるので登録します。登録後、もしくは既に無料／有料のGoogleアカウントを取得している場合は、ログインした状態で下記のアドレスにアクセスください。

https://www.google.com/recaptcha/admin/create

以下の情報を入力してください。

ラベル：識別するためのテキスト
reCAPTCHAタイプ：v3
ドメイン：設定したいホームページのドメイン（https:// は不要です）
Google Cloud Pratform：任意の名称を設定（デフォルト値でもOKです）

「送信」を押すと、サイトキーとシークレットキーが発行されます。Web制作会社にキーの発行を依頼されている場合は、こちらを伝えることで作業完了です。

WordPress の問い合わせフォームでreCAPTCHAを設定する

WordPress の問い合わせフォームは、基本的にはプラグインを使用して実現しているケースが大半だと思います。特に定番のフォーム作成プラグインについて、reCAPTCHAの設定方法を紹介します。

WordPressプラグイン「Contact Form 7」のreCAPTCHAの設定方法

Contact Form 7を利用していると、サイドメニューに「お問い合わせ」というメニューが追加されています。メニューにマウスを当てると、インテグレーションのメニューが表示されるので選択しましょう。

インテグレーションのメニューを開くと、３番目のセクションにreCAPTCHAを設定する箇所があります。サイトキーとシークレットキーを設定して保存すると、添付図のように有効化されている、と表示されます。

reCAPTCHAのロゴを非表示にしたいと思ったら

reCAPTCHAを有効化すると、サイトの右下にreCAPTCHAアイコンが常に表示されてしまいます。問い合わせフォームがあるページだけでなく、トップページを含むサイト上の該当WordPressページ全体で表示されてしまうので、デザイン性を損ねたり、右下にレイアウトしている「トップにスクロールするボタン」と場所が重なってしまってユーザビリティを損ねるケースが生じます。

reCAPTCHAのロゴを非表示にしたいと考えたところ、Googleの公式から以下のアナウンスが公開されていました。

reCAPTCHA Enterprise バッジを非表示にしたいのですが、どうすればよいですか？

ユーザーフローに reCAPTCHA ブランドを目に見える形で表示している場合に限り、バッジを非表示にできます。次のテキストを含めてください。

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.

次に例を示します。

注: バッジを非表示にする場合は、

.grecaptcha-badge { visibility: hidden; }

を使用してください。

Google 「よくある質問 | reCAPTCHA」より引用

上記の記述から、問い合わせフォームに以下の内容を記述すればCSSで非表示設定をしてもいいとされています。以下は直訳した日本語文章例です。

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

これで、reCAPTCHAロゴ問題を解消することができます。