MARKLEAPS[マークリープス]

TECH BLOG

マークリープス技術ブログ

open

[WordPress] Contact Form 7で作成したフォームに「reCAPTCHA v3」を実装する方法

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ロゴ

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

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

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

 

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

 

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

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

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

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

言語
Japanese を選択します

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

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

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

 

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


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

 

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

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

フォーム送信ボタンの下にreCAPCHAバッジが表示される
 

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

よく読まれている関連記事

関連最新記事