Contact Form 7ってなに？
問合せフォームはHTMLだけでも作成は可能ですが、HTMLコードを確認するとメールアドレスがすぐわかってしまいます。
そのようなことにならないように、基本的にはPHPやCGIで作成するのですが、今日明日から学んですぐできるものではありません。
「Contact Form 7」は簡単に問い合せフォームや自動返信機能を付けることができるWordPressのプラグインです。
ただ、直感的にわかるものではないので、使い方やカスタマイズの方法を解説していきます。
Contact Form 7の導入方法（インストール）
①プラグイン＞新規追加をクリックして、右上の検索バーに”Contact Form 7”と入力・検索すると表示されますので、「今すぐインストール」をクリック。
②”有効化”をクリックして、インストール完了です。
Contact Form 7の基本的な利用方法
問い合わせフォームの作成
管理画面の外観の上に”お問い合わせ”という項目が増えてるので、そこをクリックして、「新規追加」をクリックすると上記の画面が開きます。
初期の状態は、”お名前”・”メールアドレス”・”題名”・”メッセージ本文”の４つのみで構成されています。
このままでも十分な方もいるかと思いますが、基本的にはここで必要な項目をたしたながらフォームを作っていきます。
作成できるフォームは作成フォームの上にあり、それぞれ必要なフォームが作成できます。
| テキスト | 一般的な名前や住所など、文字・数字どちらでも入力が可能ですが、適当に入力もできてしまいます。 |
| メールアドレス | メールアドレスだけのフォームです。活用例：希望連絡先、メルマガ登録など。 |
| URL | ホームページやブログのサイトURLを入力するフォームです。相互リンクなどには便利かもしれません。 |
| 電話番号 | 電話番号だけのフォームです。活用例：希望連絡先、確認用連絡先など。 |
| 数値 | 数値のみ入力できます。活用例：注文個数やその他数字のみで構成される要素。 |
| 日付 | 日付のみ入力できます。選択可能年月日の範囲指定もできます。活用例：希望発送日、連絡希望日など。 |
| テキストエリア | メール本文など長文での利用が必要なときに利用できます。 |
| ドロップダウン | 選択肢が多くある場合に主に利用できます。1フレームに1つのみの選択です。活用例：商品選択、都道府県、問い合わせ内容、性別など |
| チェックボックス | 選択肢が複数あり、複数選択可能な場合に利用できます。活用例：商品選択、アンケート、問い合わせ内容など。 |
| ラジオボタン | ドロップダウンほど多くない選択肢で１フレームに１つのみの選択が可能です。活用例：商品選択、問い合わせ内容選択、アンケートなど |
| 承認確認 | 同意用のチェックボックスです。チェックボックスにチェックが入ってないとフォームを送信することはできません。活用例：利用規約同意など |
| クイズ | 問いと答えを設定できるボックスです。問いに対して答えを入力しないと送信できないようにすると、CAPTCHA の代わりに利用ができます。 |
| ファイル | ファイルを添付できるフォームボックスです。身分証や相見積比較するときなどのＰＤＦを添付してほしいときに活用できます。 |
| 送信ボタン | これがないと送信できませんので、つくりかえた時も必ず付けるようにしてください。 |
作成したいボタンをクリックすると上記の画面が表示されます。
① 必須項目にするかどうかの選択です。
チェックを入れると入れた項目は、入力や選択をしないと送信ができないようになります。
メールを送ってもらう情報で絶対に必要な項目にはここにチェックを入れてください。
ただ、住所入力を分ける場合、建物名などにチェックをいれると戸建ての人は送信できなくなってしまうので、気を付けてください。また、全てを必須項目にすると面倒で敬遠されがちになるので、必須にするしないはよく考えて選択してください。
② 任意の名前を決めます。
半角英数のみの利用が可能で、返信・確認メールなどで利用するので、自分がわかりやすい名前を付けてください。
③ デフォルト値はテキストなどに最初から表示させるものです。
プレースフォルダーにするしないの選択があります。
・プレースフォルダーにする（チェックをいれる）・・・テキストは入力見本表示になるので、テキストが入力されている状態にはなりません。テキストバーをクリックすると文字は消えます。（表示文字はグレーになります。）
④ ボックス１つ１つのidタブでid名を設定できます。（idタブの為同じ名前は設定できません。）
⑤ ボックス１つ１つのclassタブでclass名を設定できます。
必要な項目を作成して、記入してほしい順に並べていけば基本的な入力フォームは完成です。
受信メール内容の設定
「Contact form 7」から送信された情報を受信するための設定が必要になります。
その設定をするために”メール”タグをクリックするのですが、クリックすると以下の画面が出てきます。
フォームはテキストと作成したショートコードが利用できます。
赤枠で囲まれているのが、現在利用しているショートコードなので、ショートコードを張り付けるとその項目に入力された内容が反映されます。
① 送信先：自分が受信したいメールアドレスに変更してください。
② 送信元：ここはワードプレスの登録メールが設定されますので変更しない方がいいと思われます。
③ 題名：受信した時にわかりやすいタイトルに変更してください。例：●●●●（サイト名）問合せメール[名前タグ]（赤枠のタグも利用できますので、名前のタグなどを入れても分かりやすいです。）
■追加ヘッダー：送信先とは別に送信するメールアドレスなどを記載します。お客様向けの確認メールを兼用する場合はメールアドレスのショートコードをいてれおくとお客様のメールにも同じメールが送信されますが、私個人は別で自動返信メールを作成しているので、ここはブランクにしています。
■メッセージ本文：送られてくるメールの本文ですが、テキストやショートコード、HTMLタグの利用が可能です。
お客様向けの確認メールにする場合はそれなりのあいさつ文などを入力してください。
前の画像の赤枠の場所に今回利用しているショートコードが全て表示されていますので、ショートコードは全てコピペしてください。
ショートコードだけだと、メールの内容は入力したものだけ表示されて、項目はわからなくなることがありますので、上記のように必ず項目にタイトルは付けてください。（契約者名と担当名を入力した場合や契約番号と連絡先番号を入力した場合など、どっちがどっちかわからなくなります。）
また、数値で設定して単位がある場合は、タグの後にその単位を付けておくとわかりやすくなります。
■添付ファイル：ファイルのタグを利用したときにここのスペースにファイルのショートコードを張り付けてください。
利用者向けの自動返信メールを作る
確認メールとは別にお客様宛に自動返信メールの作成も可能です。
先ほど作った確認メールの一番下にメール(2)にチェックを入れると、以下のフォームが表示されます。
| 送信元 | お客様のメールアドレスのショートコードを入力してください。 |
| 送信元 | ここは変更しないでください。 |
| 題名 | ”●●●●（サイト名）｜お問い合わせいただきありがとうございます”などお客様が認識しやすい題名を付けてください。 |
| 追加ヘッダー | 送信確認したければ、Replay-To:の後に自分のメールアドレスを入力してください。不要であればブランクで構いません。 |
| メッセージ本文 | お客様へのお礼分と内容確認のために入力項目のショートコードを張り付けるといいと思います。確認メールと同様、項目タイトルや単位がある場合はそれらも全て入力してください。ショートコードのみだと、受け取った側はわかりづらい内容になります。 |
簡単なレイアウトカスタマイズ
Contact Form 7のデフォルトのレイアウトは非常に質素で、ただ羅列されているように見えます。
これを少しでも問合せフォームにするように、tabelタグを使って以下のようなフォームにします。
レイアウト自体は非常に簡単です。
Contact Form 7のフォーム画面で以下のような形でtableタグで囲んで作ります。
送信ボタンはtableタグの外に出して記述してください。
<table>
<tr><td> お名前 (必須)</td><td> [text* your-name] </td></tr>
<tr><td> 電話番号</td><td>[tel tel-216]</td></tr>
<tr><td>メールアドレス (必須)</td><td> [email* your-email] </td></tr>
<tr><td>連絡可能日(必須)</td><td>[date date-910] </td></tr>
<tr><td>題名</td><td> [text your-subject] </td></tr>
<tr><td>メッセージ本文</td><td> [textarea your-message] </td></tr>
</table>[submit “送信”]
例えばこの表に”入力項目””入力フォーム”などのヘッダータイトルを付けたい場合は、一番上に一行足して、<tr></tr>の間をthタグに変更して<th>入力項目</th><th>入力フォーム</th>のように記載すると、ヘッダータイトルができます。
まとめ
Contact Form 7は非常に便利なプラグインですが、直感的には利用が難しいかもしれません。
ただ、問い合わせフォームや注文フォームなど慣れると簡単に作成ができますので、是非活用してください。
