フリーランス・個人事業主として独立を目指すデザイナー、副業を始めたいデザイナーを応援します! 自立支援に役立つ初心者向けWordPress情報も随時アップします!

reCAPTCHA v3の右下のバッジをContact Form 7に埋め込むプラグイン『Invisible reCaptcha』

読了目安時間は約 5 分です。

『Google reCAPTCHA v3』をContact Form 7に導入すると、全てのページで右下に reCAPTCHAのバッジが表示され、『ページトップに戻るボタン』と被って邪魔してしまいます。

そこで、邪魔にならないようコンタクトフォームに埋め込むプラグイン『Invisible reCaptcha for WordPress』をご紹介します。

このプラグインは、お問合せフォームのあるページにのみ表示させることが可能です。

WordPress初心者でも簡単に導入できますよ!

目次

reCAPTCHAとは?

Webサイトのお問合せフォーム経由で送られるスパムメール対策です。

詳しくはこちらの記事をご覧ください↓

しかし、ちょっとしたデメリットがあります…

バッジが邪魔!

しかしreCAPTCHA v3を導入すると、画面の右下にreCAPTCHA v3のバッジが強制的に表示されてしまいます。右下に『ページトップに戻るボタン』がある場合、被ってしまってボタンが押せなくなってしまいます。しかもスマホでは画面が小さい分バッジの専有面積が大きくなり、テキストを隠してしまって余計に邪魔に見えます。

Contact Form 7で導入すると

さらにフォームの定番『Contact Form 7』でreCAPTCHA v3を設定すると、全ページにreCAPTCHA v3のバッジが表示されてしまいます。

CSSで以下のようにしてバッジをずらすことも可能ですが、

/* reCAPTCHAをずらす */
 .grecaptcha-badge {
 bottom: 〇〇px !important ;
 } 

全ページ表示を変えようとするとPHPファイルの編集が必要となり手間がかかります。

「もっと簡単に、全ページではなくお問合せフォームのあるページにのみ表示したい」を叶えることができるプラグインがありました!

『Invisible reCaptcha for WordPress』です!

プラグイン『Invisible reCaptcha for WordPress』の導入方法

reCAPTCHA v3のサイトキー(Site Key)とシークレットキー(Secret Key)が必要ですが、まだ取得できていない方はこちらの記事をご覧ください↓

事前に、Contact Form 7 の[インティグレーション]に reCAPTCHA を設定している場合は削除しておきましょう。これが残っていると2重に表示されてしまいます。

  • WordPressの管理画面から[プラグイン]> [新規追加]に移動し、『Invisible reCaptcha for WordPress』を検索してインストールし、有効化します。
  • WordPressの管理画面から[設定]>[Invisible reCaptcha]>[Settings]に移動します。
  • [Your Site Key]と[Your Secret Key]に 、取得したreCAPTCHA v3 の サイトキー と シークレットキー を設定します。
  • [Language]を Japanese にして、
  • [Badge Position(ロゴの位置)]を Inline(インライン)にして[変更を保存]をクリックします(Bottom Right(ページ右下)やBottom Left(ページ左下)もお好みでどうぞ)。
  • 続いて[Invisible reCaptcha]>[Contact Forms]の設定に切り替え、[Enable Protection for Contact Form 7(Contact Form 7 の保護を有効にする)]にチェックを入れて[変更を保存]をクリックします。

ほかにも[Invisible reCaptcha]>[WordPress]で

  • Enable Login Form Protection (ログインフォーム)
  • Enable Registration Form Protection(登録フォーム)
  • Enable Comments Form Protection (コメントフォーム)
  • Enable Forgot Password Form Protection( ログイン画面の「パスワードをお忘れですか?」をクリックで表示されるパスワードフォーム)

の保護を有効にすることができます。こちらはお好みでどうぞ。

これでOKです。サイトを確認してみてください。

以上です。

ではまた!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
目次
閉じる