WEBサイトのお問い合わせフォームから毎日大量に届くスパムメール…
対策のために検索すると必ずといっていいほど目にする”reCAPTCHA”

名前から察するに導入するのが難しそう…と思われる方もいらっしゃるかもしれません。

今回はワードプレスのプラグインContact Form7を使っている方に向けた”reCAPTCHA”の簡単な導入と設定の方法をご紹介します。

【目次】
1.reCAPTCHAとは?
2.reCAPTCHA v3の導入手順
3.実装方法
4.ロゴマークの位置調整
5.ロゴマークの非表示
6.reCAPTCHAが表示されない?
7.まとめ

1.reCAPTCHAとは?

reCAPTCHAとはGoogleが無料で提供している、bot・スパム対策のツールで、悪質なアクセスからWebサイトを守るためのサービスです。
詳しくご説明すると、WEBサイトのメールフォームやブログなどのコメントの入力時に、botによる自動的なものではなく、人間が入力したことを証明させるための技術です。

Webサイトをよく利用する方であれば、一度は目にしたことがあるかもしれません。

WEBサイトに表示されるreCAPTCHAのロゴマーク

「私はロボットではありません」と記載されたチェックボックスや、Webサイトの右に下に表示される「reCAPTCHAで保護されています」こういったものがreCAPTCHAの仕組みの一部になります。

2.reCAPTCHA v3の導入手順

reCAPTCHAを導入するにあたって必要なものは以下の2点!

導入に必要なもの

・contact form7で作成したフォーム
・Googleのアカウント

これらの用意ができたら、まずはreCAPTCHAのサイトにアクセス。

reCAPTCHA公式サイトのWEB画面

画面右上にある「v3 Admin Console」からrecaptchaの登録画面に入ります。

recaptchaの登録画面

ラベルには管理しやすいように分かりやすい名前をつけておきましょう。
(例)サイト名、ドメイン名 など

recaptchaタイプは「recaptcha v3」にチェックを入れてください。

ドメインにはreCAPTCHAを設置したいサイトURLのドメイン部分を入力します。
(例)sample.co.jp/contactのページに設置したい場合は「sample.co.jp」と記入

最後に「利用条件に同意する」にチェックを入れて「送信」をクリックしてください。

recaptchaサイトキーの画面

登録が完了するとサイトキーシークレットキーが表示されますので、こちらをメモしておきましょう。
後ほどこの2つのキーを使用します。

3.実装方法

続いて、contact form7にreCAPTCHAを実装します。

ワードプレスのダッシュボード画面

ワードプレスのダッシュボードからお問い合わせ → インテグレーションを開きます。
画面を開いたらreCAPTCHAのインテグレーションのセットアップをクリック。

reCAPTCHAインテグレーションのセットアップ画面

先ほどメモしたサイトキーシークレットキーをこちらに入力して保存してください。
Webサイトの右下にreCAPTCHAのロゴマークが表示されていたら設定完了です!

4.ロゴマークの位置調整

右下といえば、多くのWebサイトで「トップに戻る」ボタンのアイコンが表示されている場所…

webサイトに表示されたreCAPTCHAのロゴマーク

reCAPTCHAのロゴマークがこういったコンテンツと被ってしまった場合、「.grecaptcha-badge」のbottomの数値をスタイルシートに上書きすることで位置を調整することができます。

reCAPTCHAのロゴマークの位置調整

.grecaptcha-badge { bottom: 65px!important; }

ご自身のサイトに合わせて数値を変更して調整してみてください。

5.ロゴマークの非表示

右下にひっそり表示されているとはいえ、なかなか邪魔な位置にあるこのロゴマーク。
非表示にしたいという方もいらっしゃるかと思います。
そんな時はGoogle公認の方法で非表示にしましょう。

まずはGoogleのQ&Aのページをご覧ください。

GoogleのQ&Aページ画面

フォームのあるページにを記載すれば非表示にすることができる、とのこと。

GoogleのQ&Aページからのコードをコピーし、contact form7の編集画面から追加。
今回は日本語に翻訳したものを挿入しました。

Gcontact form7の編集画面

仕上げにのコードをスタイルシートに上書きすると、ロゴマークの非表示が完了します。

.grecaptcha-badge { visibility: hidden; }

GoogleのQ&Aページ画面

6.reCAPTCHAが表示されない?

サイトキーとシークレットキーに間違いはないはずなのに、なぜかreCAPTCHAのロゴマークが表示されない…

そんな方に試して頂きたいのは、ワードプレスのバージョンアップcontact form7のプラグインの更新です!
バージョンが古いままreCAPTCHAを設定したところ、ロゴマークが表示されないというケースが多々ありました。
一度更新した後、再度reCAPTCHAの設定を行うと無事に表示されることが多いです。

それでも表示されないという方は以下をお試しください。

表示箇所が他の要素と重なっていないか確認をする
reCAPTCHAのロゴマークと「トップに戻る」ボタンの要素が重なっており、reCAPTCHAのロゴマークがボタンの下に潜り込んでいて表示されないケースがあるようです。
.grecaptcha-badgeのz-indexを重なっている要素より大きく設定し、ロゴマークの位置調整を行うことで表示できます。

「wp_footer();」の書き忘れ
自作テーマにありがちですが、フッターに「wp_footer();」を記入するのを忘れると、プラグインが正常に動かないことがあります。こちらも確認してみましょう。

6.まとめ

今回はcontact form7を使用している方に向けたreCAPTCHAの導入手順についてご紹介しました!
簡単に設定することができますので、スパムメールに困っている方にぜひ参考にして頂きたいです。