Contact Form 7 (v5.1~)+reCAPTCHA (v3) で画面右下のロゴを消す

reCAPTCHA v3 のロゴが邪魔

お問い合わせフォームのプラグインとして有名な Contact Form 7 が Version 5.1 から reCAPTCHA Version 3 に対応しました。

別の言い方をすると、Contact Form 7 の Version 5.1 から reCAPTCHA Version 2 が使えなくなりました。reCAPTCHA v2 は下図のようなロゴですね。v2 のロゴは、Contact Form 7 の「お問い合わせ」ページの任意の位置に表示することができました。私はこれで満足だったんですが。

新しい Contact Form 7 で reCAPTCHA v3 を使用すると、基本的にはサイトの全ての記事の画面の右下にロゴが強制的に表示されてしまうようです(CSS をいじる等すればある程度修正可能なようですが。なお、reCAPTCHA を適用するページにはロゴを表示することが義務付けられているらしい)。

ちょっと待ってください・・・私のサイトでは、すでに画面の右下には「トップへ戻るボタン」を表示してるんです。

新しいバージョンの Contact Form 7 で reCAPTCHA v3 を使用したら、PC での表示がこうなってしまいました・・・。

被ってます。あの~被ってますよ~~~。
(^_^#) ピキ
reCAPTCHA のロゴが常に「トップへ戻るボタン」の青い円を覆い隠してしまいます。青い円の左端がわずかに見えてるところが一層哀れです。

スマホで見るとこう。

・・・邪魔・・・。
(^_^メ) ピキ

reCAPTCHA v3 のロゴを v2 のように表示するプラグイン

調べてみたんですが、Contact Form 7 の設定を調べても、reCAPTCHA v3 の設定を見ても、このへんを調整するようなオプションが見つかりませんでした。

それで reCAPTCHA v2 に戻すために Contact Form 7 のバージョンを古いものに戻したんですが、WordPress の[プラグイン]のところには Contact Form 7 の新バージョンがあることを示す赤丸の番号が常に表示されて目ざわりです。

更に、Contact Form 7 のより新しいバージョンがリリースされると、その赤丸の番号の値が増えて(たとえば①から②になる)、なぜかインストール済みプラグインの一覧画面にも Contact Form 7 の新しいバージョンが並列でインストールされている(有効にはなってないが)。で、その新しいバージョンの未使用の Contact Form 7 を削除したら、いままで使ってたバージョンの Contact Form 7 も使えなくなってしまいました。

一度は「もう Contact Form 7 やめよ」と思って、仕方なく他の「お問い合わせ」プラグインを色々試したけれど、しっくりくるものが見つからない。

解決策を探してネット検索すると、新しい Contact Form 7+reCAPTCHA v3 を使用する場合に .php や CSS を編集するやり方もあったけれど、自分があまり好きなやり方ではなかった。

疲労感を感じつつネット検索して調べていたら、やっとこの問題を解決するプラグインを発見!

「Invisible reCaptcha for WordPress」というプラグインがまさに求める機能を持ってました。

新しい Contact Form 7+reCAPTCHA v3+このプラグインを使用すると、下図のように(reCAPTCHA v2 のように)「お問い合わせ」フォームの下のみに reCAPTCHA v3 のロゴを表示させることができます。

Invisible reCaptcha for WordPress の設定方法

設定方法ですが、まず「Invisible reCaptcha for WordPress」をインストールして有効にします。

次に、Contact Form 7 の[インティグレーション]に reCAPTCHA の設定をしている場合は、削除しておきます

そして WordPress の[設定]>[Invisible reCaptcha]>[Settings]で

  • [Your Site Key]と[Your Secret Key]に reCAPTCHA v3 の Site Key と Secret Key を設定し、
  • [Language]を Japanese にして、
  • [Badge Position(ロゴの位置)]を Inline(インライン)にしたら、

[変更を保存]をクリックします。

次に WordPress の[設定]>[Invisible reCaptcha]>[Contact Forms]の設定に移動して、[Enable Protection for Contact Form 7(Contact Form 7 の保護を有効にする)]にチェックを入れて[変更を保存]をクリックします。

 

以上です!

購読する
通知を受け取る対象
guest
4 Comments
Newest
Oldest
Inline Feedbacks
View all comments
T2
T2
2020年6月10日 16:43

[Enable Protection for Contact Form 7]にチェックを入れると、フォームメールがエラーで送信できませんが、[Enable Protection for Contact Form 7]のチェックを外すとフォームメールが送信できます。ちなみにRecaptchaのロゴも表示されていません。インテグレーションは削除済みです。

masa
masa
2018年12月25日 10:42

同じく「トップへ戻るボタン」がreCAPTCHAのロゴで隠れてしまい、解決法を調べてもあまりヒットせず困っていたところ、こちらの記事で解決できました。本当に助かりました。ありがとうございました。