EFO（フォーム最適化）のはじめの一歩

ユーザーにとってフォームで一番パワーを使う項目ってなんでしょう？

おそらくほとんどの人は送信ボタンではないでしょうか？
私は経験上そう思っています。

入力欄が入力しやすいか、何を入力したらいいのか分かりやすいか、など、最近はフォームをいかにストレスなくすすめられるかは重要な項目のひとつとなっています。

ですが、最後の送信ボタンで自分が思っていたものと全く違う挙動になってしまうと一気にやる気がそがれてしまいますよね？
私は何度もそがれたことがあります笑

なので送信できる条件が整うまでは見た目的にも機能的にも押せなくしてしまいましょう！

jQueryを使うと、パパッと対応できちゃいます！
今回はそのサンプルを作りましたので解説しますね。

サンプル

テキストボックスが３つあります。
それら全てに文字が入力されていないと送信ボタンがグレーアウトして作動しなくなっています。

逆に全てのテキストボックスに文字が入力されていればクリックできるようになります。

サンプルコード

サンプルコード　HTML

<form>
    <label for="input01">入力欄1つめ</label>
    <input required id="input01" type="text" />
    <label for="input02">入力欄2つめ</label>
    <input type="text"  id="input02"/>
    <label for="input03">入力欄3つめ</label>
    <input required type="text"  id="input03"/>
    <button type="submit" class="send">送信</button>
</form>

HTMLではシンプルにフォームを組んでいます。
必須項目には required 属性を付与しています。

サンプルコード　CSS

.send {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0.8em 5.6em;
    background: #e95b43;
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    display: block;
    margin: auto;
}
.send[disabled] {
    background-color: #aaa;
    cursor: not-allowed;
}
.required {
    color:red;
}
.required:before {
    content: "【必須】"
}

CSSは送信ボタンと、必須項目の部分だけ指定していますので、その他のフォーム部分は適宜ご自身で調整ください。
送信できるときとできないとき、必須項目を赤字にするのと【必須】マークを付けるCSSを書いています。

サンプルコード　jQuery

$(function() {
    //始めにjQueryで送信ボタンを無効化する
    $('.send').prop("disabled", true);
    
    //始めにjQueryで必須欄を加工する
    $('form input:required').each(function () {
        $(this).prev("label").addClass("required");
    });
    
    //入力欄の操作時
    $('form input:required').change(function () {
        //必須項目が空かどうかフラグ
        let flag = true;
        //必須項目をひとつずつチェック
        $('form input:required').each(function(e) {
            //もし必須項目が空なら
            if ($('form input:required').eq(e).val() === "") {
                flag = false;
            }
        });
        //全て埋まっていたら
        if (flag) {
            //送信ボタンを復活
            $('.send').prop("disabled", false);
        }
        else {
            //送信ボタンを閉じる
            $('.send').prop("disabled", true);
        }
    });
});

jQueryはいろいろやっているので、次の項目で解説しますね。

jQueryで何をやっているのか解説します

HTMLは必須項目に required属性を書いているだけです。

CSSは送信ボタンの状態別の見た目と、必須マークのロジックを書いています。

で、jQueryですが、順番に解説しますね。

1. 送信ボタンの無効化

画面を開いたときは必ず入力欄は空なので、ボタンは無効化させています。

$('.send').prop("disabled", true);

2. 必須項目を加工する

required属性がある入力欄を自動で加工します。
requred属性がある入力欄のlabelタグに、classを付けます（.required）。

$('form input:required').each(function () {
    $(this).prev("label").addClass("required");
});

そのclassにCSSを当てて、赤字にしたり、【必須】マークを自動で付けたりします。

.required {
    color:red;
}
.required:before {
    content: "【必須】"
}.322.

3. 必須項目の入力時にロジックを埋め込む

必須項目を入力したときのイベントを拾って

$('form input:required').change(function () {

まずフラグを設定します。

let flag = true;

そして現在入力した欄を含めた必須項目が全て埋まっているかチェックします。
もし一つでも空があればさっきのフラグをfalseにします。

$('form input:required').each(function(e) {
    if ($('form input:required').eq(e).val() === "") {
        flag = false;
    }
});

4. 送信ボタンを変化させる

もし必須項目が全て埋まっていたら、送信ボタンを色つきに戻します。
もし一つでも空があれば、グレーアウトに戻します。

if (flag) {
    //送信ボタンを復活
    $('.send').prop("disabled", false);
}
else {
    //送信ボタンを閉じる
    $('.send').prop("disabled", true);
}

jQueryでやっているのは送信ボタンから disabled属性をつけたり外したりしているだけです。
disabled属性の有無で見た目を変えているのはCSSでやっています。

.send[disabled] {
    background-color: #aaa;
    cursor: not-allowed;
}

送信ボタンの無効化のまとめ

フォームをいかに快適にさせるのかは、コンバージョンに直結してきます。

とくに送信ボタンって、一生懸命いろんな項目を入力してきたものが全てふっとばされてしまう可能性があって、そんな酷すぎる悪質なフォームを経験してきた人にはなかなか押すのが恐ろしかったりしてたりするんですよね。。

ですので細かい部分をどれだけ親切にできるのかは小さいですがかなり重要になるかと思います。

また、フォームはまだまだいろんなところを親切にできます。
ですので、みんながフォーム最適化を知っていって、たくさん親切なサイトが増えてくるとよいなあと思います。