【MW WP Form】下までスクロールするとチェックできるようになるチェックボックス

PR　当ページのリンクには広告が含まれています。

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

スクロールで有効になるチェックボックスの作り方

SAMPLE

仕上がり見本です。よろしければスクロールして試してみてください。

ステップ①　スクロールボックスをフォームに設置

まず、個人情報保護方針などのテキストをスクロールボックスの形式でフォームに設置します。こちらはスクロールボックスの一例です。

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;
}

height（高さ）、overflow-yでscrollの指定をすると、縦にスクロールができるスクロールボックスになります。
今回は、高さ150pxのスクロールボックスでidをagreeにしました。

ステップ②JavaScriptを記述

disabled属性が付与されていると要素が無効状態となります。
まずはチェックボックスに「disabled」を設定してチェックできない状態にしておきます。
（input type="checkbox"のコードの最後に 「disabled=""」が付与された状態です。）

そして下までスクロールされたと判定されることで、チェックボックスから「disabled」が外されチェック可能になる、というJavaScriptを作ります。

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

今回は「プライバシーポリシーに同意する」のテキスト色を、スクロールしたことではっきりした色に変更させるためにチェックボックスの部分を下記のように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>

作業後　注意・反省

このJavaScriptではinput[type='checkbox']を指定しているため、複数フォームを設置しているサイトの場合は注意してください！　効かせたいフォームのページだけに条件分岐でJavaScriptを設定するなどして対応しましょう。他の関係ないフォームのチェックボックスまで無効になってしまいます。実は自分はうっかりこれをやってしまい、焦りました。

例えばJavaScriptをフッターに記述する際にページを指定します。

<?php if( is_page('固定ページのID') ) : ?>
ここに上記のJavaScriptを入れます。

<?php endif; ?>

その他の分岐はこちら

作業後は他のフォームに影響がないかも念のためチェックしておきましょう。