問い合わせフォーム改善｜煩わしい日付入力をjQueryプラグインで解決！
山田 浩太
先日飲食店サイトの予約フォームの改善のお手伝いをさせていただいた際にとても便利なjQueryプラグインを発見しました。
ユーザーが問い合わせフォームをいかに簡単に、確実に入力できるか
問い合わせフォームの改善はコンバージョンへ直結する重要な役割を果たします。
私が相談を受けた飲食店サイトは下記のような問題を抱えていました。
- 入力フォームの文字が読みづらい
- 入力項目が整理されておらず、離脱率が高い
- 自動返信メール機能がなく、ユーザーが不安になり電話で確認することが度々発生
1.入力フォームの文字が読みづらい
まず基本的な部分で、とにかくテキストが読みづらいフォームでした。
問題としては、
- 黒の背景にグレーの文字色（コントラスト弱い）
- フォントが明朝体である
- フォントサイズが12px（小さい）
これらは見るに明らかな問題点なので、背景色とテキスト色のコントラストをはっきりさせ（テキスト色を白にしました）、明朝体をゴシック系に変え、フォントサイズを14px程度まで大きくしました。
入力項目が整理されておらず、離脱率が高い
ユーザーが入力フォームページヘ来る理由は来店の予約をするためです。
その割に不要な入力項目が多くありました。例えば性別、住所、など・・・。
そして入力フォームの定番であるメールアドレス確認用（記入したメールアドレスが間違いないかもう一度確認する項目）です。
しかし、記入必須項目として電話番号があることと、飲食店という業態からユーザーはスマートフォンからのアクセスも多いため、思い切ってメールアドレス確認用を外すことにしました。
（もしメールアドレスが間違っていてメール送信ができなかった場合は、電話をかけて確認すれば解決するという結論から）
最終的には
- 名前（必須）
- 電話番号（必須）
- メールアドレス（必須）
- 予約希望日時（必須）
- 来店人数（任意）
- その他要望（任意）
と、いたってシンプルなフォームに変更。
自動返信メール機能がなく、ユーザーが不安になり電話で確認することが度々発生
これも大きな問題ですが、自動返信メール機能がないため、入力フォーム送信完了後、ユーザーは「ちゃんと遅れてるのかな・・？」と不安になった経験ってないですか？
このクライアントの場合もこのケースで、不安に思ったユーザーが電話をかけてきて「ちゃんと予約できてますか？」と確認してくるんです。
これでははっきり言ってWebサイトで予約フォームを使う意味が全くありません。
自動返信機能（後日こちらもおすすめツールをアップします）を付けることにより解決。
すべて基本的な部分ですが、このクライアント様が抱えていた問題はおそらく大部分を解決できると思います。
予約フォームでの離脱率を減らし、コンバージョン率を上げることで集客をアップすることにつながればいいと思っています。
煩わしい日付入力をjQueryプラグインで解決！
前置きが長くなりましたが、入力フォームの改善がとにかく「ユーザーにストレスを与えない」ことだと考えています。
その中でも日付の入力をいちいち手入力するのは非常に面倒なものです。
生年月日を入力するのも同じですが、年・月・日がそれぞれリストダウンになっていて、選択するという方法が一般的かと思います。
このクライアント様で採用した方法はカレンダーから直接日付を入力するというもので、
それを簡単に実現させたのがjQueryプラグイン「pickadate.js」です。
設置も簡単で、設置方法についてはこちらのエントリーを参考にさせていただいきました。
おそろしく簡単にカレンダーを表示できるjQueryプラグイン「pickadate.js」
デフォルトでは英語表記になっていますが、jsファイルを多少いじれば日本語表記に変更も簡単にできます。
方法については割愛しますが、コメントか@web_mktrまでメッセージいただければアドバイスできますのでお気軽に。
入力フォームに日付入力欄を設けている方はぜひ一度試してみてください。
投稿者プロフィール
最新の投稿
YouTube2023年2月4日隠岐の島移住後、10年に一度の大寒波の中人生初のかまくらをつくってみた。
考えていること2021年1月11日2020年を振り返り、時間の使い方を改めて考える
雑記2021年1月7日2021年、ブログを再開します。
Amazon2016年8月16日Kindle Unlimitedは得か？メリット・デメリットをまとめてみた
