From fcf639edcc20c1ef4c23bf1f71615f9d5fe11556 Mon Sep 17 00:00:00 2001
From: Richard Bergsma <richard@365devnet.eu>
Date: Sat, 7 Jun 2025 01:39:21 +0200
Subject: [PATCH] Remove Netlify form handling logic from BasicScripts.astro
 and update Form.astro to set action attribute for contact form submission to
 the new API endpoint.

---
 src/components/common/BasicScripts.astro | 186 +----------------------
 src/components/ui/Form.astro             |   1 +
 2 files changed, 2 insertions(+), 185 deletions(-)

diff --git a/src/components/common/BasicScripts.astro b/src/components/common/BasicScripts.astro
index 4e80e3c..ceabf0f 100644
--- a/src/components/common/BasicScripts.astro
+++ b/src/components/common/BasicScripts.astro
@@ -453,188 +453,4 @@ import { UI } from 'astrowind:config';
 </script>
 
 <!-- Contact Form Handling -->
-<script is:inline>
-  document.addEventListener('DOMContentLoaded', () => {
-    setupContactForm();
-  });
-
-  document.addEventListener('astro:after-swap', () => {
-    setupContactForm();
-  });
-
-  // Netlify form handling setup
-
-  async function setupContactForm() {
-    const contactForm = document.getElementById('contact-form');
-    if (!contactForm) return;
-
-    // Form validation and submission
-    contactForm.addEventListener('submit', async function (e) {
-      e.preventDefault();
-
-      // Reset previous error messages
-      resetFormErrors();
-
-      // Client-side validation
-      if (!validateForm(contactForm)) {
-        return;
-      }
-
-      // Show loading state
-      const submitButton = contactForm.querySelector('button[type="submit"]');
-      const originalButtonText = submitButton.innerHTML;
-      submitButton.disabled = true;
-      submitButton.innerHTML = 'Sending...';
-
-      try {
-        const formData = new FormData(contactForm);
-
-        // Add timestamp to help prevent duplicate submissions
-        formData.append('timestamp', Date.now().toString());
-
-        // Submit the form to Netlify
-        const response = await fetch('/', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-          body: new URLSearchParams(formData).toString(),
-        });
-
-        if (response.ok) {
-          // Show success message
-          document.getElementById('form-success').classList.remove('hidden');
-          contactForm.reset();
-        } else {
-          document.getElementById('form-error').classList.remove('hidden');
-        }
-      } catch {
-        document.getElementById('form-error').classList.remove('hidden');
-      } finally {
-        // Restore button state
-        submitButton.disabled = false;
-        submitButton.innerHTML = originalButtonText;
-      }
-    });
-
-    // Add input validation on blur
-    contactForm.querySelectorAll('input, textarea').forEach((input) => {
-      input.addEventListener('blur', function () {
-        validateInput(this);
-      });
-
-      input.addEventListener('input', function () {
-        // Remove error styling when user starts typing
-        this.classList.remove('border-red-500');
-        const feedbackElement = this.closest('div').querySelector('.invalid-feedback');
-        if (feedbackElement) {
-          feedbackElement.classList.add('hidden');
-        }
-      });
-    });
-  }
-
-  function validateForm(form) {
-    let isValid = true;
-
-    // Validate all inputs
-    form.querySelectorAll('input, textarea').forEach((input) => {
-      if (!validateInput(input)) {
-        isValid = false;
-      }
-    });
-
-    return isValid;
-  }
-
-  function validateInput(input) {
-    if (!input.required) return true;
-
-    let isValid = true;
-    const feedbackElement = input.closest('div').querySelector('.invalid-feedback');
-
-    // Reset previous error
-    if (feedbackElement) {
-      feedbackElement.classList.add('hidden');
-    }
-    input.classList.remove('border-red-500');
-
-    // Checkbox validation (special case for disclaimer)
-    if (input.type === 'checkbox') {
-      if (input.required && !input.checked) {
-        isValid = false;
-        if (feedbackElement) {
-          feedbackElement.textContent = 'Please check the required consent box before submitting';
-          feedbackElement.classList.remove('hidden');
-        }
-        input.classList.add('border-red-500');
-        // Add red border to the checkbox container for better visibility
-        const checkboxContainer = input.closest('.flex.items-start');
-        if (checkboxContainer) {
-          checkboxContainer.classList.add('checkbox-error');
-        }
-      } else {
-        // Remove error styling when checkbox is checked
-        const checkboxContainer = input.closest('.flex.items-start');
-        if (checkboxContainer) {
-          checkboxContainer.classList.remove('checkbox-error');
-        }
-      }
-      return isValid;
-    }
-
-    // Check if empty
-    if (input.required && !input.value.trim()) {
-      isValid = false;
-      if (feedbackElement) {
-        feedbackElement.textContent = 'This field is required';
-        feedbackElement.classList.remove('hidden');
-      }
-      input.classList.add('border-red-500');
-    }
-
-    // Email validation
-    if (input.type === 'email' && input.value.trim()) {
-      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-      if (!emailRegex.test(input.value.trim())) {
-        isValid = false;
-        if (feedbackElement) {
-          feedbackElement.textContent = 'Please enter a valid email address';
-          feedbackElement.classList.remove('hidden');
-        }
-        input.classList.add('border-red-500');
-      }
-    }
-
-    // Textarea minimum length
-    if (input.tagName === 'TEXTAREA' && input.value.trim().length < 10) {
-      isValid = false;
-      if (feedbackElement) {
-        feedbackElement.textContent = 'Please enter at least 10 characters';
-        feedbackElement.classList.remove('hidden');
-      }
-      input.classList.add('border-red-500');
-    }
-
-    return isValid;
-  }
-
-  function resetFormErrors() {
-    // Hide all error messages
-    document.querySelectorAll('.invalid-feedback').forEach((el) => {
-      el.classList.add('hidden');
-    });
-
-    // Remove error styling
-    document.querySelectorAll('input, textarea').forEach((input) => {
-      input.classList.remove('border-red-500');
-    });
-
-    // Remove checkbox container error styling
-    document.querySelectorAll('.flex.items-start').forEach((container) => {
-      container.classList.remove('checkbox-error');
-    });
-
-    // Hide form-level messages
-    document.getElementById('form-success')?.classList.add('hidden');
-    document.getElementById('form-error')?.classList.add('hidden');
-  }
-</script>
+<!-- Netlify form handling setup removed -->
diff --git a/src/components/ui/Form.astro b/src/components/ui/Form.astro
index 77e961b..cfff621 100644
--- a/src/components/ui/Form.astro
+++ b/src/components/ui/Form.astro
@@ -19,6 +19,7 @@ const { inputs, textarea, disclaimer, button = 'Contact us', description = '' }
   id="contact-form"
   name="contact"
   method="POST"
+  action="/api/contact"
   class="needs-validation"
   novalidate
 >