From 5cf47eb2027c58c3fb2837c1c7315c7b14649019 Mon Sep 17 00:00:00 2001 From: dereklseitz Date: Mon, 25 Aug 2025 23:04:57 -0500 Subject: [PATCH] feat: Add Privacy Policy acceptance to contact form and client-side validation to contact-form.js --- src/about.njk | 27 ++++++++++++++++++++++++--- src/privacy-policy.njk | 15 ++++++++------- src/scripts/contact-form.js | 13 +++++++++---- src/styles/about.css | 13 +++++++++++++ src/styles/privacy.css | 6 ++++++ 5 files changed, 60 insertions(+), 14 deletions(-) diff --git a/src/about.njk b/src/about.njk index ef56442..e597bf9 100644 --- a/src/about.njk +++ b/src/about.njk @@ -108,16 +108,37 @@ pageScripts:
Message - +
- + +
+
+ +
+
+ + + +
+
+
+
-
diff --git a/src/scripts/contact-form.js b/src/scripts/contact-form.js index 1a94f64..bf011e7 100644 --- a/src/scripts/contact-form.js +++ b/src/scripts/contact-form.js @@ -52,11 +52,9 @@ form.addEventListener("submit", function(event) { const honeypotField = document.getElementById("url").value.trim(); if (honeypotField.length > 0) { console.warn("Honeypot field was filled. Blocking submission."); - // Fail silently to avoid alerting the bot. return; } - // Get values, including the hCaptcha response token const firstName = document.getElementById("first-name").value.trim(); const lastName = document.getElementById("last-name").value.trim(); const organization = document.getElementById("organization").value.trim(); @@ -64,7 +62,8 @@ form.addEventListener("submit", function(event) { const phone = document.getElementById("phone").value.trim(); const contactMethod = document.querySelector('input[name="contact-method"]:checked')?.value; const message = document.getElementById("message").value.trim(); - // Get the hCaptcha token from the global hcaptcha object + const privacyAccepted = document.getElementById("privacy").checked; + let hasErrors = false; // Validation logic... @@ -114,6 +113,11 @@ form.addEventListener("submit", function(event) { hasErrors = true; } + if (!privacyAccepted) { + showMessage("Privacy Policy must be accepted before submitting.", true); + hasErrors = true; + } + if (!hasErrors) { // Package the form data, including the hCaptcha token @@ -126,7 +130,8 @@ form.addEventListener("submit", function(event) { contactMethod: contactMethod, message: message, url: honeypotField, - hCaptchaResponse: hCaptchaResponse // <-- THIS IS THE NEW PART + hCaptchaResponse: hCaptchaResponse, + privacyAccepted: privacyAccepted }; // Send the data to the backend using fetch() diff --git a/src/styles/about.css b/src/styles/about.css index ad211c4..35fd805 100644 --- a/src/styles/about.css +++ b/src/styles/about.css @@ -205,6 +205,19 @@ textarea:focus { font-weight: normal; } +.checks { + display: flex; + flex-direction: column; + align-items: center; + gap: 10px; +} + +.privacy-checkbox > div { + display: flex; + align-items: center; /* Vertically aligns items in the center */ + gap: 10px; /* Adds space between the checkbox and the text */ +} + /* Button */ .submit-reset { display: flex; diff --git a/src/styles/privacy.css b/src/styles/privacy.css index c5443ea..7b33c23 100644 --- a/src/styles/privacy.css +++ b/src/styles/privacy.css @@ -94,6 +94,12 @@ hr { margin: 0; } +/* Correctly indents all other lists */ +#data-collection ul, #privacy-rights ul, #contact ul, #data-use ul { + list-style: disc; /* Re-enable bullet points for all lists inside the module */ + padding-left: 20px; /* Indent the entire list */ + margin-left: 10px; /* Adds additional margin */ +} .highlight-statement { color: var(--primary-color);