Engine」はお客様の入力をリアルタイムでチェックしてくれるので、入力エラーを事前に防ぎ、それが入力完了率やコンバージョン率の向上に繋がります。「入力完了率なんてそんなに低くないでしょ」と思われるかもしれませんが、驚くことにフォームの入力完了率は業界別に見るフォーム入力完了率データがすごい!によるとECサイトで約65%という結果があります。約35%のお客様が途中でフォームから離脱してしまっているんですね。Engine」をご紹介します!そもそもなぜフォームからの離脱率が高いのか?フォームからの離脱に繋がってしまう原因の一つが、「お客様による入力エラー」です。フォームの入力を終えたお客様が、確認画面に行った際に入力エラーを把握すると「入力し直すの面倒くさいからいいや」とフォームを離れてしまうのです。あなたがショッピングサイトでお買い物をしていて、商品の注文画面にて名前や住所など必要事項を入力しますよね。全ての入力を終えて確認画面へ行くと、そこには「入力内容にエラーがあります」との文字。それもズラーっとエラー内容が記載されています...。いかがですか?また前のページに戻って入力し直すのはとても面倒ですよね。入力フォームまで来て頂いたのに、入力エラーによってお客様が離脱してしまうのは、お客様にとっても企業側にとっても良いことは何一つありません。お客様による入力エラーを未然に防ぐには?では、「お客様による入力エラー」によるフォームからの離脱を防ぐにはどうすれば良いのでしょうか。その方法の1つとして、フォームの入力チェック(バリデーション)を導入することが上げられます。Engine」を導入することで、入力内容にエラーがあったとしても送信ボタンを押す前に入力エラーに気付くことができます。して未然に入力エラーを防ぐことが、入力完了率やコンバージョン率の向上に繋がります。Engineとは、フォームをリアルタイムで入力チェック(バリデーション)してくれるjQueryのプラグインです。このプラグインの主な特徴は以下です。必要なファイルをダウンロードしようまず初めに、jQuery-Validation-Engineの配布サイトへアクセスし、画面右下にあるボタンよりZIPファイルをダウンロードしてください。ダウンロードしたZIPファイルを解凍し、以下のファイルをお好きな場所に設置します。(スタイルシート)設置した上記4つのファイルを読み込むために、HTMLファイルのヘッダー内(<head>~</head>)に以下のコードを記述をします。※下記はHTMLファイルから見て「css」フォルダに「validationEngine.jquery.css」を、「js」フォルダにjQuery本体・プラグイン本体と日本語ファイルを入れた例です。あなたのサイト構造に合わせて適宜ご調整ください。Engine」を実行するためのコードを記述します。HTMLファイルのヘッダー内(<head>~</head>)に下記コードを記述します。</script>12345<script>$(function(){jQuery("#form_1").validationEngine();});</script>上記コードの3行目は「ID名がform_1というフォームに対して入力チェックを行う」という意味です。「#form_1」の部分を実装するフォームのID名に変更してご使用ください。最後に、入力チェックを行いたい項目(input要素)に「validate[]」というクラスを追加して完了です!まずは下記コードをご参照ください。class="validate[]">上記コードのようにinput要素に「validate[]」というクラスを付与し、validate[]の”[]”の中にチェック方法を入れることで、そのチェック方法に従ってバリデーションを実行します。以下は主なチェック方法です。下記コードのようにクラスにvalidate[required]と記述することでその入力欄は必須入力項目になります。class="validate[required]">入力形式のチェックを行いたい場合は、例えばクラスにvalidate[custom[形式]]と記述することでカッコ内の形式でチェックを行います。下記の場合は形式がemailであるため、正しいメールアドレス形式で入力をしないとエラー表示を出します。class="validate[custom[email]]">以下は主な入力形式のチェック方法です。Engineには他にも様々な入力チェックのオプションがあります。Engineのサンプルページには、上記に記載していないパターンを実装していますので、ぜひご参照ください。フォームの入力内容をチェックする方法という記事に非常に多くのオプションが記載されています。Engine」の導入が完了です!たった数行のコードを記述するだけで簡単に実装出来るなんて凄いですよね。これで、入力内容にエラーがあったとしても送信ボタンを押す前に入力エラーに気付くことができます。バリデーションの導入によってフォームのユーザビリティが向上し、入力完了率やコンバージョン率の向上に繋がります。下記はサンプルページのコードです(一部実装に不要な部分とスタイルシートは省略しています)。Datepicker」でカレンダーを実現しよう!この記事をシェアするツイートシェアする共有するはてブPocketWebデザインファン運営者についてTakahiro.YフリーランスでWeb制作・Web解析・WebマーケティングをしているTakahiroと申します。大手ITベンチャーにてWebデザイナーとして勤務。