同意チェッカー

同意チェッカーとは、「利用規約に同意する」「個人情報保護方針を確認した」などのチェックボックスをONにしなければ、フォームの確認(送信)ボタンが押せないようにする仕組みのことです。

↓

espar form では、チェックボックス要素に特別なCSSクラスを指定するだけで、同意チェッカーを実装することができます。複数個のチェックにも対応しています。

準備

確認ボタン/送信ボタン

ボタンにCSSを適用している場合、ボタンが disabled になった場合のCSSを定義しておいて下さい。チェックボックスの状態に応じて disabled 属性の追加/解除を行います。以下は例です。

button:disabled {
    background: #bdc3c7
    color: #7f8c8d
    cursor: not-allowed
    transform: none
    box-shadow: none
    opacity: 0.6;
}
button:disabled:hover {
    transform: none
    box-shadow: none
}

チェックボックス

ユーザに必ずONにして欲しいチェックボックス要素を追加して下さい。複数ある場合は複数記述します。以下は記述例です。

<label for="agreement1">利用規約に同意します</label>
<input type="checkbox" name="agreement1">

導入

同意チェッカー用のクラスをチェックボックス要素に追記して下さい。クラスは以下で命名されます。

[フォームID]-gate

通常フォームIDは espf です。フォームIDが espfTest の場合は espfTest-gate となります。以下は実装例です。

<label for="agreement1">利用規約に同意します</label>
<input type="checkbox" name="agreement1" class="espf-gate">

チェックボックスが複数ある場合、対象となるチェックボックス要素すべてに対してクラスを追記して下さい。