フォーム入力を改善、便利にしてくれるライブラリまとめ

フォーム入力というのはユーザにとってストレスの大きい仕組みです。やたらと項目が多かったり、選択肢が多数あると途中で適当な入力になってしまうかも知れません。それは業務システムでも言えます。

そこでなるべくユーザストレスを減らせるようなライブラリを紹介します。これらを使えばフォーム入力の手間や煩雑さが改善されるはずです。

floatlabels.js

スマートフォンでは入力項目のところにあらかじめ何を入力すれば良いかプレースホルダーという仕組みで文字が表示されていますが、ユーザが入力を開始すると消えてしまって不便です。floatlabels.jsではプレースホルダーを別な場所にアニメーションしながら移動してくれるので忘れてしまったりすることなく入力が続けられるようになります。

probots-io/floatlabels.js: Follows the famous Float Label Pattern. Built on jQuery.

fontIconPicker

Web Fontを使った入力補完ライブラリです。絵文字入力とはまた違った使い勝手になります。ユーザにアイコンを選択して欲しい時に使うと便利そうです。

micc83/fontIconPicker: jQuery fontIconPicker v2 is a small (3.22kb gzipped) jQuery plugin which allows you to include a simple icon picker with search and pagination inside your administration forms.

paperstencil

PDF並の細かな表示にこだわったフォームが生成できます。作成ツールも用意されていますので、文章を書いたり入力欄を作ったりするのも簡単にできます。表を使った段組にも対応しています。

bitstat/paperstencil: A cross between word processor and web form. Paperstencil helps enterprises to roll-out data collection solutions, contracts, signatures, payment related solutions of their business needs in few minutes.

Garlic.js

入力内容をlocalStorageに保存しておき、再読込時に入力を再現してくれるライブラリです。入力項目が多い場合など、誤った削除でせっかくの入力内容がすべてなくなってしまったりするのを防げます。

guillaumepotier/Garlic.js: Automatically persist your forms’ text and select field values locally, until the form is submitted.

formBuilder

ドラッグ&ドロップでフォームを作成できるライブラリです。生成した内容をデータベースなどに保存しておくことで、ユーザが自分自身で自由にフォームを作れるようになります。お問い合わせフォームのような汎用的なフォームで、ユーザがカスタマイズしたいといった時に使えます。

kevinchappell/formBuilder: A jQuery plugin for drag and drop form creation

Multi-Step-Form-Js

フォーム入力を複数の段階に分けたマルチステップにしてくれるライブラリです。本当のフォームは一つしかありませんので、サーバサイドに送られるのはすべて入力した後になります。入力項目が多い場合に使えます。

mgildea/Multi-Step-Form-Js: Multi Step Form with jQuery validation

formbase

フォームの表示をスタイルシートだけで見栄えのいいものにデザインしてくれます。HTMLは標準のままなので、作業不要です。単純なHTMLでデザインが当たっていない状態であれば、formbaseを使って少しでも使い勝手を向上すると良いでしょう。

electerious/formbase: Better default styles for common input elements.

見た目を整えるだけでもフォーム入力はしやすくなります。さらにJavaScriptによって改善できるポイントは多いでしょう。これらのライブラリを使いこなせばユーザにとって使いやすいフォームが簡単に実現できるはずです。