「チェックを入れて送信」の癖がすごい

無料のワードプレステーマ GEMSTONE

バージョン1.1.0 はフォーム周りを大きく改修したのですが
格好良いフォームにするために、もし千鳥のノブが見たら「癖がすごい」と言われそうな仕様になっています。

最新版のチェックを入れて送信の特徴


実際のサンプルは上のようになります。文字またはボタンをクリックするとチェックが入ります。
基本的に設定を行うのは、Contact Form 7 内のコードだけですが、少々面倒なコードになってしまいました。

管理画面内の設定

<p><label><span class="form-ck">チェックを入れて送信(承諾確認)[acceptance acceptance-test default:on invert]<i></i></span></label></p>

GEMSTONE ではプラグイン Contact Form 7 を使用しています。
Contact Form 7内のフォームのコードを見てみましょう。ラベルタグとスパンタグで2重に挟んでいます。
スパンタグをクリックすると<I>タグにcheckedというクラスがJSで追加される仕組みです。
本来のチェックボタンはdisplayで消しているため、表示されません。
checked クラスが追加されるとチェックが入り、承諾確認がOKになるわけです。

acceptance_as_validation: on

また、その他の設定に上記コードを入れて、チェックがONになった時に承認されるように設定を変更しないと動きません。
デフォルトはチェックを外すことで、送信ボタンをクリックすることができるようになっています。つまりは通常とは逆の仕様になります。

main.js

//add & remove class checked
$('span.form-ck span').on('click', function(){
 $('span.form-ck i').toggleClass('checked');
});
$('span.form-ck').on('click', function(){
 $(this).toggleClass('checked');
});

checked クラスを追加させるためのコードです。2種類書いているのはラベルタグとIタグの両方でチェックを入れることができるようにしたためです。

style.css

span.form-ck i{
 content:'';
 position:absolute;
 right:0;
 top:0;
 width:18px;
 height:18px;
 background:#eef0f6;
}
span.form-ck i:after{
 content:'';
 width:10px;
 height:10px;
 background:#199ece;
 position:absolute;
 top:4px;
 left:4px;
 -webkit-transition:all .2s ease;
 transition:all .2s ease;
}
span.form-ck i:after{
 opacity:0;
 -webkit-transform:scale(0);
 transform:scale(0);
}
span.form-ck i.checked:after {
 opacity:1;
 -webkit-transform:scale(1);
 transform:scale(1);
}

こんな感じのコードになっています。クラスの追加でスケールが大きくなって
チェックがつく仕組みがコードからわかると思います。

HTML

<p><label><span class="form-ck">チェックを入れて送信(承諾確認)<span class="wpcf7-form-control-wrap acceptance-test"><input type="checkbox" name="acceptance-test" value="1" class="wpcf7-form-control wpcf7-acceptance wpcf7-invert" checked="checked" aria-invalid="false"></span><i></i></span></label></p>

結果、フォームから吐き出されるコードはこんな感じです。
最近はチェック(または承認)をしてから送信する仕様は珍しくないので、導入してみました。
ユーザビリティーとしては通常より良くなるとは思いますが、開発者にはあまり嬉しくない仕様ですね。。。

フォーム他、まだまだGEMSTONEは最適な仕様を模索中ですが
より良いテーマファイルになるように今後も精進します!

この記事のタグ

人気記事と関連記事2 前の記事

次の記事 Autoprefixer...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です