こんにちは。
LIGフィリピン支社代表のせいとです。
お問い合わせフォームといえば、どんなサイトにも大体備わっているものですよね。
どのフォームも見た目は大体同じのため、構築自体は簡単かと思います。
ただし、システムが絡んだり、ユーザーに操作してもらったりと、けっこう重要なページであったりもします。
そこで今回は、ユーザーにとってより快適なフォームを実現するためにオススメしたいクールな技をお伝えしたいと思います。
また、今回の記事を書くにあたり、デモページを作成しました。
こちらのソースも見ながら読んでいただくと、よりわかりやすいかと思います。
ユーザーフレンドリーで構築もしやすいクールなお問い合せフォームをコーディングする9つのTips
1. ボタン系の要素は全て<button type=”submit”></button>を使う
「送信する」「入力画面に戻る」などの要素を作る際、タグは<button type=”submit”></button>を用いましょう。
ボタンタグを推奨する理由は、1.type=”submit”がある、2.閉じタグがあることです。
<a></a>はtype=”submit”がないのでシステムの実装がしづらく、<input>では閉じタグがないため細かい装飾ができません。
両方を兼ねそろえたbuttonタグを使うのが、最もクールなやり方と言えるでしょう。
2. <table></table>を使うべきかはよく考える
お問合せフォームを構築する際、tableタグを用いるケースが多いと思います。
しかし、tableタグはクセのあるタグですし、タグの意味合いは「表を構築するためのもの」なので、ふさわしいと言えるか微妙です。
僕のおすすめは、ul,dlなどのタグを使い、cssでdisplay:table,table-row,table-cellを指定するやり方です。
メリットとしては、1.タグ的な意味合いで言うとこっちのが近い、2.tableより柔軟な組み方ができる、3.他のページで似たようなデザインがあった際に使いまわせるなどがあります。
例)html
<div>
<dl>
<dt>お名前</dt>
<dd><input type="text"></dd>
</dl>
<dl>
<dt>電話番号</dt>
<dd><input type="text"></dd>
</dl>
</div>例)css
div{
display:table;
}
dl{
display:table-row;
}
dt,dd{
display:table-cell;
}ただし、display:tableはIE7以下では崩れるので注意してください。
3. HTML5で追加されたtype属性を使うかはバックエンドエンジニアと相談
HTML5ではtype=”tel”,type=”email”などのtype属性が新たに追加されました。
これらをガンガン使っていきたいところではありますが、ブラウザによってはデフォルトでバリデート機能が備わってしまっているため、システムを実装する際にぶつかって上手くいかない可能性があります。
使う際にはエンジニアと相談するといいでしょう。
4. <label></label>をフルに活用する
labelタグといえば<input type=”radio”>,<input type=”checkbox”>要素を使う際によく用いるかと思います。
しかし、labelタグはこれら2つだけにしか効かないものではありません。
たとえば↓のように、項目「名前」のテキスト部分をlabelで囲み、その入力部分と関連付けるという方法もアリです。
テキストをクリックしても入力部分がフォーカスされるので、ユーザーに若干優しくなります。
5. labelに「onclick=””」を追加する
labelタグは、そのままだとiPhone,iPad(モバイルsafari)で閲覧する際にタップしても反応がありません。
そこで「onclick=” “」を追加して、<label onclick=””></label>としてあげれば、タップ時に反応します。
ぜひやってみてください。
6. チェックボックス、ラジオボタンはjQueryとスプライト画像でリッチに
<input type=”radio”>,<input type=”checkbox”>要素はhtmlとcssだけでも機能しますが、どんな場合でもjQueryとスプライト画像を用いることをお勧めします。
デフォルトのままだと、デザイン的にもクールじゃないですし、OSやブラウザによって微妙にズレが発生するため、美しくありません。
詳しいやり方は、Webクリエイターボックスさんが丁寧に解説していますので、ぜひ一読してみてください。
参考：CSS3とjQueryでフォームを美しく装飾する方法
https://www.webcreatorbox.com/tech/css3-jquery-form/
7. jQueryプラグイン「customSelect」を使う
チェックボックスやラジオボタンを装飾するなら、せっかくですからセレクトボックスも装飾しちゃいましょう。
そんなときにオススメなのが、jQueryプラグインのcustomSelectです。使い方も簡単なので、お試しください。
参考：jQuery .customSelect()
https://adam.co/lab/jquery/customselect/
8. ajaxzip3を使って郵便番号検索を快適に
郵便番号の自動検索機能をつけたいなら、JSで動くajaxzip3がオススメです。
使い方がシンプルで、バックエンドエンジニアでなくても簡単に実装できるところが大変クールです。
DLと使い方は↓からどうぞ。
参考：ajaxzip3 ダウンロードページ
https://code.google.com/p/ajaxzip3/
9. プレースホルダーをごにょごにょする
ユーザビリティを考慮するならプレースホルダーはできれば入れておきたいところですが、IE8以下では非対応です。
そこでつっこんでおきたいのが、ah-placeholder.jsです。これでIE8以下でも動くようになります。
参考：jQueryプラグイン ah-placeholder.js
https://havelog.ayumusato.com/develop/javascript/e189-jquery-plugin-placeholder.html
また、プレースホルダーのテキストはそれ自身を装飾しないとスタイルが効かないので、cssで細かく指定してあげましょう。
例)css
input::-webkit-input-placeholder {
color: #ccc;
font-size: 14px;
}
input:-moz-placeholder {
color: #ccc;
font-size: 14px;
}まとめ
いかがだったでしょうか。
細かい工夫ですが、こういったテクをちょいちょい使っていくことでよりクールなフォームが出来上がると思います。
役立てていただければ幸いです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
