フォーム入力とプログレスバーが一体化！Fort.jsがかっこ良い！
フォームで必要な項目を入れていくと画面上部でプログレスバーがかっこ良く動いてくれるFort.js。
あとどれくらい入力すればよいかひと目で分かる。
コンバージョン率も上がるんじゃないかな。
Fort.jsのデモ
Fort.js
Fort.jsの使い方
それではFort.jsの使い方を見ていきましょう。
それぞれのコードを載せます。
HTMLコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <div class="top"> <div class="colors"></div> </div> <form name="form" action="#"> <div class="form"> <input type="text" name="text" required="required" placeholder="Name" autocomplete="off"> <input type="email" name="email" required="required" placeholder="Email" autocomplete="off"> <input type="password" name="password" required="required" placeholder="Password" autocomplete="off"> <input type="password" name="verify" required="required" placeholder="Verify a Password" autocomplete="off"> <input type="submit" class="btn btn-info" title="Register" value="Register"> </div> </form> </body> |
CSSコード
|
1 |
<link href="fort.css" rel="stylesheet"> |
JavaScriptコード
|
1 2 3 4 |
<script src="fort.js"></script> <script> solid(); </script> |
チェックポイント
デモでは見た目の為にBootstrapを入れています。
デザインはご自由に作成ください。
デザインはご自由に作成ください。
プラグインへ一言
まさにモダンインプット。良い感じ。
このプラグインにビビっときたらシェア
