読了目安時間は約 6 分です。
『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 を設定している場合は削除しておきましょう。これが残っていると２重に表示されてしまいます。
- 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です。サイトを確認してみてください。
以上です。
ではまた！
