ContactForm7の使い方と、画像認証CAPTCHAの設定

サイトを運営していて必要不可欠なのが「お問い合わせ(コンタクト)フォーム」ですね。Contact Form 7は、お問い合わせフォームが簡単に作れるWordPressのプラグインです。
一般的に、Web サイトに問い合わせフォームを設置するには、外部サービスと連携させるか、PHPやCGIで組み込まなければなりません。が、プラグインを使えば専門的な知識がなくとも簡単に設置できます。
メールフォームには、いろいろな部品が用意されていて、テキストボックス、テキストエリア、チェックボックス、ラジオボタンに、CAPTCHAの設置やファイル添付機能の追加など、色々な機能を追加できます。
今回はWordPressサイトでお問い合わせフォームを設置するプラグイン『Contact Form 7』を紹介いたします。また、スパム目的の自動投稿の防止としてgoogleが提供する画像認証reCAPTCHAをメールフォームに設定しますので、その設定の仕方をご紹介します。
注意:
Contact Form7には、確認画面がありませんので、画像認証reCAPTCHAの設定することで、確認画面と同様の効果があり、入力途中でうっかりEnterキーを押下して、そのまま送信されることがなくなります。

スポンサーリンク
投稿本文(h2)

ContactForm7のインストール

プラグインの検索

cf7-install1
cf7-install1

プラグインが表示されましたら、「今すぐインストール」をクリックします。

プラグインのインストール

インストール

インストールが完了しましたら、「有効化」をクリックします。
cf7-install2
cf7-install2

有効化

有効化が完了しましたら、以下の画面が表示されます。
cf7-install3
cf7-install3

ContactForm7の設定

フォームの作成

新規作成の選択

cf7-setting1
cf7-setting1

新規作成画面の表示

cf7-setting2
cf7-setting2

フォームタイトルの入力

「タイトル」に「お問い合わせ」と入力し、「フォーム」タブをクリック
cf7-setting3
cf7-setting3

フォームの編集

フォームは、記事や、固定ページに表示されるフォーム部分を定義します。デフォルトでは、「お名前」「メールアドレス」「題名」「メッセージ本文」が定義されています。
cf7-setting4
cf7-setting4

「メッセージ本文」を「お問い合わせ内容」に変更します。

メールの編集

メールタブをクリックして、メールの編集を行います。メールの編集では、「フォーム」で入力された内容を送信するメールアドレスや送信方法を設定します。
cf7-setting5
cf7-setting5

メールについては、デフォルトのままとします。

メールの保存

「保存」をクリックすると、新規メールフォームが作成されます。
cf7-setting6
cf7-setting6

フォームの表示

ショートコードの取得

メールフォームを利用するには、ショートコードを固定ページ等の記事に記述します。
cf7-setting7
cf7-setting7

ショートコードの貼り付け

固定ページに「お問い合わせ」ページを作成して、ショートコードを記述します。
cf7-setting8
cf7-setting8

CAPTCHAの設定

スパム防止のため、reCAPTCHAを利用できるようにします。

ログイン

https://www.google.com/recaptcha/admin
wp-rc1
wp-rc1

Google reCAPTCHAの表示

画面が表示されましたら、「Get reCAPTCHA」をクリックします。
wp-rc2
wp-rc2

管理画面の表示

管理画面が表示されましたら、「Label」に任意の文字列、「Domains」にブログのドメインを入力して、「Register」をクリックします。
wp-rc3
wp-rc3

サイトキー、シークレットキーの表示

表示されたキーをメモしておきます。
wp-rc4
wp-rc4

ログアウト

wp-rc5
wp-rc5

WordPress管理画面の表示

インテグレーションの選択

wp-rc6
wp-rc6

キーの設定

「キーを設定する」をクリックします。
wp-rc7
wp-rc7

キーの保存

wp-rc8
wp-rc8

コンタクトフォームの編集

①編集画面を開き、「reCAPTCHA」ボタンをクリックします。
wp-rc9
wp-rc9

②CAPTCHAの設定
・テーマやサイズを選択します。
wp-rc10
wp-rc10

・フォームに「recaptcha」を記述します。
wp-rc11
wp-rc11

CAPTCHAの確認

「わたしはロボットではありません」にチェックすると、毎回異なる画面が表示されます。
wp-rc12
wp-rc12

正しく選択すると、メール送信できるようになります。
wp-rc13
wp-rc13
スポンサーリンク
投稿本文(h2)
投稿本文(h2)

フォローする