jQuery

[jQuery]【サンプルあり】送信ボタンを必須項目が空なら無効化させる

EFO(フォーム最適化)のはじめの一歩

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

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

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

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

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

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

サンプル

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

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



サンプルコード

サンプルコード HTML

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

必須項目の赤字や、【必須】マークはCSSで自動で付くようにしています。
なのでここでは必ず required属性を忘れないように付けてください

サンプルコード CSS

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

サンプルコード jQuery

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

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

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

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

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

1. 送信ボタンの無効化

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

2. 必須項目を加工する

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

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

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

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

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

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

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

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

一時的に全ての必須項目が埋まっても、あとから必須項目が空になるケースも考えられるため、グレーアウトに戻す動作も改めて書いておきます

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

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

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

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

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

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