お問い合わせフォームで残りの必須項目数を表示する方法
カテゴリ：WEB制作
タグ：
コンバージョンを上げるにはさまざまな手法やサイト改善方法がありますが、その中でも重要な改善施策の一つが、EFO(問い合わせフォームの最適化)です。
入力フォームに到達したユーザーの離脱率を下げるためにさまざまな工夫を行います。
今回はユーザーにフォームを入力してもらう過程でアクションをさせるナビゲーション機能の一部、残りの必須項目数の表示の方法を紹介します。
HTMLの解説。
<div class="remaining"><p>残りの入力項目<br><span class="number"></span> / <span class="items"></span></p></div>
JavaScriptでnumberに現在の残りの必須項目数、itemsに全ての必須項目数を表示させていきます。
JavaScriptの解説。
$( 'select option[value=""]' ) .html( 'お選びください。' );
念のために、書いておきますが上記はセレクトボックスの初期値に「お選びください。」の文言を追加しています。
var items = $("form").find('.rq').length;
$(".items").html(items);
formタグ内のクラス名「rq」の数を取得・出力しています。
var i = 0;
$(".number").html(items - i);
変数「i」に一つも入力がない状態の「0」を変数に代入します。この変数を使用してカウントを回します。その下の.html( 現在の数 – 入力項目数の初期値)で残りの必須項目数を取得しています。
$("form").find('.rq').change(function() {
calc();
});
$("form").find('.rq').keyup(function() {
calc();
});
「change」イベントと「keyup」イベントで発火させて項目数のカウントを回させます。
changeイベントはテキストやセレクトなどのvalue値が変更されたら、その時点で発火しkeyupイベントはキーボードのキーを押して、離した際に発火します。
var calc = function() {
i = 0;
$("form").find('.rq').each(function() {
if($(this).val() !== "") {
i++;
}
});
$(".number").html(items - i);
};
実際の計算をさせている部分です。
if($(this).val() !== “”)は入力値が空の場合は○○○という処理で、中の処理は「i++」で「i」をカウントアップさせています。
そして最後に.html( 現在の数 – 入力項目数の初期値)で残りの必須項目数を取得しています。
上記で簡易的ですが、お問い合わせフォームの残りの必須項目数の表示が可能になります。
