フォームをより使いやすくするためのJavaScript/CSSツール10選

Eric Karkovack

Ericは20年以上のキャリアをもつWebデザイナーです。ここから彼の仕事を見ることができます。

この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。

10 JavaScript and CSS Tools to Enhance Your Forms (2018-01-22)

フォームは多くの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

見た目の素晴らしいフォームの組み合わせは、データ入力において使いやすくユーザーの助けとなります。そしてその結果、より良いコンバージョン率へとつながるのです。紹介したツールのいくつかをあなたのワークフローに加えることで、フォームをより便利なものにできるでしょう。