[WordPress] Contact Form 7 で作成したフォームに「reCAPTCHA v2 [チェックボックス]」を実装する方法

MARKLEAPS

2020.03.24

WordPress プラグイン「contactform7」で実装したフォームに、reCAPTCHA v2の「私はロボットではありません」チェックボックスを実装する方法についてご紹介します。

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

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

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

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

・reCAPTCHA タイプ
チャレンジ（v2）
「私はロボットではありません」チェックボックス
にチェックを入れます。

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

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

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

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

再びWordPressダッシュボードから「お問い合わせ」 > 「インテグレーション」に戻り、
「キーを設定する」をクリックします。

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

キーが保存された
キーが設定されました。

Contact Form 7 で作成したフォームを開きます。
フォームにreCAPTCHAを実装
reCAPTCHAを挿入したい位置にカーソルを合わせます。
上部メニューから「reCAPTCHA」をクリックします。

ポップアップが開きます。
idを付加してタグを挿入
後でスタイルを調整しやすいようにidを付加し、「タグを挿入」をクリックします。

reCAPTCHAタグが挿入されたことを確認し、「保存」をクリックします。

header.phpの<head></head>の間に以下を追記します。

<!--Google reCAPTCHA-->
<script src='https://www.google.com/recaptcha/api.js'></script>

1 2	<!--Google reCAPTCHA--> <script src='https://www.google.com/recaptcha/api.js'></script>

フォームを確認
reCAPTCHAが表示・機能しているか確認し完了です！

reCAPCHAが使えなくなっていたら？

Contact Form 7 を更新した為かもしれません。
Contact Form 7 Ver.5.1以降ではreCAPCHA v2 は使えなくなっており、
reCAPCHA v3 でのキーの再取得・設定が必要になります。

こちらの記事でreCAPCHA v3でキーを取得する方法をご紹介していますので
合わせてご覧ください。

WordPress

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