Contact Form 7でお問い合わせフォームを作成しよう！

 

1.問い合わせフォームとは

Webサイトを作っていく上で欠かせないものの一つに問い合わせフォームがあります。「商品やサービスに関する問い合わせ」「サイトそのものに関する問い合わせ」「顧客からの意見やクレーム」「求人募集」など様々な場面で、サイト訪問者からの管理者への連絡ツールが必要になってくるからです。以前は、Webでの問い合わせに関してはメールアドレスを記載するといった対応をとっていた企業もありましたが、近年は問い合わせフォームを設置することが主流となってきています。これは、問い合わせ先のメールアドレスを記載するだけでは、サイト運営者側が記載してほしい氏名や連絡先といった情報が入っていないメールが大量に送られてきてしまう可能性があるからです。また、多数のスパムメールが送信される可能性も高まります。

そこで、サイトを訪れたユーザーが「問い合わせや感想・意見等を指定された項目に入力し、管理者宛に送信できる」ようにするための機能として、問い合わせフォームという形式が支持されるようになってきたのです。

 

2.Contact Form 7とは

問い合わせフォーム（メールフォーム）を一から作成する場合には、JavascriptやPHPといったプログラミングの知識が必要になります。しかし、WordPressにはそうした専門知識がなくても、問い合わせフォームが設置できるプラグインが多数登録されています。そんな中で、今回は世界的に人気の高い「Contact Form 7（コンタクトフォーム７）」という問い合わせフォーム作成プラグインを解説します。このプラグインを使えば、初心者の方でも部品を組み立てるような感覚で、比較的簡単にお問い合わせフォームを設置することができます。

富士山の浮世絵がアイコンになっていることからもわかる通り「Contact Form 7」は、三好隆之氏という日本人エンジニアが開発したプラグインです。なので、日本語対応も万全です。その他にも「日付」「チェックボックス」「ラジオボタン」「メニュー」「承諾確認ボックス」などをボタンで簡単にフォームに挿入できる機能、１つのフォームに対して２種類までの自動返信メール設定できる機能、メッセージ常時をカスタマイズできる機能、スパムメール対策プログラムであるGoogle reCAPTCHAとの連帯機能など様々な機能を搭載されており、企業サイトでも十分に活用できるプラグインです。

初心者でも簡単に利用できるので、どのプラグインにすべきか迷ったら「Contact Form 7」をインストールをしてみましょう！

 

3.Contact Form 7による問い合わせフォームの作成

インストール手順

（プラグイン新規追加の検索画面）

（プラグインの枠右上に表示される「今すぐインストール」ボタン）

まず、WordPressのダッシュボードにある左サイドバーから「プラグイン」をクリックして、プラグインの追加から「新規追加」を選択します。

次に、検索欄に「contact form 7」と入力すると、前述のように富士山の浮世絵がアイコンになっているプラグイン「contact form 7」が検索結果に表示されるので、枠右上にある「今すぐインストール」をクリックするとインストールされます。

最後に、インストールが完了すると、同じ場所に「有効化」というボタンが表示されますので、そのボタンをクリックしてプラグインを有効にします。これでインストール作業は完了です。

フォームの設定

（「contact form 7」をインストール後、管理画面左サイドバーに「お問い合わせ」という項目が追加される）

まず、WordPressのダッシュボードにある左サイドバーから「お問い合わせ」をクリックします。「コンタクトフォーム」「新規追加」「インテグレーション」という３つの項目から「新規追加」選択します。

（新規追加する問い合わせフォームの名前を入力する）

次に、コンタクトフォームを追加と表示される下の枠に任意のタイトル（問い合わせフォームを区別するための名前）を入力します。

（タブ「フォーム」の編集欄）

タイトルの下には「フォーム」「メール」「メッセージ」「その他の設定」という４つタブが表示されています。「 フォーム」のタブでは、フォーム項目を選択・編集することができます。問い合わせ項目は、あらかじめ用意されているボタンをクリックするだけで生成しフォーム項目を設定できるので、プログラミングコードの知識がなくても大丈夫です。

項目ボタンには「テキスト」「メールアドレス」「URL」「電話番号」「数値」「日付」「テキストエリア」「ドロップダウンメニュー」「チェックボックス」「ラジオボタン」「承諾確認」「クイズ」「reCAPTCHA」「ファイル」「送信ボタン」があります。このボタンの種類の多さからも、このプラグインがほとんどの問い合わせ形式に対応できることがわかると思います。デフォルトでは、問い合わせ項目は「名前」「メールアドレス」「題名」「メッセージ本文」「送信ボタン」の５つが設定されています。サイト運営に必要な項目を選んで、問い合わせ項目を設定してみましょう。

自動返信メールの設定

次に自動返信メールの設定について説明します。自動返信メールとは、ユーザーからの問い合わせをサイト管理者のメール受信BOXに送る、メールを送信したユーザーへ、送信済みの連絡メールを送るといった機能です。問い合わせが入ると「管理者宛」と「ユーザー宛」の２通の通知メールが自動返信されるように設定できるのが「Contact Form 7」の特徴の一つです。

