WordPress プラグイン「contactform7」で実装したフォームに、reCAPTCHA v3 を実装する方法についてご紹介します。

reCAPTCHA v2 [チェックボックス] を実装する方法についてはContact Form 7 で作成したフォームに「reCAPTCHA v2 [チェックボックス]」を実装する方法でご紹介しています。

Contact Form 7 Ver.5.1以降はv3でないと機能しない

Contact Form 7　Ver.5.1以降は、reCAPTCHA v2 は使えなくなっており、reCAPTCHA v3 での実装が必須となっています。

キーを取得

Googleアカウントにログインした状態で Google reCAPTCHA のサイトへアクセスします。
https://www.google.com/recaptcha/about/
 

「v3 Admin Console」をクリックします。

 
Admin consoleへ移動したら、新しくサイトを追加します。

 

 
・ラベル
任意の名前を入力します。（例：サイト名）

・reCAPTCHA タイプ
スコアベース（v3）にチェックを入れます。

・ドメイン
reCAPTCHAを実装するサイトのドメイン入力します。

・Google Cloud Platform
以前にGoogle Cloud を使用したことがある場合は、以前使用したプロジェクト名、
以前にGoogle Cloud を使用したことがない場合は、自動でプロジェクト名が入ります。

「私は、Google Cloud Platform の利用規約、および適用されるサービスと API の利用規約に同意します。」にチェックを入れて「送信」をクリックします。

 

サイトキーとシ－クレットキーが発行されます。
次の項で使用するので控えておきましょう。

キーを設定

WoprdPress ダッシュボードから「お問い合わせ」 > 「インテグレーション」に進み、「インテグレーションのセットアップ」をクリックします。

 

先ほど控えたサイトキーとシ－クレットキーを入力して
「変更を保存」をクリックします。

 

以上が完了すると、サイトのページの右下に>reCAPCHAバッジが表示されます。

このバッジは、フォームのあるページだけでなく、サイトの全てのページに表示されます。

reCAPCHAバッジをフォームのページにのみ表示したい

・ページトップに戻るボタンやページ内容と重なり邪魔
・フォームのページにのみバッジを表示したい
そのような時は、プラグイン「Invisible reCaptcha」を使うことで、フォームのページにのみreCAPCHAバッジを表示することができます。

 

プラグインをインストール
WoprdPress ダッシュボードよりプラグイン「Invisible reCaptcha」をインストール・有効化します。

 

Invisible reCaptchaの設定
「設定」>「Invisible reCaptcha」と進みます。

「Invisible reCaptcha」の「設定」タブを以下のように設定します。

サイト鍵
サイトキーを貼り付けます

秘密鍵
シークレットキーを貼り付けます

言語
Japanese を選択します

バッジ位置
「インライン」を選択します

（ページ右下、ページ左下、インライン（フォーム ボタン箇所）より選択できます）

「変更を保存」をクリックします

 

「問い合わせフォーム」タブの設定
「問い合わせフォーム」タブに切り替え、以下のように設定します。

「Contact Form 7の保護を有効化」にチェックを入れ、「変更を保存」をクリックします。

 

※プラグイン「Invisible reCaptcha」を使用する場合は、「お問い合わせ」>「インテグレーション」でのreCAPCHAにはキーを設定しないようにしましょう。

これで、全ページの右下に固定表示されていたバッジは表示されなくなり、
フォームの送信ボタンの下部にのみバッジが表示されるようになります。

 

スタイルの調整
フォーム下のバッジは左寄せに配置されているので、
style.cssに以下のように記述すると中央寄せで配置できます。