2014/12/02

【jQuery】フォーム入力の進捗状況を表せるプログレスバー『Fort.js』の使い方

【jQuery】フォーム入力の進捗状況を表せるプログレスバー『Fort.js』の使い方

フォーム入力は面倒でユーザが離れてしまう場合が多いと思いますが,入力の進捗状況をプログレスバーで表すことで,入力フォームの離脱を防ぐ一助になるかもしれません.

目次

入手方法

https://github.com/Colourity/Fort.js/にアクセスし,右側のDownload ZIPをクリックしダウンロードし,ファイルを解凍します.

設置方法・使用方法

解凍したファイルの中から,以下のファイルを読み込みます.

<script src="fort.min.js"></script>
<link rel="stylesheet" href="fort.min.css">

さらに,HTMLを以下の様な構造にします.

<div class="top">
    <div class="colors"></div>
</div>
  <div class="form">
    <form action="">
      <input type="text">
      <input type="text">
      <input type="text">
      <input type="text">
    </form>
  </div>

※form要素を囲うdiv要素に"form"というクラス名を付与してください.

最後に,JavaScriptで,動作を指定します.

/* 以下の4つのうち,一つを記述する */
solid();
gradient();
sections();
flash();

進捗状況によってプログレスバーの色が変化するので,お好みで選択してください.

サンプル

https://github.com/Colourity/Fort.js/内に,solid,gradient,sections,flashのそれぞれのサンプルのリンクがあります.

まとめ

フォーム入力は進捗状況が分かりづらいのもあり,面倒になって離脱してしまう場合が多いように感じます.

こういったプラグインを使用し,入力の進捗を表すことで,離脱の抑止を図ってみてはいかがでしょうか.