今回は前回に引き続き、Contact Form 7に関連で、インテグレーションを利用し、reCAPTCHAを設定するお話となっております。
Contact Form 7を利用しているけどreCAPTCHAの設定はしていない方は参考頂ければ幸いです。
Contact Form 7のインテグレーションとは
Contact Form 7のインテグレーションは、このプラグインを使用して作成されたフォームのデータを、別のアプリケーションやサービスに自動的に送信するプロセスを指します。
Contact Form 7のインテグレーションは、プラグインの設定ページで構成できます。一般的に、APIキーなどの認証情報を提供する必要があります。その後、データがどこに送信されるかを設定することができます。
Contact Form 7のインテグレーションは、ビジネスプロセスの自動化に役立ちます。特に、マーケティングやカスタマーサポートの分野で多く使用されます。
また、Contact Form 7は、設定や拡張性が高く、必要に応じて他のプラグインや外部サービスとも連携することができます。たとえば、Google reCAPTCHAやAkismetなどのプラグインを使用して、フォームのセキュリティを強化することができます。
今回はそんなインテグレーションにある「reCAPTCHA」の設置方法をお話致します。
reCAPTCHAの設置
それでは今回はContact Form 7のインテグレーションを利用して、reCAPTCHAを設置してみたいと思います。
reCAPTCHの取得方法に関しましては以前記事にしておりますので、そちらを参照ください。
また、そちらの記事ではプラグインを利用してのreCAPTCHAの設置方法も紹介させて頂いておりますので、合わせてお読みください。
Google reCAPTCHAの設定
Contact Form 7でreCAPTCHAを導入するには、まずGoogle reCAPTCHAサイトにアクセスして、サイトキーとシークレットキーを取得します。
インテグレーションの設定
WordPressの管理画面でContact Form 7の設定を開き、「インテグレーション」をクリックします。
その中にある「reCAPTCHA」設定項目の「インテグレーションのセットアップ」をクリックします。
外部 API とのインテグレーションでGoogle reCAPTCHAサイトで取得したサイトキーとシークレットキーをそれぞれ入力（コピペ）し「変更を保存」をクリックします。
これで、WEBサイトにreCAPTCHAが導入されました。
下記画像の様にサイトの右下あたりに「プライバシー利用規約」のロゴ（バッジ）が表示されていれば問題なく設定されております。
このままでも、もちろん問題ありませんが、このロゴは全ページの画面右下に表示されてしまいます。
右下にページの先頭へ戻るアンカーリンクなどを配置している場合は少し邪魔になってしまうかもしれません。
そんな場合はロゴを非表示にすることも出来ますので、管理しているサイトに合わせて非表示の設定を行ってください。
reCAPTCHAのロゴ（バッジ）を非表示にする方法
Google公式から非表示にする方法などに関してアナウンスされております。ので詳細は省かせていただきますので詳しく知りたい方は公式サイトを御覧ください。
- functions.phpにコードを記述し非表示にする
- プラグインを使用し非表示にする
- Google公式の方法で非表示にする
以前の記事で2.のプラグインを使用する方法は紹介させていただきましたので今回は割愛させていただきます。
1.のfunctions.phpの方法は初心者向きでは無いので、今回は3のGoogle公式の方法で非表示にする方法を紹介させていただきたいと思います。
Google公式の方法で非表示にする
Google公式から非表示にする方法などに関しては下記画像の様に正式にアナウンスされております。、詳細は省かせていただきますので詳しく知りたい方は公式サイトを御覧ください。
This site is protected by reCAPTCHA and the Google
<a href="https://policies.google.com/privacy">Privacy Policy</a> and
<a href="https://policies.google.com/terms">Terms of Service</a> apply.アナウスに記載されているようにロゴ（バッジ）を非表示にするには、お問い合わせフォームの下辺りに文言を追加しましょう。
私のサイトですと英語のままだと分かりにくいかと思い下記の様に日本語に修正。
このサイトは、reCAPTCHA および Google <a href="https://policies.google.com/privacy">プライバシー ポリシー</a>によって保護され、
<a href="https://policies.google.com/terms">利用規約</a>が適用されます。このサイトは、reCAPTCHA および Google プライバシー ポリシーによって保護され、利用規約が適用されます。
この様な感じで表示されるようになっております。
CSSでロゴ（バッジ）を非表示に
ロゴ（バッジ）を非表示にする方法は、公式サイトの記載の通りCSSで対応出来ます。
.grecaptcha-badge { visibility: hidden; }上記ソースをカスタムCSS等に追加すればOKです。
追加後、画面右下からロゴ（バナー）が表示されなくなっているかと思います。
まとめ
今回はContact Form 7に備わっている機能「インテグレーション」を利用し、Google reCAPTCHAを設定してみました。
お問い合わせフォームを利用していて、reCAPTCHAを設定がまだと言う方、最近迷惑メールが多くなってきたと思っている方、reCAPTCHAを「正しく」設定されているかを見直してみてはいかがでしょうか？
「正しく」と記載しましたが、Google reCAPTCHAの、サイトキーとシークレットキーはとても長いです。せっかく取得したのに、正しくコピペ出来ていなければ意味がありませんからご注意ください！
