WEBLIC LLC

ブログ

WordPressのContact Form 7にキャプチャを導入する方法

Web制作

2017年1月12日

昨年末あたりからWEBLICのサイトのお問い合わせフォームからちょくちょくスパムが届くようになり困ったので、今回は人間かロボットかを判別するキャプチャを導入することにしました。

まず、今までのお問い合わせフォームはSmartyで作ったフォームでしたが、古いため今回のキャプチャ導入を機にWordPressのContact Form 7に移行しました。

あらかじめContact Form 7にはキャプチャの機能が備わっていたので、すごく簡単に導入することがでます。

WordPress、Contact Form 7以外で準備するものはGoogleのreCAPTCHAを使うためのサイトキーとシークレットキーになります。

https://www.google.com/recaptcha/admin#list
こちらからキーを発行してください。


※GoogleのreCAPTCHAの画面

こちらで、サイトキーとシークレットキーを発行します。まずLabelとDomainsに必要な情報を入力してください。
Labelは任意の文字列で構いません。Domainsはキャプチャを使うドメインを入力しいます。複数ある場合は改行して入力します。(1行に1ドメインとなります。)

入力が完了するとサイトキーとシークレットキーが発行されます。

Google reCAPTCHAでの作業は以上なので、次にWordPressの管理画面に移動します。

Google reCAPTCHAで発行したサイトキーとシークレットキーを「インテグレーション」から登録します。
※画面はすでに登録済みの画面です。

「インテグレーション」で設定を終えたら最後にContact Form 7の設定画面に戻り、キャプチャを表示させたい場所に「reCAPTCHA」のボタンをクリックして挿入します。

上記は実際に実装した画面になります。

このように今回は簡単にキャプチャ機能を実装することができました。

関連記事

Web制作

iOS SafariでCSSのフォントサイズ効かない時に対処する方法

ちゃんとCSSでフォントサイズを指定しているのに、なぜかiOSのSafariでフォントサイズが効かな...

2024年7月19日

Web制作

さくらのレンタルサーバでWordPressのサイトをSSL化でつまずいたところ

今回新規でさくらのレンタルサーバ(スタンダード)+ラピッドの独自SSL(SNI SSL)を使ってWo...

2017年2月13日

Web制作

Dreamweaver CC 2017で自動作成されるcssファイルを作らない方法

エディタをDreamweaver CC 2017に乗り換えて少し気になったことがあります。それはSa...

2017年3月23日

Web制作

WebサイトにおけるUIとUXの違い

現代のデジタル時代において、Webサイトは企業の顔とも言える存在です。そのWebサイトの成功は、優れ...

2024年1月9日

Web制作

WordPressでWebPを導入してページスピードを向上させる方法

ページスピードインサイトのスコアがなかなか上がらず、悩んでいる方へ。表示速度が速くなることは、単にス...

2024年7月16日

  • カテゴリー

  • 本日、 3人が閲覧しました

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社