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

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

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

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

おと

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

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

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

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

captchav3の例

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

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

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

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

今回、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を導入するには、事前に「サイトキー」と「シークレットキー」の２つのキーを入手しておく必要があります。

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

Invisible reCaptchaでのreCAPTCHA v3の設定方法

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

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

STEP

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

STEP

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

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

STEP

ダッシュボードメニューの設定–Invisible reCaptchaをクリックします。

STEP

事前に取得したreCAPTCAキーをそれぞれ入力します。
言語については、自動検出またはjapaneseを選択し、reCAPTCAアイコンを表示させたい場所を選んで変更を保存をクリックします。

CSSでreCAPTCAアイコンを編集したい場合は、バッジ位置を「インライン」にしておく必要があります。

STEP

Invisible reCaptchaの設定画面の、WordPressをクリックし、reCAPTCAを表示させたいフォームを選択して変更を保存をクリックします。

ここでは、問い合わせフォーム以外の設定をしています。
問い合わせフォームについては次のステップで設定します。

STEP

続けて、問い合わせフォームをクリックし、の「Contact Form 7保護を有効化」にチェックを入れ、変更を保存をクリックします。

STEP

対象ブログの問い合わせフォーム設置ページを開き、指定した場所にreCAPTCAアイコンが表示されていることを確認します。

STEP

問い合わせフォームからテストメールが送信できるか確認し、正しく受信できていれば完了です。

まとめ

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

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

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

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

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

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