EFO(エントリーフォーム最適化)をサポートするJS/CSSツール10選

Webサイトにおけるエントリーフォーム（入力フォーム）は、サイト運営者とユーザーを繋ぐとても重要な役割を果たします。

一方でそのフォーム作成自体には、十分な注意が払われないことも多いです。データの検証やマスキング、ビジュアルガイドなどを工夫し、エントリーフォーム最適化（EFO）をはかるだけでも、コンバージョンは大きく変わって来ます。

今回は、ワンランク上のエントリーフォーム最適化（EFO）に貢献するJavaScript/CSSツールを10個ご紹介します。

1. formbase

formbaseは、CSS/SASSを利用したエントリーフォームスタイルを提供してくれるパッケージ。

さまざまなブラウザに対応しており、UXを高めてくれること間違いなしです。

2. Foxholder

Foxholderは、15個の異なるプレースホルダーアニメーションが用意されたセットです。

ユーザーがエントリーフォームに入力する際のアニメーション効果は、実はとても重要です。このアニメーションによって、ユーザーは入力のどの段階にいるか簡単に把握できます。

3. dirrty

dirrtyは、エントリーフォームに入力された内容が変更された際に、そのことを検出するjQueryプラグインです。

入力内容が変更されたことを検出すると、ユーザーに対し入力内容を保存するように通知します。

4. Inputmask

Inputmaskは、エントリーフォームの日付、電話番号、通貨等の入力を簡単にしてくれるツールです。

ユーザーが定義された内容を入力する際、求められている内容入力を促すフォーマットが表示されます。また、入力した内容が有効な値であるかも自動で検出・判断してくれます。

5. jQuery Validation Plugin

jQuery Validation Pluginは、エントリーフォームの入力内容を検証してくれるツールです。

カスタマイズ性が高く、一般的な入力内容の他にも、入力されたURLやメールアドレスが正しい値であるかも自動で検証してくれます。また、開発者用のAPIも提供されています。

もしjQuery Validationのライブラリに興味がある方は、こちらのコレクションもぜひ見てみてください。

6. dependsOn

dependsOnはこの依存フォームフィールドをあらゆるエントリーフォームに組み込むことを可能にする、jQueryプラグインです。

依存フォームフィールドとは、ユーザーと関連がある場合のみに表示されるフォームフィールドです。

7. Choices.js

Choices.jsを使うと、魅力的な選択ボックスや、テキスト入力機能を簡単に加えられます。

このJavaScriptを使えば、あなたオリジナルのカスタムインプットテンプレートを作成できるでしょう。

8. Cascading Drop-Down Menu

Cascading Drop-Down Menuは、ユーザーに複数の項目を入力してもらう必要があるときに役立ちます。

例えば、車を選択する例で考えると、モデルや発売日等の情報をそれぞれ順番に選択させるようユーザーを誘導できます。

9. Multipicker

Multipickerは、複数選択入力（チェックボックス）や単一選択（ラジオボタン）について、ユーザーにとって視覚的にわかりやすいデザインを提供しています。

先に紹介したフォーム要素や、HTML要素等と一緒に利用できます。

10. jQuery Form Plugin

HTMLの標準的なエントリーフォームを、jQuery Form Pluginを使ってアップグレードすれば、AJAXを利用できるようになります。

このプラグインは、フォームデータ送信をよりコントロールしやすい方法で設計するための、さまざまなオプションを提供しています。

おわりに

ユーザーフレンドリーなエントリーフォームを作成し、エントリーフォーム最適化（EFO）をはかることで、コンバージョンの向上が期待できます。

今回ご紹介したツールを活用し、より使いやすいエントリーフォームを目指してください。

（原文：Eric Karkovack 　翻訳：Akiko Ogita）

こちらもおすすめ！▼