【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の「インテグレーションのセットアップ」ボタン：クリックします

Google reCAPTCHAサイトへアクセス

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

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

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

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

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

Google reCAPTCHAへサイトを登録

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

①ラベル：任意のラベル名を入力します（サイト名など）

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

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

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

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

reCAPTCHAキーの取得

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

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

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

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

Google reCAPTCHAのAMP設定

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

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

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

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

続いて、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：クリックします

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

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

④Language：Japaneseを選択します

⑤Badge Position：Inlineを選択します

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

Contact Formsの保護設定

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

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

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

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

reCaptcha(v3)の動作確認

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

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