Extract contact form JavaScript to separate file and remove shortcode from contact pages

- Move contact form Alpine.js logic to assets/js/contact-form.js
- Simplify contact-form.html shortcode by removing inline script
- Load contact-form.js in baseof.html after Alpine.js
- Temporarily remove {{< contact_form >}} shortcode from contact pages
  (shortcode parsing issue to investigate later)
- Contact pages now display with placeholder text

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>

1 files changed, 45 insertions, 0 deletions

diff --git a/themes/danix-xyz-hacker/assets/js/contact-form.js b/themes/danix-xyz-hacker/assets/js/contact-form.js
new file mode 100644
index 0000000..4fa8f55
--- /dev/null
+++ b/themes/danix-xyz-hacker/assets/js/contact-form.js
@@ -0,0 +1,45 @@
+document.addEventListener('alpine:init', () => {
+  Alpine.data('contactForm', () => ({
+    formData: {
+      name: '',
+      email: '',
+      message: ''
+    },
+    isSubmitting: false,
+    statusMessage: '',
+    statusClass: '',
+
+    async submitContactForm() {
+      this.isSubmitting = true;
+      this.statusMessage = '';
+      this.statusClass = '';
+
+      try {
+        const response = await fetch('/contact.php', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(this.formData)
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+          this.statusMessage = 'Message sent successfully!';
+          this.statusClass = 'bg-green-100 text-green-800 border border-green-300';
+          this.formData = { name: '', email: '', message: '' };
+        } else {
+          this.statusMessage = data.error || 'An error occurred. Please try again.';
+          this.statusClass = 'bg-red-100 text-red-800 border border-red-300';
+        }
+      } catch (error) {
+        this.statusMessage = 'An error occurred. Please try again.';
+        this.statusClass = 'bg-red-100 text-red-800 border border-red-300';
+        console.error('Form submission error:', error);
+      } finally {
+        this.isSubmitting = false;
+      }
+    }
+  }));
+});