MW WP Formでプライバシーポリシーをすべて読むとチェックできるようなチェックボックスを作りたい！

最後までスクロールしないとチェックできないチェックボックスをMW WP Formで

個人情報保護方針を読まずにフォームを送信してしまうことをなるべく防ぎたい！そんな依頼がありました。
そこで、最後までスクロールしないと「プライバシーポリシーに同意する」にチェックが入らず、フォーム送信できない仕組みを作ることになりました。

すべてスクロールされるとチェックボックスから「disabled」が外される、というJavaScriptを作ります。disabled属性が付与されていると要素が無効状態となり、チェックボックスにチェックが入らなくなります。

プラグイン「MW WP Form」ではあらかじめ「disabled」を入れる方法が分からなかったので、JavaScriptで追加、削除を行いました。

やりたいこと

・「MW WP Form」で作成したフォームに設置
・フォームに個人情報保護方針をスクロールで読めるような状態で設置
・JavaScriptでチェックボックスに「disabled」を追加、削除
・JavaScriptで一番下までスクロールされたか判定
・「プライバシーポリシーに同意する」のテキスト色変更

SAMPLE

①スクロールで読める個人情報保護方針をフォームに設置

こちらはスクロールボックスの一例です。今回は、高さ150pxのスクロールボックスを作りました。

html

<section id="agree">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテ…</section>

css

#agree {
padding: 40px 6%;
font-size: 0.9em;
border: 1px solid #ddd;
margin-bottom: 20px;
height: 150px;
overflow-y: scroll;
}

②JavaScriptを記述

今回は「プライバシーポリシーに同意する」のテキスト色を、スクロールしたことではっきりした色に変更させるためにチェックボックスの部分を下記のようにidとclassを設定しました。

<p id="pp-check" class="disabled-color">[mwform_checkbox name="pp" children="プライバシーポリシーに同意する" separator="," ]</p>

必要ない場合は削除してください😊

<script>
const agree = document.getElementById('agree');
const checkbox = document.querySelector("input[type='checkbox']");
const element = document.getElementById('pp-check'); //「プライバシーポリシーに同意する」の色変更用
checkbox.disabled = true;
agree.addEventListener('scroll', function(){
  if(Math.abs(agree.scrollHeight - agree.clientHeight - agree.scrollTop) < 1){
    checkbox.disabled = false;
    element.classList.remove('disabled-color');//「プライバシーポリシーに同意する」の色変更用
  } 
});
</script>

こちらを参考にさせていただきました。ありがとうございます！