ブログ

  1. トップ
  2. ブログ
  3. フォーム関連のjQueryプラグイン11選

jQuery

フォーム関連のjQueryプラグイン11選

フォーム関連のjQueryプラグインについてまとめました。お問い合わせフォームや会員登録フォーム、購入フォームなど、Webページのいたるところでフォームは使われています。デザイン面だけでなく、ユーザビリティにも配慮して、コンバージョンにつながるフォームを設置していくようにしましょう。

テキスト系

Autosize

Autosize

» Autosize

テキストエリアの大きさを自動で変えてくれるjQueryプラグインです。入力中のテキストに従って、自動でテキストエリアの高さが変わります。テキストの大きさが足りずに入力した文章が隠れることもないですし、マウスを使ってテキストエリアの大きさを変える手間もなくなります。

formatter.js

formatter.js

» formatter.js by firstopinion

フォームでは電話番号やクレジットカード番号など、決まった形式の入力欄もあります。例えば電話番号の場合、3つのフォームを2つのハイフンで区切って横並べにすることが多いでしょう。

formatter.jsを使えば、これを1つのフォーム内で入力をしてもらうことができます。数字を入力していくと、指定した桁数で自動でハイフンや括弧が付加されていくのです。フォームを移動する手間がなくなるので、入力時のユーザーの負担を減らすことができます。

Jquery-maskMoney

Jquery-maskMoney

» Jquery-maskMoney

金額の入力欄に使えるプラグインです。入力した数値に従って、自動でカンマを付加してくれます。小数点表示にも対応していて、ドルなどのcurrencyを表示させることもできます。

Validatr

Validatr

» Home | Validatr

Input要素の入力チェック(バリデーション)のためのjQueryプラグインです。ユーザーが入力した内容に誤りがあれば、メッセージが表示される仕組みになっています。

この手のプラグインは非常に数が多く、秀逸なプラグインも多いです。入力チェックはフォームでは欠かせない機能なので、忘れずに実装するようにしましょう。

jQuery Text Events | Playground from ZURB

jQuery Text Events | Playground from ZURB

» jQuery Text Events | Playground from ZURB

テキスト入力まわりのjQueryプラグインです。入力済みの文字数をカウントしたり、AJAXを利用して入力内容を保存することも可能です。Twitterに対応したバリデーション機能も備えています。

jQuery UI Keyboard Widget

jQuery UI Keyboard  Widget

» Javascript, jQuery and other Junk: jQuery UI Keyboard Widget

バーチャルキーボードが導入できるjQueryプラグインです。入力欄をクリックするとキーボードウィジェットが表示される形式になっていて、キーボードのカスタマイズも可能です。

セレクト要素

Chosen

Chosen

» Chosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxes

Chosenはセレクトボックスの機能拡張ができるjQueryプラグインです。複数選択や検索機能、選択肢をリストにすることも可能です。複数選択の場合は最大選択数も指定できますし、選択した項目を削除する(選択済みからはずす)ことも可能です。

セレクトボックスはフォームでも頻繁に使われる要素なので、用途に合えば導入を検討してみてもいいでしょう。選択肢が多かったり、複数選択が必要な時に役立ってくれるはずです。

JavaScript image combobox

JavaScript image combobox

» JavaScript image combobox v3.3 | Marghoob Suleman

一般的にセレクト要素はテキストのみで構成されていますが、このプラグインを使えば選択肢に画像を併記させることができます。選択肢をビジュアルで確認できるようになります。

その他

DateTimePicker

DateTimePicker

» DateTimePicker – XDSoft plugins, scripts, program, parsers

その名の通り、日付と時間が指定できるピッカーです。上のキャプチャのように、カレンダーに時刻が指定できるピッカーが併記される形式になっています。オプションもいろいろと指定できるので便利です。

Animated Checkboxes and Radio Buttons with SVG

Animated Checkboxes and Radio Buttons with SVG

» Animated Checkboxes and Radio Buttons with SVG

チェックボックスとラジオボタンにアニメーションを付けてくれるjQueryプラグインです。チェックを入れたときのアニメーションも複数あって、手書きで塗りつぶすデザインなどオリジナリティがあってなかなか良いです。

チェックボックスとラジオボタン以外にも、テキストをストライクアウトさせるアニメーションもあります。フォーカスが当たっていれば、スペースキーでチェックを入れることも可能です。

Lightweight Multi-select Combo Box Plugin For jQuery – SelectListActions

Lightweight Multi-select Combo Box Plugin For jQuery - SelectListActions

» Lightweight Multi-select Combo Box Plugin For jQuery – SelectListActions | Free jQuery Plugins

2つ以上のリスト間で、要素を移動させられるjQueryプラグインです。使いどころは限られると思いますが、それだけにケースによっては役に立ってくれるはずです。

要素の移動させる以外にも、複数の要素を移動させたり、要素をソート(並び替え)する機能も備えています。

あとがき

フォーム関連のjQueryプラグインについてまとめました。テキストや配色など、ちょっとした変更で改善が見られることも少なくありません。フォームは一度設置して終わりではなく、アクセス分析や目標の達成率を見ながら継続的に改善(EFO、エントリーフォーム最適化)していくようにしましょう。