Add functional contact form with API backend

- Replaced placeholder form submission with real POST to /api/contact
- Added honeypot field for spam protection
- Success/error feedback states
- Rate limiting handled by backend

contact.html

@@ -42,6 +42,11 @@
         <div class="column is-8">
           <div class="box kp-card">
             <form id="contact-form">
+              <!-- Honeypot field for spam protection - hidden from users -->
+              <div class="field" style="position: absolute; left: -5000px;" aria-hidden="true">
+                <label class="label" for="website">Website</label>
+                <div class="control"><input class="input" type="text" name="website" id="website" tabindex="-1" autocomplete="off" /></div>
+              </div>
               <div class="field">
                 <label class="label">Name</label>
                 <div class="control"><input class="input" type="text" name="name" placeholder="Your name or alias" required /></div>

js/main.js

@@ -39,13 +39,70 @@ document.getElementById('nav-toggle').addEventListener('click', function() {
   menu.classList.toggle('is-active');
 });
 
-// Contact form (placeholder)
+// Contact form - sends to backend API
 var form = document.getElementById('contact-form');
 if (form) {
   form.addEventListener('submit', function(e) {
     e.preventDefault();
+    
     var status = document.getElementById('form-status');
+    var submitBtn = form.querySelector('button[type="submit"]');
+    var originalBtnText = submitBtn.textContent;
+    
+    // Collect form data
+    var formData = new FormData(form);
+    var data = {
+      name: formData.get('name'),
+      email: formData.get('email'),
+      service: formData.get('service'),
+      message: formData.get('message')
+    };
+    
+    // Honeypot for spam
+    var honeypot = formData.get('website') || formData.get('url') || formData.get('honey');
+    if (honeypot) {
+      // Bot detected - pretend success
+      status.className = 'notification is-success';
+      status.textContent = 'Message received. We\'ll respond within 48 hours.';
       status.style.display = 'block';
-    form.querySelector('button[type="submit"]').disabled = true;
+      form.reset();
+      return;
+    }
+    
+    // Disable button and show sending state
+    submitBtn.disabled = true;
+    submitBtn.textContent = 'Sending...';
+    status.style.display = 'none';
+    
+    // Send to API
+    fetch('/api/contact', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    })
+    .then(function(response) {
+      return response.json();
+    })
+    .then(function(result) {
+      if (result.success) {
+        status.className = 'notification is-success';
+        status.textContent = result.message || 'Message received. We\'ll respond within 48 hours.';
+        status.style.display = 'block';
+        form.reset();
+      } else {
+        throw new Error(result.error || 'Failed to send message');
+      }
+    })
+    .catch(function(error) {
+      status.className = 'notification is-danger';
+      status.textContent = error.message || 'Failed to send message. Please try again.';
+      status.style.display = 'block';
+    })
+    .finally(function() {
+      submitBtn.disabled = false;
+      submitBtn.textContent = originalBtnText;
+    });
   });
 }