Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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

状況

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

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

環境

  • 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; ?>

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

以下の内容を /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');
    /* 同意チェックのチェック状態を判定し、確認ボタンを無効化・有効化する */
    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として書いてくれるかもしれませんし、そんなことはないかもしれません。

参考記事

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away