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制作

スマホサイトで便利!片方可変のボックスレイアウトの作りかた

こんにちは。丹羽です。スマホサイトでは画面の幅がデバイスによってバラバラです。より少ないCSSコーデ...

2016年10月31日

Web制作

初心者向け解説!内部リンクでサイト構造を強化し、SEO効果UP

先日、GoogleのX(旧Twitter)で内部リンクに関するヒントが投稿されていました。その内容を...

2024年8月8日

Web制作

オリジナアイコンを簡単にWEBフォントにする方法

ここ数年スマホからのアクセスの割合がPCを超えているサイトが多くなっています。そこで、スマホサイトを...

2016年10月19日

Web制作

WordPressでショートコードを使って外部PHPファイルを読み込む方法

WordPressでサイトを構築している方には馴染みのあるショートコード。例えばお問い合わせのプラグ...

2024年7月12日

Web制作

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

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

2017年3月23日

  • カテゴリー

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

    RELATED SITES

    関連サイト

    • SAKAMOTO Blog
    Designed by WEBLIC合同会社