フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。
フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。
この記事では、最適なフォームを作るための10の無料ツールを紹介します。
formbase
formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージです。クロスブラウザ対応しており、ユーザー体験をより良いものにすることができます。
Foxholder
Foxholderを導入すると、異なる15のプレースホルダーアニメーションを使うことができます。ユーザーが入力をすると、アニメーションでユーザーがフォームのどこにいるかを示してくれます。
dirrty
dirrtyは、フォームのフィールドが修正されたらそれを検知するjQueryのプラグインです。変更が検知されたら、ユーザーは変更を保存するかどうか確認を求められます。
Inputmask
日付や電話番号、通貨などのデータ入力を非常に容易にするのがInputmaskです。カスタム書式が定義されたフィールドにユーザーがインタラクションすると、フィールドにフォーマットが表示されます。またフォーマットをユーザーに知らせるだけでなく、入力データが有効であることも確認します。
jQuery Validation Plugin
jQuery Validation Pluginはフォームデータの検証に役立つ、ハイレベルなカスタマイズが可能なツールです。URLとメールアドレス両方のバリデーションを、入力フォームの枠外でサポートします。開発者が独自の仕様を追加できるようにするAPIもあります。
jQuery validationのライブラリをさらに探したい方は、こちらのコレクションを見てください。
dependsOn
フィールド間の依存関係を使うことで、ユーザーを必要なフィールドだけに集中させることができます。また、バリデーションにも役立ちます。dependsOnは、どんなフォームにも依存関係を加えるようにできるjQueryのプラグインです。
Choices.js
Choices.jsを使えば、とても魅力的なセレクトボックスやテキスト入力機能を追加することが可能です。この軽量なJavaScriptを使えば、独自の入力テンプレートを作成できます。
Cascading Drop-Down Menu
いくつかのステップをユーザーに選択してもらうフォームの場合、Cascading Drop-Down Menuがぴったりなソリューションです。たとえば自動車の選択を考えてみてください。車種を選択したあと、モデル、製造年などを選んでいくでしょう。
Multipicker
リスト内の単一アイテム（ラジオボタンのようなもの）か複数のアイテム（チェックボックスのようなもの）を選択するユーザーに対して、Multipickerは見た目にきれいな手法を提供します。前述のフォーム要素か、順序のないリストのようなHTML要素を使用することが可能です。
jQuery Form Plugin
AJAXを使用するために、jQuery Form Pluginを使って標準的なHTMLのフォームをアップグレードしましょう。プラグイン機能には、フォームデータの送信方法を完全にコントロールするためのオプションが数多くあります
素晴らしいフォーム＝素晴らしいUX
見た目の素晴らしいフォームの組み合わせは、データ入力において使いやすくユーザーの助けとなります。そしてその結果、より良いコンバージョン率へとつながるのです。紹介したツールのいくつかをあなたのワークフローに加えることで、フォームをより便利なものにできるでしょう。
