フォームの見栄え・使い勝手を強化するjQueryプラグインいっぱい

お問い合わせやユーザー登録、ログインから商品の注文まで、ウェブでとっても重要なフォーム要素。

このフォームの使い勝手や見栄えはそのサイトの売上や登録に大きく影響するといっても過言ではありません。

フォームの入力項目が多すぎたり、わかりづらかったりすると、せっかく購入やユーザー登録する気になってくれているユーザーの方々も逃げてしまいますよね…。

今回は、フォームのデザインや使い勝手を強化してくれるjQueryのプラグインをいろいろとまとめてみました。

Perfect signin dropdown box likes Twitter with jQuery

Twitterのサインインボックスのようなドロップダウンボックスを再現してくれています。


Perfect signin dropdown box likes Twitter with jQuery

Lightbox_me – Stupidly Simple Lightboxing

ライトボックスでログイン表示させることができます。


Lightbox_me - Stupidly Simple Lightboxing

Pretty checkboxes with jQuery

チェックボックスの見た目を変えて、可愛らしくフォーマット。


Pretty checkboxes with jQuery

Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

長いフォームをステップに分けて表示させることができます。


Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

How to create Skype-like buttons using jQuery

Skypeっぽいマウスオーバーしたときにぴょこんとハネるボタンを作ることができます。


How to create Skype-like buttons using jQuery

iPhone Style Radio and Checkbox Switches using JQuery and CSS

iPhoneスタイルのチェックボックスとラジオボタンを作ることができます。


iPhone Style Radio and Checkbox Switches using JQuery and CSS

jQuery checkbox

スイッチみたいにスライドさせることができるラジオボタンです。


jQuery checkbox

Niceforms

jQueryを使って、フォームのデザインをスタイリッシュに変更してくれます。


Niceforms

Uniform Sexy forms with jQuery

こちらもフォームのデザインを変更できます。テーマもいくつか用意されていますね。


Uniform Sexy forms with jQuery

jQuery plugin : jqTransform

ボックスを角丸に、チェックボックスやラジオボタンも変更できるプラグイン


jQuery plugin : jqTransform

FancyForm – Javascript checkbox replacement

チェックボックスとラジオボタンをスタイリッシュに変更できます。


FancyForm - Javascript checkbox replacement

prettyCheckboxes

こちらも同様にチェックボックスとラジオボタンを変更できます。


prettyCheckboxes

jQuery Highlight Demo

選択している要素の背景をハイライトさせることができます。


jQuery Highlight Demo

jQuery magicpreview plug-in

フォームの右側にプレビューを表示させることができるプラグインです。


jQuery magicpreview plug-in

jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

iPod風なドロップダウンメニューが実装出来ます。


jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready

jquery.combobox

階層化したセレクトボックスが作れます。


jquery.combobox

A jQuery inline form validation, because validation is a mess

必須項目などにメッセージを表示させることができるプラグインです。


A jQuery inline form validation, because validation is a mess

Ketchup Plugin

こちらもエラー表示させることができるプラグイン。動きもあって可愛らしいです。


Ketchup Plugin

jQuery plugin: Validation

こちらも同様に、バリデーションプラグイン。


jQuery plugin: Validation

jTip – The Jquery Tool Tip

ツールチップを表示させることができます。


jTip - The Jquery Tool Tip

Date Picker – jQuery plugin

カレンダーを表示させて、日にちを先手くさせることができるプラグイン。


Date Picker - jQuery plugin

jQuery.timepickr.js

ちょっぴりユニークな、時間を設定させるプラグイン。


jQuery.timepickr.js

jQuery UI Slider from a Select Element – now with ARIA Support

スライダーで期間を設定させることができるプラグインです。


jQuery UI Slider from a Select Element - now with ARIA Support

AJAX Upload

複数のファイルをページを遷移させることなくアップロードできるプラグイン。


AJAX Upload

JQuery File Upload Plugin Script – JQuery File Upload Script – Uploadify

こちらも複数ファイルをアップロードさせることがきます。


JQuery File Upload Plugin Script - JQuery File Upload Script - Uploadify

Styling an input type=file

フォームのファイルボタンを画像に変更させることができます。


Styling an input type=file

Using form labels as text field values

ラベル要素をフォームのテキストボックス内に表示させておいて、ボックスをクリックすると消えます。


Using form labels as text field values

In-Field Labels jQuery Plugin

こちらもラベル要素をボックス内に表示させて、クリックするとフェードアウトして薄く表示させることができます。


In-Field Labels jQuery Plugin

JQUERY PLUGIN: CLEARFIELD

こちらも同様、ラベル要素をフォームのテキストボックス内に表示させておいて、ボックスをクリックすると消えます。


JQUERY PLUGIN: CLEARFIELD

Justify elements using jQuery and CSS

テーブルを使わずにフォームの要素を整列させるプラグイン。文字の長さを見て、整列させてくれます。


Justify elements using jQuery and CSS

Masked Input Plugin

ボックス内のテキストをフォーマットさせることができます。


Masked Input Plugin

meioMask – a jQuery mask plugin

クレジットカードや時間など、ボックス内のテキストをフォーマットさせることができます。


meioMask – a jQuery mask plugin

Password Strength Indicator and Generator

パスワードのセキュリティレベルをわかりやすく絵で表示させることができます。


Password Strength Indicator and Generator

jQuery Password Strength Meter

こちらも同様、パスワードのセキュリティを表示。


jQuery Password Strength Meter

jQuery showPassword Plugin

チェックボックスでパスワードを伏字から表示させることができます。


jQuery showPassword Plugin

jQuery plugin: autoResize

文字を増やしていくと自動的にテキストエリアが下に大きくなっていきます。


jQuery plugin: autoResize

tableRowCheckboxToggle

テーブルを行ごとクリックできるようにして、チェックできます。


tableRowCheckboxToggle

jQuery UI Multiselect

複雑な複数選択を可能にしてくれるプラグイン


jQuery UI Multiselect

Simple Image Submit Button Rollovers with jQuery

Submitボタンをロールオーバーにできます。


Simple Image Submit Button Rollovers with jQuery

Jeditable – Edit In Place Plugin For jQuery

テキストをクリックしてフォームが出現。修正しなおすとテキストに戻ります。


Jeditable - Edit In Place Plugin For jQuery

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