フォームで離脱させないためのjQueryプラグイン50選
最近では、エントリーフォーム最適化（EFO）という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。
ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。
まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じさせない事です。ストレスの原因となるものは大きく言うと
入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。
どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。
です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。
具体的なポイントは以下のような項目になります。
- 必須入力か任意入力のどちらであるかを目立たせる。
- 入力形式（半角・全角など）に指定がある場合は注釈を入れるか自動で変換する。
- 入力項目が多い場合は複数のページに分け、完了までは入力内容を保持する。
- 完了までの流れと現在地をわかりやすく示す。
- 入力エラーのあった部分は強調して分かるようにする。
- なぜエラーになったかがきちんと分かるエラーメッセージを出す。
- 分かりづらい言葉には注釈やFAQをつける。
- 入力の際に必要な書類（免許書など）がある場合は最初に案内する。
- 完了までの操作が多い場合は所要時間の目安を書く。
- データの通信はSSLによる暗号化をする。
- ベリサインなどのデジタル証明書を掲載する。
- 個人情報の取り扱いについて掲載し、同意確認をする。
まずはこれらの点を注意して作成してみてください。あとは解析ツールなどを導入して、具体的に
ユーザーがどこで離脱してしまっているかを分析し改良していくとよいと思います。
フォーム作成に便利なjQueryのプラグインを目的別にまとめたのであわせて紹介します。
ページや設置方法を制御するプラグイン
- Turn Any Webform into a Powerful Wizard
項目の多いフォームをページ分割して展開するプラグインです。
- Jquery Collapser
注釈やFAQなどに便利な表示を操作するプラグインです。
- Create an AJAX/jQuery/PHP Contact Form
ライトボックスの用に開く問合せフォームです。
- Submit A Form Without Page Refresh using jQuery
ページを再読み込みせずに動作する問合せフォームです。
- AJAX forms
フォーム要素をAjaxで通信できるプラグインです。
- JQByte StickyForms
入力値をCookieに保存できるプラグインです。
ユーザーの入力を便利にするプラグイン
- toChecklist plugin
セレクトボックスの複数選択をしやすくできます。
- FlexBox
テキストフィールドにサジェスト機能を実装することができます。
- asmSelect - Select Multiple Form Fields
プルダウンから複数選択ができるようになります。
- JQUERY: DFORM
選択範囲をゲージ状にしたり、カレンダーから日付選択したりできるようになります。
- JQuery plugin for input text field filtering
テキストフィールドに入力できる形式を制限することができます。
- AutoSuggest jQuery Plugin
部分一致のサジェスト機能を実装することができます。
- In-Field Labels jQuery Plugin
テキストフィールド内にフォーカスすると消える説明テキストを表示できます。
- jQuery Keypad
画面上の仮想キーパッドでの入力を実装します。
- Autocomplete
オートコンプリート機能を実装するプラグインです。
- Selecting Multiple Select Form Elements on the Fly
ラジオボタンからメニューリストの選択を操作します。
- timepickr
時間の選択を簡単にするプラグインです。
- jQuery AlphaNumeric
入力できる値を制御するプラグインです。
- Give Your Characters a NobleCount
Twitterのように残り入力文字数を表示します。
- Simple chained combobox
選択値に連動するプルダウンを実装します。
- Changing Form Input Styles on Focus with jQuery
フォーカスした入力フォームを強調してわかりやすくするプラグイン
- Ajax Upload; A file upload script with progress-bar, drag-and-drop
Ajaxでファイルアップローダーを実装するプラグイン
- meioMask - a jQuery mask plugin
テキストフィールド内のテキストを時間や電話番号など指定の入力形式に自動で整形するプラグイン
- Masked Input Plugin
テキストフィールド内のテキストを時間や電話番号など指定の入力形式に自動で整形するプラグイン
- Elastic - Make your textareas grow
入力にあわせてテキストボックスを拡大します。
- jQuery “Highlight” Plugin
フォーカスしているエリアを強調して分かりやすくします。
- Uploadify - a multiple file upload plugin for jQuery
プログレスバー付のアップローダーを実装できます。
- Create a Progress Bar With Javascript
進行状況を表すプログレスバーを表示することができます。
パスワード周辺を制御するプラグイン
- jQuery Show Password Plugin
パスワードフィールドの文字を隠すか隠さないか切り替えます。
- jQuery plugin: Password Validation
入力に合わせてパスワード強度を表示します。
- Password Strength Indicator and Generator
入力に合わせてパスワード強度を表示します。
入力チェックを実装するプラグイン
- A jQuery Inline Form Validation
ツールチップで入力チェックの結果を表示します。
- Simple Validation Plugin
軽量なプラグインで入力チェックを実装します。
- Boxy - Facebook-like dialog/overlay, with frills
Facebookのようなダイアログボックスを実装します。
- jQuery Validation
シンプルな入力チェックを実装します。
- “SAFE SUBMIT” AJAX REQUEST BUTTON HANDLER
送信ボタンを切り替えて二重送信を防ぐプラグインです。
フォーム要素のデザインを制御するプラグイン
jQueryプラグインはこちらのまとめ記事を参考にさせてもらいました。
数年前はフォームといえばデフォルトのフォーム要素が並んでいてあまりデザインもされないものでしたが、 ライブラリやCSSの進歩でデザインや動きの制限なくUIの設計ができるようになりましたね。その分、専門性も高まってきていますが。
この記事へのトラックバックURL: http://designaholic.cc/admin/mt-tb.cgi/142
