[baserCMS]メールフォームに簡単に「同意する」チェックを設ける #baserCMS

メールフォームでちょいちょい見かける「同意する」のチェック。
「同意する」にチェックを入れると送信できて、チェックしてないとアラートを出したり、確認画面へのボタンが無効化されていて遷移できない仕組みのアレは簡単にできます。
そう、baserCMSならね。

状況

メールフォームに「同意する」チェックを設けたい
- 同意するにチェックを入れないと、確認ボタンをクリックした際にアラートを表示して、確認画面へ遷移させない
- 同意するにチェックを入れるまで、確認ボタンを無効化する

パターン別に作ってみました。

環境

baserCMS 3.0.6.1

同意するにチェックを入れないと、確認ボタンをクリックした際にアラートを表示して、確認画面へ遷移させない

以下の内容を /theme/YOUR_THEME/Elements/mail_form.php に記載する。
※ mail_form.php は、コア（/lib/Baser/Plugin/Mail/View/Elements/mail_form.php）ファイルコピーしたもの
※ $freezed は、確認画面かどうか？を判定している変数です。

mail_form.php

<?php if (!$freezed): ?>
<script>
$(function () {
    /**
     * 同意するチェックの動作制御
     * - 同意チェックのチェック状態を判定し、
     * - チェックが入ってない場合はアラートを表示して、確認画面へ遷移させない
     */
    var $checkBoxAgree = $('#BtnAgreeCheck');
    var $BtnMessageConfirm = $('#BtnMessageConfirm');
    $BtnMessageConfirm.on('click', function() {
        if (!($checkBoxAgree.prop('checked'))) {
            alert('当フォームをご利用の際には、ご同意いただくことが必要です。');
            return false;
        }
    });
});
</script>

<div class="agree-check-box">
<p>ご同意いただければ、下の「同意する」にチェックを入れてお進みください。</p>
<p class="agree-check">
    <label for="BtnAgreeCheck">
        <input type="checkbox" id="BtnAgreeCheck" />同意する
    </label>
</p>
</div>
<?php endif ?>

確認画面へ遷移させない動作のシンプルパターン

<?php if (!$freezed): ?>
<div class="privacy_agree" id="PrivacyAgreeArea">
    <p>同意のうえ、フォームを送信してください。</p>
    <p><label><input name="" type="checkbox" value="">上記内容に同意する</label></p>
</div>
<script>
    $(function(){
        $("#PrivacyAgreeArea").parents("form").on('submit', function(){
            if(!$("#PrivacyAgreeArea").find("[type=checkbox]").prop("checked")) {
                alert("同意のうえ、フォームを送信してください。");
                return false;
            }
        return true;
        });
    });
</script>
<?php endif; ?>

同意するにチェックを入れるまで、確認ボタンを無効化する

mail_form.php

<?php if (!$freezed): ?>
<script>
$(function () {
    /**
     * 同意するチェックの動作制御
     * - フォームを開いたタイミングでは確認ボタンを無効化する
     * - 同意するにチェックを入れると確認ボタンを有効化する
     * - 確認画面では、同意チェックは表示しない
     */
    var $checkBoxAgree = $('#BtnAgreeCheck');
    var $BtnMessageConfirm = $('#BtnMessageConfirm');
    /* 同意チェックのチェック状態を判定し、確認ボタンを無効化・有効化する */
    var agreeCheck = function() {
        var isCheck = $checkBoxAgree.prop('checked');
        if (isCheck) {
            $BtnMessageConfirm.prop('disabled', false);
        } else {
            $BtnMessageConfirm.prop('disabled', true);
        }
        return isCheck;
    };
    $BtnMessageConfirm.on('click', function() {
        if (!agreeCheck()) {
            alert('当フォームをご利用の際には、ご同意いただくことが必要です。');
            return false;
        }
    });
    $checkBoxAgree.on('change', function() {
        agreeCheck();
    });
    agreeCheck();
});
</script>

<div class="agree-check-box">
<p>ご同意いただければ、下の「同意する」にチェックを入れてお進みください。</p>
<p class="agree-check">
    <label for="BtnAgreeCheck">
        <input type="checkbox" id="BtnAgreeCheck" />同意する
    </label>
</p>
</div>
<?php endif ?>

他の仕方

メールフィールド設定で、マルチチェックボックスを利用して「同意する」チェックを作るっていうのも良さそうですね。
必須項目にして、チェックなしチェックの判定を利用するカタチでしょうか。

誰かTipsとして書いてくれるかもしれませんし、そんなことはないかもしれません。

参考記事

http://api.jquery.com/prop/