ユーザーに優しくないけど、自衛のためのちょっとテクいことをする。
導入イメージ
申込みフォームがあるとする。
全部記入して、最後辺りにプライバシーとかを置いて、「同意の上で送信」みたいなラベルでsubmitを設置。submitすれば普通は送信になるんだけど、ここでポップアップを挟む。
ポップアップでは注意事項を再度表示して、同意しますのチェックボックスと送信のsubmitを設置。チェックを入れてクリックすれば送信完了となる。
そういう二段構えのやつ。
ユーザーからすれば慣れたもんで、どうせ書いてることは大した内容じゃないと高をくくってちゃんと読んでない、めんどくさいから読まない、それで送信しようとする。運営側からすれば読まずにクレームが飛んでくるとかまじでダルいんだけどってことで、意地でも注意書きは読ませたい。
そうすると、フォーム上に「同意する」のチェックボックスを置いてるだけじゃ弱いんで、ポップアップでインパクトを出そうぜって感じになったりする。した。それをやる。
動作イメージ
流れとしては上記のとおりなんだけど、入力漏れがあった場合（＝バリデーションに引っかかった場合）を考える。
- 同ページ上でバリデーションを働かせる場合、ポップアップでチェックを入れてsubmitしたらどこを直すべきかを見えるように、ポップアップを非表示にする。
- 修正してsubmitしたらまたポップアップが出て、というのはめんどくさいからスキップ。
この２つを入れ込む。
組んでいく
まずHTML。
<form>
<ul>
<li><input type="text"></li>
︙
<li class="submit"><input type="submit" value="送信" id="form_submit"></li>
</ul>
<div id="popup">
<label><input type="checkbox" id="accept">同意する</label>
<input type="submit" value="送信" id="popup_submit">
</div>
</form>submitは2箇所に設置することになる。それぞれ動作が違うのでidを振って差別化できるようにする。
1つ目のsubmitに付けるギミックは2つ。
- ポップアップの中のチェックが入ってなかったらポップアップを表示
- ポップアップの中のチェックが入ってたらsubmit
ポップアップ内のsubmitの設定は1つ。
- ポップアップの中のチェックが入ってたらsubmit
$(function(){
$('#form_submit').on('click',function(){
if($('#accept').prop('checked')){
return true;
}else{
$('#popup').fadeIn();
return false;
}
})
$('#popup_submit').on('click',function(){
if($('#accept').prop('checked')){
$('#form_popup').fadeOut();
return true;
}else{
return false;
}
})
})submitを中断させるにはreturnで操作する。
バリデーション周りは割愛。HTMLでもjsでも好きに入れたら良いです。
wpでも使える
ContactFrom7に突っ込んでみたけど、問題なく動いた。
「return false;」時にはバリデーションが働かないので、ポップアップ表示までスムーズに進む。チェックに入っていたらどっちのsubmitでもバリデーションからの送信になるので動作に問題はない（もしダメだったらjsでsubmitの表示を切り替えるつもりでいた）。
ちなみにContactFrom7でチェックを入れる場合は「承諾確認」を使用する。これは複数設置してもちゃんと稼働してくれるので、チェック項目を複数用意することになっても問題ない。
複数のチェックを入れる場合はjs上の条件分岐にその旨を加えること。
まとめ
そこまでの手間もなく組めるので、割りといい感じになれると思う。
コメント