グーグルのreCAPTCHA v3をお問い合わせフォームにだけ設置する
以前、ウェブサイト向けのグーグルreCAPTCHAの設置方法を紹介しました
今回は、ワードプレス向けです
ワードプレスのお問い合わせフォーム(コンタクトフォーム7)にだけグーグルreCAPTCHAを設置する方法になります
reCAPTCHA v3の全ページに表示されてしまう問題
reCAPTCHA v3は普通にワードプレスの管理画面から設置すると、ウェブサイトの全ページにreCAPTCHAマークが表示されてしまいます
reCAPTCHAマークとはこれのこと

このプライバシーうんちゃらかんチャラというマークが、ウェブサイトの全ページに表示されるのでうざいことこの上ない
しかも位置的に、ワードプレスの「上へスクロールする」ボタンと被ります
「お問い合わせフォームにだけ表示されてくれれば良いのに・・・」
という人は意外と多いんじゃないでしょうか
グーグルのreCAPTCHAには、特定のページにだけ表示するというオプションはないのでプラグインで解決します
(なお、このプラグインを使用するとreCAPTCHAの表示される位置もカスタマイズできるので、「上へ行くボタン」と被らなくなるおまけ付きです)
Invisible reCaptcha for WordPress

今回は、この「Invisible reCaptcha for WordPress」というプラグインを使用します
設定方法
1.キーの取得

グーグルのreCAPTCHA画面へログインします
「Admin console」ボタンを押して、自分のウェブサイトの情報を登録しましょう

無事完了すると、このようなキーを取得できる画面へと遷移するかと思います
ここで取得できるサイトキーとシークレットキーをあとで使います
2.プラグインのインストール

先ほど紹介したプラグインをインストールします
ワードプレスの管理画面から「プラグイン」->「新規追加」と進みます
プラグインの検索欄に「Invisible reCaptcha for WordPress」と入力してプラグインをインストールしましょう
(もちろん有効化もね)
3.プラグインの設定
インストールと有効化が完了したら、設定画面へ進みます

管理画面の「設定」->「Invisible reCaptcha」へ進みます
reCaptchaの設定

「Settings」タブを選択します
Yout Site KeyとYour Secret Keyには先ほどの1で取得したキーをそれぞれ入力します
Languageは「Japanese」を
Badge Positionは「Inline」を選択します
Badge Positionとは、reCAPTCHAマークを表示する位置のことです
デフォルトの「Bottom right」で、v3の標準的な位置になります
今回はワードプレスの「上へボタン」と被らせたくないので、インラインを選択します
表示するページの選択

次に「Contact Forms」タブを選択して、表示するページを選択します
僕の場合はContact Form7のページだけに表示したいので、「Enable Protection for Contact Form 7」にチェックを入れます
これでコンタクトフォームで設定したお問い合わせ画面だけにreCAPTCHAが表示されるようになります
実際の表示

設定画面から「Inline」を選択してるので、お問い合わせフォームの送信ボタンの下に表示されます
これでお問い合わせフォームにだけ表示されるようになり、かつ表示位置もいい感じになりました♩
めでたし めでたし
ディスカッション
コメント一覧
まだ、コメントがありません
よくLoadingされてるDocs
新たにPostされたDocs
: ウェブサービス
メルカリやラクマの商品がいつ出品されたのかを調べる裏技
メルカリやラクマなどで商品を探してると、ときどき、 「この商品はいつ出品されたも ...: 仕事環境
15年前のエアコンに洗浄スプレーしたら想像以上にキレイになった
うちのエアコンは新品で購入してからすでに15年が経過しています にもかかわらず、 ...: Laravel
一定時間で消えるフラッシュメッセージを簡単に実装[Laravel8]
以前、手軽にフラッシュメッセージが実装できるnotieを紹介しました 今回は、そ ...: Laravel
ランダムな文字列やユニークなIDをLaravelで生成
random use Illuminate\Support\Str; // 引数 ...: スマホ
4,837円あげるって言うからOCNモバイルOneにLinksmateから乗り換えたんですよ
これまでは僕はスマホの通信会社に、MVNOのLinksmateを使ってきました ...HashMap
created_by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
Utilities