Blog スタッフブログ

Contactform7とはお問い合わせフォームを作成できる、Wordpress用のプラグインです。

お問い合わせフォームはお客様と企業を繋ぐ窓口のようなものであるため、WEBサイトを制作する上では半ば必須と言えるほどです。

このプラグインでは比較的簡単な操作でそのお問い合わせフォームが実装できます。

❶フォームの設定

まず基本となるフォームの設定です。

「フォーム」タブでは住所や名前の入力欄など、フォームの内容を記述できます。

上部のテンプレート名を押すだけで項目が簡単に作ることができ、ファイルの添付機能も付けられます。

❷自動返信メールの設定

ユーザーがフォームからお問い合わせメールを送信した時、サイト管理者と送信したユーザーにそれぞれ自動で返信されるメールの内容を設定できます。

フォームで設定したタグを指定すると、そのタグに入力された内容が返信できます。

たとえば、「お名前」という項目名を作り、そこに入力された文字列を返信メールに表示させたい場合、以下のようなhtmlとタグの記述を行います。

  <tr>
    <th><span class="inner">お名前<span class="red">必須</span></span></th>
    <td>[text* your-name class:form-control_or]</td>
  </tr>

[text* your-name class:form-control]

textというタグを用いることでテキスト入力用のエリアが表示されます。後ろに*を入れることで項目が必須入力になり、入力されずにメールが送信されることを防げます。

この上で、返信メールに

 お名前：
 [your-name]

と設定しておけば、[]内に表示されているタグに基づいた記述、今回であればお名前という入力フォームに入力された内容が返信メールにて返されます。

❸メッセージの設定

フォームの入力内容や状態に応じて、ユーザー側に表示するメッセージを設定できます。

たとえば❷で挙げたような必須項目に入力が無いというケースでは画像のようなエラーメッセージを表示することができます。

❹フォームの表示

設定が完了したら、画面上部に表示されるショートコードを任意の部分にコピー＆ペースト。

入力内容に応じたフォームが表示されるので、あとはCSS等でフォームの見た目を整えればフォームの実装完了です。