【WordPress】Contact Form 7のフォームだけにreCAPTCHA(v3)を適用する方法
【WordPress】Contact Form 7のフォームだけにreCAPTCHA(v3)を適用する方法
スポンサーリンク

最新の Contact Form 7(バージョン5.1以降)からはreCAPTCHA(v3)を使用することになっています。

しかし、reCAPTCHA(v3)を適用すると、問い合わせページ以外のページにもreCAPTCHAのバッジが右下に表示されてしまいます。また表示位置が「ページ上へ」ボタンと重なり非常に邪魔です。

この記事では、reCAPTCHA(v3)の導入手順と、Contact Form 7の問い合わせページだけにreCAPTCHA(v3)を適用させるWordPressプラグイン「Invisible reCaptcha for WordPress」の設置方法を初心者向けに分かり易く解説します。

スポンサーリンク

reCAPTCHAインテグレーションのセットアップ

reCAPTCHAインテグレーションのセットアップ
reCAPTCHAインテグレーションのセットアップ画面を開きます。

①左メニューのお問い合わせ>インテグレーション:クリックします

②reCAPTCHAの「インテグレーションのセットアップ」ボタン:クリックします

Google reCAPTCHAサイトへアクセス

Google reCAPTCHAサイトへアクセス
右上のリンクからGoogle reCAPTCHAサイトへアクセスします。

①CAPTCHA「google.com/recaptcha」リンク:クリックします

スポンサーリンク

Google reCAPTCHA管理者コンソールを開く

Google reCAPTCHA管理者コンソールを開く
Google reCAPTCHA公式サイトから「管理者コンソール」を開きます。

①「Admin console」ボタン:クリックします

Google reCAPTCHAへサイトを登録

Google reCAPTCHAへサイトを登録
Google reCAPTCHAへサイトを登録します。

①ラベル:任意のラベル名を入力します(サイト名など)

②reCAPTCHAタイプ:reCAPTCHA v3 にチェックします

③ドメイン:サイトのドメインを入力します(https://などは不要)

④reCAPTCHA利用条件に同意:チェックします

⑤「送信」ボタン:クリックします

reCAPTCHAキーの取得

reCAPTCHAキーの取得
reCAPTCHAキーをメモ帳などにコピーしておきます。

①サイトキー:コピーしてメモ帳などに保存します。

②シークレットキー:コピーしてメモ帳などに保存します。

③「設定に移動」ボタン:クリックします

Google reCAPTCHAのAMP設定

Google reCAPTCHAの設定
問い合わせページがAMPページの場合はこの設定を行います。

④このキーがAMPページで動作するようにする:チェックします

⑤「保存」ボタン:クリックします

以上が、reCAPTCHA v3の導入手順です。

reCAPTCHAバッチを全ページに表示しても良い場合は

全ページにreCAPTCHAのバッチを表示させても良い場合は、reCAPTCHAで取得したキーをContact Form 7のインテグレーションモジュールに貼り付け・保存で終了です。

続いて、reCAPTCHAのバッチをContact Form 7の問い合わせページだけに表示させるためのプラグイン「Invisible reCaptcha for WordPress」の設定手順を解説します。

Invisible reCaptcha for WordPressのインストール

Invisible reCaptcha for WordPressのインストール
Invisible reCaptcha for WordPressをインストールします。

①左メニューのプラグイン>新規追加:クリックします

②キーワード:「Invisible reCaptcha for WordPress」と入力し検索します

③「今すぐインストール」ボタン:Invisible reCaptcha for WordPress が表示されたら「今すぐインストール」をクリックします

Invisible reCaptcha for WordPressの有効化

Invisible reCaptcha for WordPressの有効化
Invisible reCaptcha for WordPressのインストールが完了したらプラグインを有効化します。

①「有効化」ボタン:クリックします

Invisible reCaptcha for WordPressの設定

Invisible reCaptcha for WordPressの設定
Invisible reCaptcha for WordPressの設定を行います。

①左メニューの設定>Invisible reCaptcha:クリックします

②Your Site Key:メモしたサイトキーをペーストします

③Your Secret Key:メモしたシークレットキーをペーストします

④Language:Japaneseを選択します

⑤Badge Position:Inlineを選択します

⑥「変更を保存」ボタン:クリックします

Contact Formsの保護設定

Contact Formsの保護設定
Invisible reCaptchaのContact Forms保護設定を行います。

①Invisible reCaptcha Settingsの左メニュー>Contact Forms:クリックします

②Contact Form 7:チェックします

③「変更を保存」ボタン:クリックします

reCaptcha(v3)の動作確認

reCaptcha(v3)の動作確認
問い合わせフォームだけにreCaptchaバッチが表示されていることを確認して下さい。

以上、【WordPress】Contact Form 7のフォームだけにreCAPTCHA(v3)を適用する方法でした。

スポンサーリンク
おすすめの記事