feat(services-cards): add accordion feature to section

src/scripts/contact-form.js

@@ -23,6 +23,28 @@ form.addEventListener("submit", function(event) {
 
     clearErrors(); // Clear previous errors
 
+    const honeypotField = document.getElementById("url").value.trim();
+    // Add the honeypot check at the top
+    if (honeypotField.length > 0) {
+        console.warn("Honeypot field was filled. Blocking submission.");
+        // You might want to display a message to the user,
+        // but it's often better to fail silently to not alert the bot.
+        // For debugging, you can add an alert:
+        // alert("Submission failed due to security check.");
+        return; // This is the most important part: stop the function here.
+    }
+
+     // Get the hCaptcha response token
+    const hCaptchaResponse = document.querySelector('[name="h-captcha-response"]').value;
+
+    // Check if the hCaptcha token is missing
+    if (!hCaptchaResponse) {
+        // You might want to display a user-facing error here
+        console.warn("hCaptcha token is missing. Submission blocked.");
+        alert("Please complete the hCaptcha verification.");
+        hasErrors = true;
+    }
+
     // Get values
     const firstName = document.getElementById("first-name").value.trim();
     const lastName = document.getElementById("last-name").value.trim();
@@ -79,9 +101,45 @@ form.addEventListener("submit", function(event) {
     }
 
     if (!hasErrors) {
-        alert("Form submitted successfully!");
-        // form.submit(); // Uncomment when ready to send to server
-    }
+    // Package the form data into an object
+    const formData = {
+        firstName: firstName,
+        lastName: lastName,
+        organization: organization,
+        email: email,
+        phone: phone,
+        contactMethod: contactMethod,
+        message: message,
+        url: honeypotField,
+        hCaptchaResponse: hCaptchaResponse
+    };
+
+    // Send the data to the backend using fetch()
+    fetch('/api/submit-form', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData), // Convert the data object to a JSON string
+    })
+    .then(response => {
+        if (response.ok) {
+            return response.json(); // Parse the JSON response
+        }
+        throw new Error('Network response was not ok.');
+    })
+    .then(data => {
+        // Success: handle the server's response
+        console.log('Success:', data);
+        alert('Form submitted successfully!');
+        form.reset(); // Optionally, reset the form after successful submission
+    })
+    .catch((error) => {
+        // Error: handle any network or server errors
+        console.error('Error:', error);
+        alert('An error occurred during submission. Please try again.');
+    });
+}
 });
 
 form.addEventListener("reset", function (event) {

src/scripts/services.js

@@ -0,0 +1,17 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const accordionHeaders = document.querySelectorAll('.accordion-header');
+
+    accordionHeaders.forEach(header => {
+        header.addEventListener('click', function() {
+            const content = this.nextElementSibling;
+            
+            // Check if maxHeight has a value. If it does, the accordion is open.
+            if (content.style.maxHeight) {
+                content.style.maxHeight = null; // Close the accordion
+            } else {
+                // The accordion is closed, open it by setting max-height to its scroll height
+                content.style.maxHeight = content.scrollHeight + 'px';
+            }
+        });
+    });
+});