チェックを入れないと送信できないようにする機能（スパム対策）

2021・06・08

＊チェックボックスにチェックを入れなければ、送信ボタンをクリックできない仕様のサンプルです＊

サイトにお問い合わせフォームを設置していると、お問い合わせ以外のメッセージ（営業など）が送られてきてしまうことがあります。
そういったメッセージが送られるのを少しでも防ぐ目的で、送信可能にするまでの手順を１つ増やすというのは有効です。（あまり手順を増やしすぎると、本来のお問い合わせまで減ってしまう可能性もあるのでバランスが大事ですが）

今回は、チェックボックスにチェックを入れないと、送信ボタンをクリックできない仕様にしてみました。サンプルの送信ボタンは押しても特にメッセージはどこにも送信されないので、気軽に試してみてくださいね！

主な使用機能：HTML(input)・CSS・JavaScript

確認後、チェックを入れてください。

入力を確認しました。

上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）

HTML・CSS・JavaScript

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title></title>
    <style>
      .sample_checkedBox {
        text-align: center;
        font-family:"游ゴシック体 Medium","游ゴシック体","游ゴシック Medium","Yu Gothic","YuGothic",sans-serif;
      }
      .sample_checkedBox textarea {
        font-size: 16px;
        display: block;
        margin: 16px auto;
        width: 50%;
        height: 60px;
      }
      .sample_subBox {
        width: fit-content;
        opacity: .4;
        cursor: not-allowed;
        margin: 20px auto;
      }
      .sample_subBox.normalcursor {
        cursor: inherit;
        opacity: 1;
      }
      .sample_sub {
        font-size: 16px;
        pointer-events: none;
      }
      .sample_sub.sendok {
        pointer-events: auto;
      }
      .sample_sub.submitok {
        font-size: 16px;
        pointer-events:auto;
      }
      .sample_alert {
        margin: 10px auto;
        font-size: .8rem;
        color: red;
        background-color: seashell;
        padding: 5px;
        width: fit-content;
        border-radius: 5px;
      }
      .sample_alert.alertoff {
        color: blue;
        background-color: lightblue;
      }
      .sample_complete {
        width: fit-content;
        margin: 1rem auto;
      }
    </style>
  </head>
  <body>
    <div class="sample_checkedBox">
        <textarea name="name" >ここにメッセージを入力して下さい。</textarea>
        <p class="sample_alert">確認後、チェックを入れてください。</p>
        <input class="sample_check1" type="checkbox" name="" value=""><span style="font-size:.8rem;">入力を確認しました。</span>
        <div class="sample_subBox">
          <input class="sample_sub" type="submit" name="" value="送信する">
          <p class="sample_complete" style="font-size:.8rem;"></p>
        </div>
    </div>

    <script type="text/javascript" defer>
      {
        const sample_check1 = document.querySelector('.sample_check1');
        const sample_sub = document.querySelector('.sample_sub');
        const sample_alert = document.querySelector('.sample_alert');
        const sample_subBox = document.querySelector('.sample_subBox');
        const sample_complete = document.querySelector('.sample_complete');

        sample_check1.addEventListener('change',()=> {
          if (sample_check1.checked) {
            sample_alert.classList.add('alertoff');
            sample_alert.innerText = 'チェックされました。送信できます。';
            sample_subBox.classList.add('normalcursor');
            sample_sub.classList.add('sendok');
          }
          else {
            sample_alert.classList.remove('alertoff');
            sample_subBox.classList.remove('normalcursor');
            sample_sub.classList.remove('sendok');
            sample_alert.innerText = '確認後、チェックを入れてください。';
          }
        });

        sample_sub.addEventListener('click',() => {
          sample_complete.innerText = '送信が完了しました（サンプルです）';
        });
      }
    </script>
  </body>
</html>

« 前の記事へ次の記事へ »