言葉の使い方を中心にブログ運営・フリーランスに関することなど、ライティングの仕事に関わる情報を広く紹介するブログです。

Kotoログ

WordPressプラグイン

「reCAPTCHA」の画像認証をContact Form7で設置した問い合わせフォームに追加する方法

投稿日:2017年1月19日 更新日:

<この記事を読むのに必要な時間は約 6 分です>

今回の記事では、Contact Form7で設置した問い合わせフォームに「reCAPTCHA」による画像認証を設置する方法を紹介します。

問合せフォームにreCAPTCHAの画像認証を付ける方法

プラグイン「Contact Form7」を使用してブログに問い合わせフォームを設置している場合には、「reCAPTCHA」の画像認証を用いたスパム対策を施すことが可能です。

「reCAPTCHA」はGoogleが無料で提供している画像認証サービスで、Googleアカウントを取得していれば簡単に導入することができます。

 

問い合わせフォームに画像認証を設置するまでの手順

それでは、ここから問い合わせフォームにreCAPTCHAの画像認証を設置する手順を紹介していきます。

 

reCAPTCHAの利用登録

まず問い合わせフォームに画像認証を付けるために、以下の流れでreCAPTCHAへのサイト登録を行います。

WordPress管理画面「お問い合わせ」⇒「インテグレーション」をクリックします。

WordPress管理画面からContact form7のインテグレーションを表示する時の操作

 

次に「他のサービスとのインテグレーション」という画面になったら、「google.com/recaptcha」というリンク部分をクリックします。(リンク先は元の画面とは別のタブで開くようにしておくと便利です)

Contact form7「他のサービスとのインテグレーション」画面

すると、以下のように「Google reCAPTCHA」の画面が開くので、その中の「Get reCAPTCHA」というボタンをクリックします。

GooglereCAPTCHAのサイトトップページ

次に、もしGoogleアカウントにログインしていなければログイン画面が表示されます。通常通りログインして以下の画面に進みます。

もしくは、すでにログイン済みの場合には以下のような画面が表示されます。

reCAPTCHAの登録画面

この画面の「Label」「Domains」に、ブログ名などの任意の名前とブログのドメイン名をそれぞれ入力し「Register」をクリックします。

ここで登録は完了となりますが、次の画面に表示される「Site key」と「Secret Key」をこの後Contact Form7との連携のために使用するため、コピーするなどして分かるようにしておきます。

reCAPTCHAのサイトキーとシークレットキー

 

Contact form7とreCAPTCHAの連携

次に、Contact Form7でreCAPTCHAを設置するために、サイトキーとシークレットキーを登録していきます。

再び管理画面の「お問い合わせ」⇒「インテグレーション」画面に戻り、「キーを設定する」をクリックします。

以下の画面が表示されたら、reCAPTCHAのサイトキーとシークレットキーを入力し「保存」をクリックします。

Contact form7でreCAPTCHAのサイトキーやシークレットキーを設定する時の画面表示

 

問い合わせフォームに画像認証を追加する

最後に、reCAPTCHAを問い合わせフォームに追加するための設定を行います。

既存の問い合わせフォームに画像認証を追加する場合には、管理画面「お問い合わせ」⇒「コンタクトフォーム」をクリックし、設置したいフォームの編集画面を表示します。

(新しくフォームを用意する場合には「お問い合わせ」⇒「新規追加」からフォームをクリックします。ただしそこからの詳細な操作はここでは省略します)

編集画面を表示したら、フォーム中の画像認証を設置したい位置にカーソルを置き、「reCAPTCHA」というボタンをクリックします。

Contact form7「コンタクトフォームの設定」画面

すると以下のような画面が表示されるので、ウィジェットのカラーテーマとサイズを選択し「タグを挿入」をクリックします。

Contact form7の問い合わせフォームにreCAPTCHAを設置する時の設定画面

そうするとプレースホルダーがフォームの中に追加されるので、必要に応じて<p>タグを追記するなどして「保存」をクリックします。

Contact form7の問い合わせフォームにreCAPTCHAを設置する時の設定

そして、必要であればこのフォームのショートコードを設置する投稿もしくは固定ページに記載して設定が完了です。

 

問い合わせフォームを確認する

上記の手順が完了したら、お問い合わせページを開き表示を確認します。

すると以下のような表示が追加されています。

問い合わせフォームにreCAPTCHAを設置した時の表示

 

この状態になっていれば、問い合わせをする際に「私はロボットではありません」にチェックを入れ、状況に応じて画像認証を通過しなければメッセージの送信ができない状態となります。

もしチェックを入れずに「送信」ボタンをクリックすると、以下のようにエラーが表示されそれ以上進めなくなります。問い合わせフォームにreCAPTCHAを設置し、チェックせずにメッセージを送信しようとした時に表示されるエラーメッセージ

 

まとめ

Google reCAPTCHAは、上記の流れで個人のブログにも簡単に導入することができます。問い合わせフォームからスパムメールが届くなどの場合には活用してみてはいかがでしょうか。

-WordPressプラグイン

Copyright© Kotoログ , 2019 All Rights Reserved.