Invisible reCaptchaを使ってContact form7にreCAPTCHA v3を表示させる方法

Invisible reCaptcha for WordPress

本サイトにはPRが含まれています。

Contact form7の問い合わせフォームを利用されているブログは多いと思います。

しかし、迷惑メールを受信することも多く、簡単にスパムボット対策できないかと検討されている方もいらっしゃるかと思います。

ここでは、プラグイン「Invisible reCaptcha」を使って、Googleが提供している「reCAPTCHA v3」をContact form7で表示する方法についてお伝えしていきます。

おと
reCAPTCHA v3設置で迷惑メールを減らすことができました。

目次

プラグイン「Invisible reCaptcha」でできること

Invisible reCaptcha for WordPress
Invisible reCaptcha for WordPress」は、フォーム内にGoogleが提供するreCAPTCHA v3を導入するためのプラグインです。

reCAPTCHA v3を導入することで、「スクレイピング」や「いたずら投稿」などからブログを守ってくれます。

captchav3の例

captchav3の例

簡単に言うと、あなたのブログのフォームがあるページに、上のようなマークが表示されて、それがスパムボットから守ってくれるということになります。

多くのフォームに設置できる

Invisible reCaptchaは、Wordpressで使用する多くのフォームに対応しています。

Invisible reCaptchaが対応しているフォーム
  • WordPress本体の各種フォーム
  • WooCommerceの各種フォーム
  • UltraCommunityのログイン・登録フォーム
  • BuddyPressの登録フォーム
  • 問い合わせフォームプラグイン

WooCommerceやUltraCommunity、BuddyPressはECサイトやSNSの大型プラグインですから、今回はWordpress固有のものや問い合わせフォームについてお伝えしていきます。

WordPress単体で対応しているフォーム
  • ログインフォーム
  • 登録フォーム
  • コメントフォーム
  • パスワード再発行フォーム
  • Contact Form 7のメール送信フォーム
  • Gravity Formsのメール送信フォーム

今回、Contact Form 7で作成したメール送信フォームでの使用方法についてお伝えしますが、他にも設定画面からチェックを入れるだけでreCAPTCHA v3を設置することができます。

reCAPTCHA v3ロゴの表示場所を選択できる

私が、reCAPTCHA v3導入にInvisible reCaptchaを選んだ大きな理由に、reCAPTCHA v3アイコンの設置場所を選択できるという点があります。

多くのreCAPTCHA v3導入プラグインでは、アイコンの表示場所が右下になっているものが多いです。

しかし、使用しているWordpressテーマでは右下に、ページトップへ戻るボタンが表示されています。

そのため、ページトップへ戻るボタンとreCAPTCHA v3アイコンが重なってしまい、見た目でもユーザービリティでも悪くなってしまいます。

しかし、Invisible reCaptchaでは、reCAPTCHA v3アイコンの位置を「右下」または「左下」から選択できるようになっています。

さらに、CSSでアイコンをカスタマイズすることもできますので、カスタマイズ上級者の方にとっても非常に使いやすいプラグインだと思います。

Contact form7に自動で設置できる

WordPressテーマの中には、簡易な問い合わせフォームを実装しているものもありますが、機能に満足できずにContact form7をインストールしている方も多いと思います。

私自身も、有料テーマであるTHE THORで運営しているブログがありますが、テーマに実装されている問い合わせフォームを使用していたら、迷惑メールが1日に何通も届くという状況です。

Contact form7単独の機能でも、迷惑メールを減らせる機能があるので、おすすめのプラグインです。

さらに、今記事で紹介している「Invisible reCaptcha」は、Contact form7で作成された問い合わせフォームに自動でreCAPTCHA v3を設置してくれるところが優れています。

おと
他の同様のプラグインだと、Contact form7のフォームに別途ショートコードが必要というものもありますが、Invisible reCaptchaでは不要です。

reCAPTCHA v3キーの入手方法

