reCaptcha(リキャプチャ)をフォーム画面だけに表示する方法

recaptcha(リキャプチャ)のトップイメージ趣味・生活
スポンサーリンク

 

 

こだわり君
こだわり君

こんにちは、「こだわりスタイル」のこだわり君です!

@KodawariStyle

前回は、reCaptcha v3(リキャプチャ)を設定すると全ページにバッジが表示され、邪魔な場合は非表示にする設定をご紹介しましたが、今回は希望のフォームページのみに表示するワードプレスのプラグインの設定方法をご紹介します。

 

前回のご紹介で私は運営する2つのサイトのうち1つはreCaptchaのバッジを非表示に、そしてもう1つのサイトは表示させていました。

せっかくのセキュリティーバッジなので、邪魔ですが非表示にしちゃうのもな〜と考えていましたら、見つけましたプラグイン!こちらがスマートですね。

 

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

Invisible reCAPTCHA for WordPress

コンタクトフォーム7を使用している方は、スパムボットの報告があるそうなのでreCaptcha v3(リキャプチャ)でブロックしたほうがいいですね。

reCaptcha v3(リキャプチャ)についてはこちらに書いてますので是非ご覧ください!

 

 

今回ご紹介するのは「Invisible reCAPTCHA for WordPress」というプラグインを使用します。

前回はコンタクトフォーム7に紐付けてreCaptcha v3(リキャプチャ)を動作させることで、全ページにバッジが表示されていましたが、この「Invisible reCAPTCHA for WordPress」というプラグインを使用することでフォームページのみに表示することができるので、「TOPへ戻る」など他のオブジェクトの邪魔になることがなくなりますので非常にスマートになります。

PCだとTOPページにもこんな感じに表示され、かなり邪魔な感じですね。

recaptcha(リキャプチャ)の表示サンプル1

スマホだとこのバッジのおかげで「TOPへ戻る」ボタンを移動しなければいけません。

recaptcha(リキャプチャ)の表示サンプル2

 

スポンサーリンク

Invisible reCAPTCHA for WordPressの設定

まず、私のようにすでにコンタクトフォーム7と紐付けてしまっている場合

コンタクトフォーム7の設定を削除します

ご自分のダッシュボードの左メニューに「お問い合わせ」→「インテグレーション」→赤枠の「インテグレーションのセットアップ」をクリックします。

recaptcha(リキャプチャ)の設定1

すると下の画面になりますので、以前設定していた「サイトキー」と「シークレットキー」を赤枠のボタンで削除してください。

後ほど「Invisible reCAPTCHA for WordPress」の設定時にこの2つのキーは必要になりますが、

 

recaptcha(リキャプチャ)の設定2

 

google.com/recaptcha/  こちらよりGoogleアカウントでログインすれば2つのキーは表示されますので大丈夫です。(reCAPTCHAタイプをクリックすると下のようになります)

recaptcha(リキャプチャ)の設定4

 

「Invisible reCAPTCHA for WordPress」をインストール

ご自身のダッシュボードのメニューから「プラグイン」→「新規追加」→右上の検索窓に「Invisible reCAPTCHA for WordPress」を入力します。

 

recaptcha(リキャプチャ)の設定3

「今すぐインストール」で完了したら「有効化」をクリックしてください。

「Invisible reCAPTCHA for WordPress」の設定

左メニューの「設定」に「Invisible reCAPTCHA 」が追加されていますので、そちらをクリック(画像が切れてしまってすみません)

recaptcha(リキャプチャ)の設定6

先ほどの「サイトキー」と「シークレットキー」を上の赤枠にコピペします。

言語は「JAPANESE」を選択します。

badge Posisitionは「inline」を選択します。

このプルダウンで位置指定できますが「inline」が一番面倒じゃないですね。

下にCSSも書けるようになってるので、一度デフォルトのままで、表示されて気に入らなければ調整すればいいかと思います。

「Contact Forms」のタブを選択

2番目の項目の「Contact Forms」メニューを選択してください。

recaptcha(リキャプチャ)の設定8

富士山マークの「Contact Form 7」にチェックを入れて「変更を保存」をクリック!

「WordPress」のタブを選択

デフォルトでもいいのですが、一応こちらも説明しておきます。

「Invisible reCAPTCHA 」はコンタクトフォーム7のページ以外にもフォームページを選択できるようになっています。

recaptcha(リキャプチャ)の設定8

・Enable Login Form Protection ログインフォーム
・Enable Registration Form Protection 登録フォーム
・Enable Comments Form Protection コメントフォーム
・Enable Forgot Password Form Protection パスワードを忘れた時に表示されるフォーム

保護したいところにチェックを入れて「変更を保存」をクリックで完成です!(必要ない方はチェック無しのままですね)

表示を確認します

するとこんな風にお問い合わせフォームページの送信ボタンの下に表示されます。

「TOPへ戻る」ボタンの邪魔もなくスマートになりました!

バッジの表示され方などこちらのサイトでご覧になれます。

recaptcha(リキャプチャ)のバッジ表示例

スポンサーリンク

まとめ

非表示にするより「Invisible reCAPTCHA 」のほうがなんかスッキリしました。設定もカンタンですので、コンタクトフォーム7に紐付けてたけど納得いっていなかった方是非試してみてください。

 

今ご契約中のサーバーの扱いが難しくてお困りの初心者の方へオススメするロリポップ!は下のボタンから!
乗り換えを決めたらハイスピードプランが長い目で見て絶対お得です。

しかも今なら、独自ドメインもロリポップレンタルサーバーと契約中は無料です!
3年契約ならハイスピードプランがなんと500/月です。

 

趣味・生活
スポンサーリンク
スポンサーリンク
この記事を書いた人
こだわりスタイル

現役Webデザイナーの、モノにこだわった情報やレビューのブログを開設。趣味やガジェットのこだわり情報を発信していきます。こだわり情報は体験談やファッションなど4つのカテゴリーでご紹介。是非フォローよろしくお願いします。

「こだわりスタイル」をフォローする
こだわり記事をシェアする
スポンサーリンク
スポンサーリンク
こだわりスタイル