フォーム作成画面の「管理者宛メール」を設定

（タブ「メール」の編集欄１）

「メール」のタブをクリックすると、 フォーム送信後、自動返信されるメールのフォーマット編集画面になります。まずは「管理者宛メール」の設定手順から見ていきましょう。メールタグの [your-name]、[your-email]、[your-subject]、[your-message] には、フォームで入力された値が入ります。

1. 送信先：

自動送信メールの「宛先メールアドレス」を設定します。使用するメールアドレスは、実際に顧客とやり取りする事になるアドレスを登録することが適当です（「,（カンマ）」区切りで複数のメールアドレスも設定可能です）。

2. 送信元：

自動送信メールの「送信者メールアドレス」を設定します。存在しないメールアドレスでも設定可能ですが、管理者メールアドレスが適当です（タグの部分には、問い合わせを行なったユーザの名前が自動反映されます）。

3. 題名：

自動送信メールの「件名」を設定します。他のメールと区別しやすい件名がお勧めです。

4. 追加ヘッダー：

Cc、Bccを設定します。不要な場合は空白にしておきます（「,（カンマ）」区切りで複数のメールアドレスも設定可能です）。

5. メッセージ本文：

自動送信メールの「本文」を設定します。（タグの部分には、問い合わせを行なったユーザの入力内容が自動反映されます）。

フォーム作成画面の「自動返信メール」を設定

（タブ「メール」の編集欄２）

管理者宛メール以外に、メール送信者宛にも自動返信メールを送信したい場合は、画面下部の「メール（2）を使用」にチェックを入れます。

1. 送信先：

自動返信メールの「宛先メールアドレス」を設定します。メールタグの[your-email]を利用して、問い合わせを行なったユーザのメールアドレスを自動設定しましょう。

2. 送信元：

自動返信メールの「送信者メールアドレス」を設定します。「ユーザーからの返信を受け付けない場合は、存在しないメールアドレスに設定」しておきましょう。

3. 題名：

自動返信メールの「件名」を設定します。「問い合わせが完了した旨」が判る件名がお勧めです。メールタグの[your-subject]に加えて、送信完了しましたといった文言を追加するのも良いかもしれません。

4. メッセージ本文：

自動返信メールの「本文」を設定します。メールタグ[your-message]を使えば、問い合わせを行なったユーザの入力内容が自動反映されます。

メッセージの設定

（タブ「メッセージ」の編集欄）

「メッセージ」のタブでは、メール送信の過程でブラウザ画面に表示される各種メッセージを編集できます。サイトの性質に合わせて言葉遣いを調整することもできます。日本語化されていますので、特にこだわらなければデフォルトの設定をそのまま使っても問題ありません。

その他の設定

（タブ「その他の設定」の編集欄）

「その他の設定」のタブでは、追加設定に必要なコードが編集できます。デモモードや購読者限定モードなど、特定の使い方が必要な人以外は、何も設定せずそのままで構いません。

 

4.Contact Form 7による問い合わせフォームの設置

フォームが生成できたところで、次に任意の固定ページに問い合わせフォームを設置する手順を説明します。

お問い合わせフォーム設置手順

（問い合わせフォームのショートコード）

作成した問い合わせフォームには、それぞれショートコードが作成されます。このショートコードを、任意のページにコピー＆ペーストするだけで、フォームが簡単に設置できるのです。

（任意のページにショートコードをコピー＆ペースト）

ここでは「CONTACT」というタイトルの固定ページを作成し、そのページに問い合わせフォームを設置してみます。ショートコードをコピー＆ペーストした以外の部分は、普通の固定ページを作成するように編集可能です。お問い合わせ項目以外で、何か説明等を加えたい場合は、ページの編集で記入することも可能です。

実際に問い合わせフォームを作成し、固定ページに設置した例を見てみましょう。

（問い合わせフォームの一例：フォーム編集画面）

（問い合わせフォームの一例：実際に表示される問い合わせフォーム）

上記２枚の画像は、作成した問い合わせフォームが、実際の問い合わせページでどのように表示されるかの一例です。こちらの問い合わせフォームは、divタグを使ってボックスデザイン（囲み枠）で囲っています。このように、HTMLを編集してフォームをサイトデザインに合わせたイメージにするといったことも可能です。

 

5.まとめ

「Contact Form 7」は世界中のWebサイトで愛用されています。今回紹介した機能以外にも、ファイル添付や承諾確認ボックスといった高度なパーツが簡単に追加できます。また「ドロップダウンメニュー」「チェックボックス」「ラジオボタン」「クイズ」といったボタンを使えば、問い合わせフォームだけでなくアンケートやクイズを作成するすることもできますので、コミュニケーションツールとしても非常に優秀なプラグインです。使い方次第では、自社サイトで「Contact Form 7」使って求人募集フォームも作成するなど企業運営のコストダウンに貢献してくれるかもしれません。

WordPressでWebサイトを構築する場合はインストール必須のプラグインといっても過言ではない「Contact Form 7」の機能を、今回の記事で理解して使いこなしましょう！