reCAPTCHA v3を導入するには、事前に「サイトキー」と「シークレットキー」の2つのキーを入手しておく必要があります。

すでに他サイトでreCAPTCHA v3を使用している場合は、今回対象となるドメインを登録しておく必要があります。

STEP

ブラウザから「Google reCAPTCHA」へアクセスし、「v3 Admin Console」をクリックします。

recaptchaログイン画面

STEP

ラベルと使用するドメインを入力し、使用するreCAPTCHAに「v3」を選択します。

reCAPTCA v3キー取得1
ラベルとは、プロファイル名のようなものであり、ひとつのラベルで複数のドメインを登録することができます。

「ブログ用v3」などわかりやすい名前でOKです。
後から変更することもできます。

STEP

「reCAPTCHA 利用条件に同意する」にチェックを入れ、送信をクリックします。

reCAPTCAキー取得2

STEP

v3 Admin Consoleに戻り、右上のをクリックします。

reCAPTCA v3キー取得2

STEP

「reCAPTCAのキー」をクリックして、キーを確認します。

reCAPTCAv3キー取得4
2つとも、後ほどInvisible reCaptchaの設定画面に入力しますので、画面は表示したままにしておいてください。

Invisible reCaptchaでのreCAPTCHA v3の設定方法

Invisible reCaptcha for WordPress
Wordpressに戻り、「Invisible reCaptcha for WordPress」をインストールして有効化してください。

インストール方法は、一般的なプラグインと同様ですので、ここではインストール方法については省略します。

STEP

Contact form7側でreCAPTCAキーが設定されていないことを確認します。
お問い合わせインテグレーションをクリックし、続けてインテグレーションのセットアップをクリックします。

Contact form7キー確認

STEP
reCAPTCAキーが入力されていないことを確認します。入力されている場合は、キーを削除してください。
Contact form7キー削除

Contact form7側でreCAPTCAキーが設定されていると正常に動作しません。

STEP
ダッシュボードメニューの設定Invisible reCaptchaをクリックします。
STEP
事前に取得したreCAPTCAキーをそれぞれ入力します。
言語については、自動検出またはjapaneseを選択し、reCAPTCAアイコンを表示させたい場所を選んで変更を保存をクリックします。
Invisible reCaptcha設定画面

CSSでreCAPTCAアイコンを編集したい場合は、バッジ位置を「インライン」にしておく必要があります。
STEP
Invisible reCaptchaの設定画面の、WordPressをクリックし、reCAPTCAを表示させたいフォームを選択して変更を保存をクリックします。
Invisible reCaptcha設定画面2

ここでは、問い合わせフォーム以外の設定をしています。
問い合わせフォームについては次のステップで設定します。
STEP
続けて、問い合わせフォームをクリックし、の「Contact Form 7保護を有効化」にチェックを入れ、変更を保存をクリックします。
Invisible reCaptcha設定画面3

STEP
対象ブログの問い合わせフォーム設置ページを開き、指定した場所にreCAPTCAアイコンが表示されていることを確認します。
Invisible reCaptcha設定確認
STEP
問い合わせフォームからテストメールが送信できるか確認し、正しく受信できていれば完了です。

まとめ

Contact form7の問い合わせメールフォームにreCAPTCHA v3を設置するため、Invisible reCaptchaというプラグインを使う場合の設定方法についてお伝えしました。

reCAPTCHA v3は現在のところ無料で提供されているreCAPTCHAでは最新のタイプです。

特徴としてAIでユーザー動作を判断してスパム判定を行っているため、精度については改善の余地があるかもしれません。

しかし、Contact form7の問い合わせフォームをそのまま使っているよりもずっと迷惑メールを減らすことができるはずです。

さらに強固にスパムボット対策をしたいという方は、Contact form7のフォーム内にチェックボックスを設けてみてはいかがでしょうか。

今回のreCAPTCHA v3との併用も可能です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次