jQueryのススメ Vol.02 "帰らないでお客様！"

おもてなしフォームの条件

今回は少しスクリプトから離れたお話をしようと思います。

お客様の離脱率の高い場所、として槍玉に上がりがちなフォーム。
資料請求やカート、お問い合せなどフォームに興味があるユーザは、そのまま重要な顧客候補です。

例えば…
全部入力してページ移動をしようとするとエラーが出て前のページに戻らされ、挙句の果てに今まで入力したものが全部消えている！
こんなフォームでは入力をやめるどころか二度とこんなサイトに来ない、と思われてしまうかもしれません。

お客様を逃さないよう、内容を見なおしてみましょう。

おもてなしフォームの条件1　「一度にたくさん聞かない」

いくら「お気軽に資料をご請求ください」と書いてあっても50項目をすべて埋めなければならないフォームが待ち構えていたら、それはちっとも「お気軽」ではありません。
どんな方が興味を持ってくれるのか？と思ってもそこはぐっとこらえてください。
一番初めのフォームは極力項目を絞りましょう。
どうしても聞かなければならない場合はページを分けることも必要です。

おもてなしフォームの条件2　「親切に、とにかく親切に！」

なんだか入力し難い項目をなんとか埋め、一息ついたのもつかの間「間違ってるよ。戻って最初からやりなおし！」なんて言われたらハンカチを取り出して「キーッ！」とやりたくなるもの。
しかもどこが間違っているのか教えてくれないなんて。
これは使いにくいを通り越して意地悪だ、と思われても仕方がありません。

では親切にとは具体的にどんなことでしょう。
例えば次の5項目

このうちa、cは必須とも言える要素です。

その 「a)何を入力すれば良いのかひと目で分かる（必須項目がわかりやすい）」
「c)どこが間違っているのかすぐわかる」
への配慮がなかったためにお客様を怒らせてしまったフォームがあります。

一見普通のフォームですね。
項目をすべて埋めたのでこれを送信します。

あれ？
しかも何度やり直してもエラーが表示されます。

では、答え合わせ。
どうすれば正しく送信できたかというと

• 1）　郵便番号、電話番号はハイフンなし
• 2）　住所はすべて全角
• 3）　興味のある分野は3つ以内
• 4）　備考は必須、かつ100文字以内

残念ながらどこにもそんな説明はありませんでした。これは意地悪ですね。
まずこのような制限がある場合は、明記しなければいけません。

さらにこのフォームの悪いところは、エラーを一度に表示してくれないところです。
一箇所直してまたエラーが出て、というのは大変ストレスが貯まります。

ではこれを修正してみましょう。

たとえ入力エラーがあってもどこを直せば良いのかがすぐにわかります。

ユーザに迷わせない表示、迷わせない仕掛け、なるべくエラーメッセージを表示させないのが良いフォームです。

そして、良いフォームを作るために、html(デザイン)、スクリプトで工夫しましょう。

次に、工夫の一例を上げます。

html、CSSでできること

スクリプトでできること