お店のホームページに欠かせないのが、「お問い合せ」
メールでの予約を受けると、やり取りが行き違うことがあるので、
ご予約はすべて電話で・・というお店も多いとは思いますが、
やはり「ご予約フォーム」というのがあると、お客様にとっては便利な部分もあります。
とかいう場合でも、予約の希望を伝えることができるのは便利です。
そして、ご予約フォームがあると、どこでも予約希望を受けられます。
フォームには
の２通りあると思いますが、
今回は、ご予約もお問い合せの１つであるという前提のもと、
「ご予約可能なお問い合せフォーム」という位置付けで話を進めます。
状況に応じては、２通りのフォームを別々に使い分けるなどの対応も必要になります。
サロンのお問い合せフォームのポイント
今回は、「サロンのお問い合せフォーム」に必要なポイントと、
そのためのシステムについて、書いてみました。
項目は聞きすぎない
せっかくお問い合せフォームを作るのだから、
これを機にたくさんの項目を聞いておこう！
という場合は、ちょっと待ってください。
入力する項目が多いと、お客様の中ではどうしても「手間」のほうが先攻してしまいます。
フォームの項目はできるだけ少なくしておき、お問い合わせ頂いてからやり取りをしていくのが賢いやりかたです。
ただ、「これだけは確認しておかないと」という部分に関しては、
遠慮なく必須項目としてヒアリングするようにしましょう。
例えば、お電話番号を聞かずにご予約を頂いて、当日連絡がとれない・・というのでは困るので、
必須項目にしておくほうがスムーズな場合が多いようです。
返信メールは必須 可能であれば自動化
お問い合せを頂いたら、お客様に返信を必ずするようにします。
というのも、「送信したけれど、届いているのかな・・」という不安を和らげる目的もあるからです。
まずは早い段階で、「届いていますよ！」ということを伝えましょう。
その際、自動返信メール機能があると、「届きましたよ！」ということだけはお伝えすることができるので、便利です。
自動返信メールの中に、「２営業日以内にお返事します」など、
期限に余裕を持たせた記述を入れておけば、慌てて返信をする必要性もなくなります。
スマートフォンにはメールが届かない
最近多いトラブルが、「メールを送ったけれど、返事が無い！」というもの。
サロンとしては、入力いただいたお客様のメールに返信をしているつもりでも、
そのお客様のメールアドレスがスマートフォンの場合、届かない確率の方が高いです。
最近は、増えすぎた迷惑メール対策のために、携帯キャリア（ソフトバンク・AU・docomo など）のほうで、
「パソコンから届いたメールは、すべてスパム」という選別方法があります。
しかも、これが初期設定になっているケースもあるので、
「スマートフォンメールには、届かない」と考えた方がいいです。
『ドメイン指定解除をしていただいて』・・という記述も見かけるのですが、
これはよほどスマートフォンの操作に慣れている人でないかぎり、難易度は高いです。
最近は、携帯電話のショートメールは、別々のキャリアでも送信できるので、
パソコンメール ＞ ショートメール or お電話 ＞ スマホメール
という優先順位で、お客様にご連絡をするのがベターです。
また、お問い合せフォームには
「スマートフォンにはお返事できない場合が多いので、できるだけパソコンメールで」
という注意書きを入れておくようにしましょう。
ご予約の候補を複数出してもらう
ご予約をメールで受ける場合は、１日だけの候補ではなく、
複数日の候補を出してもらうようにしましょう。
その中から、やり取りをしながら、絞って行くほうが安全です。
また、そうすることによって、お客様に「このメールでご予約完了じゃないよ」というアピールにもなります。
「メールを送ったから、予約済みだよね？」というお客様はいないとは思いますが、
混乱させないためにも、メールで完結はしないということは、キチンと伝えるようにしましょう。
入力した内容を確認してもらう
お問い合せをして頂いたら、できるだけお客様が入力した内容を確認してから送信を押してもらうようにしましょう。
お問い合せフォームを作るサービス
お問い合せフォームを無料で作れるサービスは複数あります
http://www.ninja.co.jp/mailform/
HTMLのことが全くわからない。
むしろ拒絶反応があって、じんましんがでる・・
という方は、こういった便利なサービスを使うことをお勧めします。
ただ、デメリットもあります
外部への誘導が必要になる
無料のメールフォームの中には、
「あなたのホームページの中に、表示できます」というものもありますが、
多くの場合は、外部への誘導が必要になります。
せっかく自分のホームページがあるなら、その内部で完結する仕組みが良いと思います
広告が表示される
無料の宿命ですが、広告が表示されるものがほとんどです。
これについては、美意識の問題にもなってきます（汗
お客様の情報を第３者に渡すことになる
これは、サービスによっては・・という部分ですが、
外部のサービスを使ってお客様の情報をやり取りする以上、お客様の情報がその会社を経由することになります。
中には、「サービスを使う代わりに、お客様に広告を送る」という可能性もゼロではないので
そういったことがあるかどうか、
お客様の個人情報の扱いについて慎重に調べてみる必要があります。
あとは、解析ツールとの連動が・・・とか、難しい話も無くは無いのですが、
わかりやすいデメリットでいうと、こんな感じです。
自分の手元で、お問い合せフォームを作る
項目を好きに設定して、
外部に誘導することなく、広告も表示させることなく・・・
となると、「お問い合せフォームの仕組みを自分のホームページの中に設置する」という選択となります。
多少の技術は必要になりますが、そこまで難しく無いのでチャレンジをしてみるのもいいでしょう。
サロンに向いているお問い合せフォーム
これらの機能が織り込まれているという条件をふまえて、
サロンにはどんなお問い合せフォームを設置するか・・となると、
今のところ、「メールフォームPro」がかなりの有力候補です。
http://www.synck.com/contents/download/cgi-perl/mailformpro.html
自動返信、入力チェック、住所の自動入力・・・などなど、
「本当に無料か・・・バケモノか・・」と思う機能をたくさん備えています。
他には、無料版は著作権表示が必要ですが、
最近リリースされたMicroEngineメールフォームも候補の１つです。
http://microengine.jp/mailform/
ただ、今回は、今のところユーザー数の多いメールフォームProについて書いてみます。
まずは、こちらのページの一番下にある「ダウンロード」から、プログラムをダウンロードします。
http://www.synck.com/contents/download/cgi-perl/mailformpro.html
メールフォームProについては、僕がここで書く必要がないくらいのPDFマニュアルがあるので、
そちらを確認してみてください。
PDFは、ダウンロードしたファイルの中に含まれています。
マニュアルに沿って設置をすれば、問題なく動作しますが、
サロンで使う時にはいくつかのカスタマイズが必要になります。
その方法などを、書いて行きます。
※今回記入するバージョンは、4.1.5です。
お問い合せフォームのベースとなる雛形
<link rel="stylesheet" href="メールフォームへのパス/mailform/mfp.statics/mailformpro.css" type="text/css" />
<form id="mailformpro" action="メールフォームへのパス/mailform/mailformpro/mailformpro.cgi" method="POST">
<div class="mfp_phase" summary="個人情報">
<div id="mailfield">
<dl class="mailform">
<input type="hidden" name="お名前" data-unjoin="姓+ +名+（+セイ+ +メイ+）" value="" />
<dt class="mfp"><span class="must">必須</span>お名前</dt>
<dd class="mfp">
<input type="text" name="姓" data-kana="セイ" size="15" required="required" /> <input type="text" name="名" data-kana="メイ" size="15" required="required" />
</dd>
<dt class="mfp">フリガナ</dt>
<dd class="mfp"><input type="text" name="セイ" size="15" data-charcheck="kana" /> <input type="text" name="メイ" size="15" data-charcheck="kana" /></dd>
<dt class="mfp">性別</dt>
<dd class="mfp">
<ul>
<li><label><input type="radio" name="性別" value="男" /> 男性</label></li>
<li><label><input type="radio" name="性別" value="女" /> 女性</label></li>
</ul>
<div id="errormsg_性別" class="mfp_err"></div>
</dd>
<dt class="mfp"><span class="must">必須</span>メールアドレス</dt>
<dd class="mfp"><input type="email" data-type="email" data-parent="mailfield" name="email" size="40" required="required" /></dd>
<dt class="mfp"><span class="must">必須</span>確認のためもう一度</dt>
<dd class="mfp"><input type="email" data-type="email" data-parent="mailfield" name="confirm_email" size="40" required="required" /></dd>
<dt class="mfp">電話番号</dt>
<dd class="mfp"><input type="tel" data-type="tel" name="電話番号" size="16" /></dd>
</dl>
</div>
</div>
<div class="mfp_phase" summary="アンケート">
<dl class="mailform">
<dt class="mfp">備考欄</dt>
<dd class="mfp"><textarea name="備考欄" rows="10" cols="60" data-max="2000"></textarea></dd>
</dl>
<div class="mfp_buttons">
<button type="reset">リセット</button> <button type="submit">送信する</button>
</div>
</div>
</form>
<script type="text/javascript" id="mfpjs" src="メールフォームへのパス/mailform/mailformpro/mailformpro.cgi" charset="UTF-8"></script>
非常にざっくりですが、こういう感じで書けばまずはお問い合せフォームが動きます。
ここの中に、サロンに必要な項目を入れて行けば、立派なご予約フォームになります。
dl dt dd を、ちょっぴり理解する
あ、待って。難しく無いから。逃げないで（笑
上の、ごちゃごちゃしたものを見ると、<dl> と、 <dt>と、 <dd>で、囲われている部分があるのがわかります。
「ウォーリーを探せ」の要領で、探してみてください。
WEBの業界の方には、そう突っ込みを頂くくらい簡単に説明すると、
dlは、「大きな枠」です。 個人情報部分とか、メニュー部分とか。
dtは、「見出し」です。 お名前とか、電話番号とか。
ddは、「内容」です。 実際の入力フォームとか。
つまり、
ご予約日時 という dl の中に、
第一候補 という dt を作り、
日時を dd に入れれば、ご予約候補を入力する部分が表示できます。
実際には、こんなイメージです。
<dl class="mailform" id="reserveTime">
<dt class="mfp"><span class="must">必須</span>第一ご予約希望日時</dt>
<dd class="mfp">
<input type="hidden" name="ご予約希望日時01" data-unjoin="ご予約希望日01+ +ご予約希望時間01" value="" />
<select name="ご予約希望日01" required data-daystart="3" data-daymax="60" data-weekexc="0,0,0,0,0,0,0">
<option value="">ご予約希望日を選択してください</option>
</select>
<select name="ご予約希望時間01" required>
<option value="">ご希望の時間帯を選択してください</option>
<option value="10時〜">10時〜</option>
<option value="12時〜">12時〜</option>
<option value="15時〜">15時〜</option>
</select>
</dd>
</dl>
このツールの便利なところは、自動的に日にちを出力してくれるところです。
上記のように書くと、自動的に下のように日にちリストを出してくれます。
１つずつ分解して解説して行きますね。
日にちを表示する部分
<select name="ご予約希望日01" required data-daystart="3" data-daymax="60" data-weekexc="0,0,0,0,0,0,0"> <option value="">ご予約希望日を選択してください</option> </select>
この部分で、３日後から６０日後までの日にち一覧を表示するという設定になります。
３日後から
data-daystart=”3″
６０日後まで
data-daymax=”60″
非表示にする曜日は、なし
data-weekexc=”0,0,0,0,0,0,0″
曜日に関しては、日・月・火・水・木・金・土 の順に、設定できます。
この中で、定休日がある場合は、非表示にすることができます。
水曜日が定休日なら、日曜日から数えて４つめの数字を1にすれば、水曜日は表示されません。
時間候補を入れてみる
<select name="ご予約希望時間01" required>
<option value="">ご希望の時間帯を選択してください</option>
<option value="10時〜">10時〜</option>
<option value="12時〜">12時〜</option>
<option value="15時〜">15時〜</option>
</select>
この部分が、時間を表示する部分です。
今は、３つの候補しかありませんが
<option value=”15時〜”>15時〜</option>
の部分を複製すれば、時間枠を複数つくることができます
メニューを入れてみる
ご予約いただくメニューも、選択いただけるようにしてみましょう
<div class="title">ご予約メニュー</div> <ol> <li><label><input type="checkbox" name="メニュー名" value="フェイシャル" /> フェイシャル</label></li> <li><label><input type="checkbox" name="メニュー名" value="ボディ" /> ボディ</label></li> <li><label><input type="checkbox" name="メニュー名" value="アロマ" /> アロマ</label></li> </ol>
実にシンプルですが、こうするとメニューを事前に選んで頂くことができます。
まとめ
ちょっと、技術的な部分も多かったので、わかりづらいと感じる方もいたかもしれませんが、
サロンに必要な「お問い合せフォーム」の設置ポイントをお伝えしました。
