メールフォームにプライバシーポリシーの同意チェックボックスを設置

はじめに

（初心者向き）この記事では、既存のメールフォームにプライバシーポリシーの同意チェックボックスを追加（私が見落としており）したお話となります。あくまでも個人ページで最低限の内容です。
会社や商業サイト、とくにグローバルに対応する場合は、さらに厳格な法律（例：GDPRなど）が存在します。基本的に法律家に相談が必須とのことです。

---

1. フォームへの同意チェックボックスの設置

まずは、contact.php ファイルに同意チェックボックスとプライバシーポリシーへのリンクを追加します。これにより、ユーザーに個人情報の取り扱いに同意を求めます。

追加するコード

<div class="privacy-consent">
  <input type="checkbox" id="privacy_agree" name="privacy_agree" required>
  <label for="privacy_agree">
    個人情報の取り扱いに同意する
  </label>
  <br>
  <a href="[https://ss542909.stars.ne.jp/hicreat/privacy-policy.html](https://ss542909.stars.ne.jp/hicreat/privacy-policy.html)" target="_blank">プライバシーポリシーはこちら</a>
</div>

<button type="submit">送信</button>

---

2. 同意チェックボックスのスタイル調整

次に、contact.cssにスタイルを追加し、チェックボックスとリンクの見た目を整えます。これにより、フォーム全体のレイアウトを崩さずに、プライバシーポリシーへの同意欄を配置できます。

追加するコード

/* プライバシー同意のチェックボックスとリンクのスタイル */
.privacy-consent {
  margin-top: 16px;
  font-size: 0.9em;
}

.privacy-consent label {
  display: inline;
  font-weight: normal;
  padding: 0;
  margin: 0;
}

---

3. JavaScriptでバリデーション実装

required属性だけでは不確実な場合があるため、contact.jsにJavaScriptによるバリデーションを追加し、同意がなければフォームを送信できないようにします。

contact.jsに追加するコード

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('contactForm');
  const privacyCheckbox = document.getElementById('privacy_agree');
  
  form.addEventListener('submit', function(event) {
    if (!privacyCheckbox.checked) {
      event.preventDefault();
      
      const errorMessage = document.createElement('div');
      errorMessage.textContent = '個人情報の取り扱いに同意してください。';
      errorMessage.style.color = 'red';
      errorMessage.style.fontSize = '0.9em';
      errorMessage.style.marginTop = '8px';
      
      const consentDiv = document.querySelector('.privacy-consent');
      if (consentDiv) {
        const existingError = consentDiv.querySelector('.privacy-error');
        if (existingError) {
          existingError.remove();
        }
        errorMessage.classList.add('privacy-error');
        consentDiv.appendChild(errorMessage);
      }
    }
  });
});

---

まとめ

見落とされがちなメールフォームでのプライバシー同意の設置の話題でした。