reCAPTCHA v3のバッジを問い合わせフォームのみ表示させる方法

スポンサーリンク
スポンサーリンク

reCaptcha 問いあわせページのみ表示

ContactForm7でreCAPTCHA v3を設定すると、全てのページにreCAPTCHA のバッジが表示されるので、問い合わせページのみ表示に変更する方法をご紹介します。

ContactForm7 はスパムメールを防止するため、Google の reCAPTCHA を設定することができます。最近はチェックなどの操作が不要な reCAPTCHA v3 にも対応するようになりました。

前回の記事「ContactForm7にreCAPTCHA v3を設定する」でreCAPTCHA v3の設定方法を紹介しましたが、この方法では全てのページに reCAPTCHA のバッジが表示されてしまいます。

問い合わせページのみでreCAPTCHAバッジを表示させるには、プラグイン「Invisible reCaptcha for WordPress」を使ってreCAPTCHA v3 を設定します。

スポンサーリンク

reCAPTCHA のバッジを非表示にするには

ContactForm7 で reCAPTCHA v3 を設定すると、全てのページで reCAPTCHA のバッジが表示されます。右下の隅の方にあるので目立ちませんが、reCAPTCHAで保護された問い合わせフォームやコメントフォームのないページで表示されると、ちょっと気になりますよね。

reCAPTCHA バッヂ

PCより画面サイズが小さいスマホでは、バッジが表示されると結構目立つし、「トップに戻る」ボタンと被りやすい場所なので、関係のないページではバッジを非表示にしたいところです。

reCAPTCHA バッヂ スマホ

コードやCSSをいじって非表示にする方法もありますが、勝手にバッジを消すと規約違反になります。でも、reCAPTCHAで保護されているページ以外で非表示にするのはOKです。

保護されたページ以外でreCAPTCHAを非表示にするなら、プラグイン「Invisible reCaptcha for WordPress」を使うのが一番簡単な方法です。

reCAPTCHA 新規登録の場合は、新たにサイトキーとシークレットキーを取得し、すでに登録済みであれば、ContactForm7 のキーを削除してからプラグインでキーを再登録します。

reCAPTCHA 新規登録の場合

まずはreCAPTCHAに新規登録する場合のサイトキーとシークレットキー取得方法です。

ダッシュボードの「お問い合わせ」→「インテグレーション」から、「インテグレーションのセットアップ」をクリックします。

contactform7 recaptcha v3設定

キーの入力欄右上のURLをクリックして、Google reCAPTCHAに進みます。キーを取得した後にまたWordPressへ戻るので、URLをクリックするときは新しいタブで開くと便利です。

contactform7 reCAPTCHAキー再取得

右上の「Admin console」からreCAPTCHAにログインします。

reCAPTCHAログイン

ここで新しいサイトを登録して、reCAPTCHAのサイトキーとシークレットキーを取得します。

reCAPTCHA 新しいサイトを登録する

ラベル: 設置するサイトの名前等を入力します。
reCAPTCHAタイプ:  reCAPTCHA v3を選択します。
ドメイン: reCAPTCHAを設置するサイトのドメインを入力します。http:// や https:// 、下層のディレクトリ等は入力不要です。

あとは「reCAPTCHA 利用条件に同意する」にチェックを入れて「送信」をクリックします。「アラートをオーナーに送信する」は任意なので、通知が必要であればチェックしてください。

reCAPTCHA v3 新しいサイトを登録する

「サイトキー」と「シークレットキー」をコピーして「設定に移動」をクリックします。この2つのAPIキーを入力すると、ContactForm7でreCAPTHCAが使えるようになります。

reCAPTCHA v3 サイトキーとシークレットキー

もう一度設定に戻って、reCAPTHCA保護対象のページ(問い合わせフォームやコメントフォーム)がAMPページの場合は、「このキーが AMP ページで動作するようにする」にチェックを入れて「保存」してください。

AMPページの項目は、なぜか最初のサイト登録の時には表示されず、登録が済んでからチェックできるようになっています。AMP対応サイトの場合は注意してください。

reCAPTCHA v3 AMPページ動作

スポンサーリンク

Invisible reCaptcha for WordPressの設定

WordPressに戻って、プラグイン「Invisible reCaptcha for WordPress」をインストールします。「プラグインを追加」から検索してインストールしてください。

プラグイン Invisible reCaptcha for WordPress

ダッシュボードの「設定」→「Invisible reCAPTCHA」で、Invisible reCaptcha の設定を行います。先ほどコピーしたサイトキーとシークレットキーを貼り付けてください。

「Language」はAutomatically detect(自動検出)を選択、「Badge Position」は右下でいいでしょう。

Invisible reCaptcha 設定

コメントフォームやログイン画面を保護する場合は、設定の「WordPress」から各項目にチェックを入れるだけで有効になります。

Invisible reCAPTCHA WordPress設定

あとは「Contact Forms」の「Enable Protection for Contact Form 7」にチェックを入れて「変更を保存」すればOKです。

Invisible reCAPTCHA設定

reCAPTCHA のキーを再取得

続いてreCAPTCHAを再設定する場合です。すでに登録済みの場合は、ContactForm7 のサイトキーとシークレットキーを削除してから、プラグインでキーを再登録します。

ダッシュボードの「お問い合わせ」→「インテグレーション」から、reCAPTCHA の「キーを削除」をクリックして、もう一度reCAPTCHAにログインします。

contactform7 reCAPTCHA キーを削除

管理画面右上の歯車マーク「設定」をクリックします。

reCAPTCHA 管理画面

設定済みの reCAPTCHAキーを再度取得します。「reCAPTCHAのキー」をクリックするとキーが表示されるので、サイトキーとシークレットキーをコピーします。

reCAPTCHA キー再取得

あとは同じ手順でプラグインをインストールして、reCAPTCHA v3を設定してください。

スポンサーリンク

reCAPTCHA v3の設定 まとめ

ContactForm7でreCAPTCHA v3を設定すると、全てのページで reCAPTCHA のバッジが表示されてしまいます。

reCAPTCHAバッジの表示 / 非表示の切り替えは、プラグイン「Invisible reCaptcha for WordPress」を使うのが一番簡単です。これを使えば、問い合わせフォームだけバッジを表示させて、他のページは非表示にすることができます。

ContactForm7 reCAPTCHA設定

reCAPTCHA v3 は、メール送信者がチェックを入れたり、画像を選択する等の操作は必要なく、人間かスパムボットかを自動的に判断してくれます。

スパムメールにお困りの方は、ぜひ reCAPTCHA v3 を使ってみてください。

タイトルとURLをコピーしました