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

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

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

1. formbase

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

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

formbase

2. Foxholder

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

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

foxholder

3. dirrty

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

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

dirrty

4. Inputmask

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

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

inputmask

5. jQuery Validation Plugin

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

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

jQuery Validation Plugin

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

6. dependsOn

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

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

dependsOn

7. Choices.js

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

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

Choice.js

8. Cascading Drop-Down Menu

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

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

Cascading Drop-Down Menu

9. Multipicker

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

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

Multipicker

10. jQuery Form Plugin

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

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

おわりに

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

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

(原文:Eric Karkovack  翻訳:Akiko Ogita)

 

こちらもおすすめ!▼

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