サイト制作時にフォーム周りで覚えておきたいこと
サイト制作時にフォーム周りで覚えておきたいこと
意外にまだ知られていない？placeholder
入力するテキストボックスやテキストエリアなどで最初から文字が入力されていることありますよね。
前までは、valueの中に値を入れて、JavaScriptでクリックされたら中身を削除などを行なっていました。
しかし、今はもっと簡単にできるようになりました。
それがplaceholder属性です。
<input type="text" placeholder="ここに初期値を入れておく">
何か入力されるまで薄い灰色で表示されます。
入力されると消えます。
フォーム周りをCSSでオリジナルのものにしたい
最近はCSSでボタンのデザインを行うということがほとんどになって来ました。
ただ、普通にCSSを書いておけばなのはPCのブラウザのみであったりします。
しかしiOSでsafariだけはなぜかCSSよりもデフォルトのものが勝ってしまいます。
その時に使えるCSSプロパティがこちら
appearance: none;
読み方はappearance(アピアランス)です。
このCSSプロパティによりデフォルトを削除することが出来ます。
ただし、ベンダープレフィックスは必須
CSSプロパティはあるものの対応ブラウザがまだ多くはないのが事実です。
(2017年7月27日現在)
ですので、どの端末でもカバーさせるためにベンダープレフィックスをつけておきましょう。
-moz-appearance: none; -webkit-appearance: none; appearance: none;
あらかじめボタンはデフォルトではない場合は、reset.cssやdefault.cssなどに記述しておくといいかもしれません。
そして改めてCSSでボタンの調節を行えばデザイン通りに作成できると思います。
iPhoneのsafariだけCSSが適用されないという方はぜひ試してみてください。
入力項目の選定と工夫
これはサイト制作のTipsではないですが、コーダー以外にもサイト制作に関わる人に覚えておいて欲しい話です。
フォームを制作する上でユーザーにはクライアント側からすれば聞きたいことだらけだと思います。
名前、年齢、電話番号、メールアドレス、住所、お店だったら希望日時など。
なのでとりあえずフォームに組み込んでおくというのはあまりユーザーに対しては優しくないと思います。
聞きたいこと全てお問い合わせフォームに組み込むと入力時間の長いページになってしまいます。
長いページになるとどうなるか、入力する煩わしさが勝ち離脱ということにもなりかねません。
せっかくサイトからお問い合わせしてもらいたいということで作ったとしても、離脱されたらどうしようもないところです。
正直、ここはどちらを取るか悩ましいところではあります。
私は必須項目は最小限に留め、上の方に持ってくるべきではないかと思います。
任意項目は折りたたむなどしてユーザーにはストレスを感じさせないようにし、離脱を防ぎたいところです。
アクセス数がいくらか貯まっていれば、ここをA/Bテストの対象としてどちらがお問い合わせが多いかを検証するなどを試みてもいいかと思います。
以上が、サイト制作時にフォーム周りで覚えておきたいところの話です。
他にもTipsはあるのですが、ある程度まとめてまた投稿したいと思います。