メニュー

問合わせフォームは簡潔に

2016年8月5日 - iwane

今日は問合せフォームをつくりました。

Webサイトで、問い合わせフォームを使う利点について
以下のようなものが上げられます。

  • メールアドレスを非公開にできる
  • テンプレート化することで回答を分類化し必要な情報を入手することができる
  • 確認画面を表示することで入力間違いを少なくできる
  • 届くメールが定型なので整理しやすい
  • 空メールなどを防止できる
  • 自動で受付番号などを割り振ることができる
  • 自動返信でメールを送信できる

 

一方入力する側(お客さま側)のデメリットについては

  • 入力が面倒である
  • 氏名など明かさず質問したい時にできない
  • 電話でならすぐに結論が出ることもメールでは回答が返ってくるまでに時間がかかる

 

などが上げられます。

情報を欲しい側は、せっかくフォームを作るならと
色々項目を並べてしまいがちになりますが、
操作が面倒になると、もう一息でコンバージョンというところで
離脱されてしまうということになりかねません。

入力する側のことも考え
かつ、今後のサービスなどで必要になる情報はきちんと考慮し
入力項目は必要最低限にする工夫が必要となります。

 

今回、私の作る問合せフォームは
お買い物サイトでは無く、企業さんが連絡を簡単に入れやすい、
ということを想定して

  • 会社名
  • 名前
  • メルアド
  • 連絡内容
  • (と送信ボタン)

を項目として、

1.wordpressのプラグイン「Contact Form 7」を使うパターン
2.Formタグで作るパターン

の2つで一旦作ってみました。

 

1は、(先日、必須プラグインでもご紹介した)「Contact Form 7」をインストールして
プラグインを有効にすれば、後は画面で視覚的に編集ができるという本当に操作が簡単なもの。
後は、wordpress側が吐き出すタグを、表示したい(phpファイルの)場所に記述するだけです。

form02

 

2の場合は以下のとおりに記述しました。

■formタグ(参考)
<form action=”<?php echo get_template_directory_uri(); ?>/sendmail.php” method=”post”>
<label for=”comp”>貴社名:</label><input type=”text” name=”comp”></div>
<label for=”name”>ご芳名:</label><input type=”text” name=”name”></div>
<label for=”mail”>E-mail:</label><input type=”email” name=”mail”></div>
<label for=”msg”>内 容:</label><textarea name=”msg”></textarea></div>
<input type=”submit” value=”送信” class=”submit”></div>
</form>
■sendmail.php(get_template_directoryで取ってくるのでテーマフォルダー内に保存)
<?php
//文字指定
mb_language(“Japanese”);
mb_internal_encoding(“UTF-8”);
//メールの内容
$to = “idontsay.konkon@gmail.com”;
$title = “[sendmail]会社名:”.$_POST[“comp”].”名前:”. $_POST[“name”] ;
$content = $_POST[“msg”];
$from = “From:”.$_POST[“mail”];
//メールの送信
$send_mail = mb_send_mail($to, $title, $content, $from);
//メールの送信に問題ないかチェック(errorメッセージなどの固定pageに飛ばしてもよし)
if ($send_mail) {
echo “ok”;
} else {
echo “no”;
}
?>

 

form01

 

上記図のようにCSSも同じような感じでつけてみて

・・・・さて、どちらを使うかな?
と比べてみましたが、やはりContact Form 7でしょうか。

html(phpファイルに直接)記述のformの場合は
もう1つ送信用phpとセットで準備しないといけなくるため
手間を考えると、見た目も全然変わらない、しかも設置も簡単なContact Form 7かなと思いました。

 

Webサイトを作るときは、色んなことを整理し設計に反映しなければならないので、
なかなか根気のいる仕事だなと思いました。