From bd4919ff4bf44e89edc391e04267ce782b9c6c69 Mon Sep 17 00:00:00 2001
From: Moxiegen Admin <admin@moxiegen.com>
Date: Sat, 2 May 2026 20:53:04 +0000
Subject: [PATCH] Switch contact form to FormSubmit.co

- Replace /api/contact POST with FormSubmit.co action
- Add honeypot anti-spam, success banner, FormData handler
---
 index.html | 88 ++++++++++++++++++++++++------------------------------
 1 file changed, 39 insertions(+), 49 deletions(-)

diff --git a/index.html b/index.html
index c7b2b99..00e120a 100644
--- a/index.html
+++ b/index.html
@@ -267,29 +267,47 @@
                 </div>
                 
                 <div class="lg:col-span-7 bg-slate-950 rounded-3xl p-10">
-                    <form id="contactForm" class="space-y-8">
+                    <form id="contact-form" action="https://formsubmit.co/info@moxiegen.com" method="POST" class="space-y-8">
+                        
                         <div class="grid grid-cols-2 gap-6">
                             <div>
                                 <label class="block text-sm text-slate-400 mb-2">Your name</label>
-                                <input type="text" id="contactName" placeholder="Jane Doe" class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg">
+                                <input type="text" name="name" placeholder="Jane Doe" 
+                                       class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg" required>
                             </div>
                             <div>
                                 <label class="block text-sm text-slate-400 mb-2">Company</label>
-                                <input type="text" id="contactCompany" placeholder="Acme AI Labs" class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg">
+                                <input type="text" name="company" placeholder="Acme AI Labs" 
+                                       class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg" required>
                             </div>
                         </div>
+
                         <div>
                             <label class="block text-sm text-slate-400 mb-2">Work email</label>
-                            <input type="email" id="contactEmail" placeholder="you@company.com" class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg">
+                            <input type="email" name="email" placeholder="you@company.com" 
+                                   class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-2xl px-6 py-5 outline-none text-lg" required>
                         </div>
+
                         <div>
                             <label class="block text-sm text-slate-400 mb-2">Tell us about your use case</label>
-                            <textarea id="contactMessage" rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..." class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-3xl px-6 py-5 outline-none text-lg resize-none"></textarea>
+                            <textarea name="message" rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..." 
+                                      class="w-full bg-slate-900 border border-slate-700 focus:border-emerald-400 rounded-3xl px-6 py-5 outline-none text-lg resize-none" required></textarea>
                         </div>
-                        <button type="submit" class="w-full py-6 bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-2xl rounded-3xl">
+
+                        <!-- Hidden fields -->
+                        <input type="hidden" name="_subject" value="New Moxiegen Website Inquiry!">
+                        <input type="text" name="_honey" style="display:none">
+
+                        <button type="submit" 
+                                class="w-full py-6 bg-emerald-400 hover:bg-emerald-300 text-slate-950 font-semibold text-2xl rounded-3xl">
                             Send message to Moxiegen
                         </button>
                     </form>
+
+                    <!-- Success message area -->
+                    <div id="success-message" class="hidden mt-6 text-center py-4 bg-emerald-400/10 border border-emerald-400 rounded-3xl text-emerald-400 font-medium">
+                        ✅ Message sent successfully! We'll get back to you soon.
+                    </div>
                 </div>
             </div>
         </div>
@@ -502,63 +520,35 @@
         }
 
         // ============================================
-        // FORM SUBMIT HANDLER
+        // FORM SUBMIT HANDLER (FormSubmit.co)
         // ============================================
         function initContactForm() {
-            const form = document.getElementById('contactForm');
-            if (!form) return;
-            
-            form.addEventListener('submit', async (e) => {
+            const form = document.getElementById('contact-form');
+            const successDiv = document.getElementById('success-message');
+
+            form.addEventListener('submit', async function(e) {
                 e.preventDefault();
                 
-                const button = form.querySelector('button[type="submit"]');
-                const originalText = button.innerHTML;
-                
-                const name = document.getElementById('contactName').value.trim();
-                const company = document.getElementById('contactCompany').value.trim();
-                const email = document.getElementById('contactEmail').value.trim();
-                const message = document.getElementById('contactMessage').value.trim();
-                
-                if (!name || !email || !message) {
-                    alert('Please fill in all required fields.');
-                    return;
-                }
-                
-                button.innerHTML = '<span class="inline-block animate-spin mr-3">⟳</span> Sending...';
-                button.disabled = true;
+                const formData = new FormData(form);
                 
                 try {
-                    const response = await fetch('/api/contact', {
+                    const response = await fetch(form.action, {
                         method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ name, company, email, message })
+                        body: formData
                     });
-                    
-                    const data = await response.json();
-                    
-                    if (data.success) {
-                        button.innerHTML = '✓ Message Sent!';
-                        button.style.background = '#22c55e';
+
+                    if (response.ok) {
+                        successDiv.classList.remove('hidden');
                         form.reset();
                         
                         setTimeout(() => {
-                            button.innerHTML = originalText;
-                            button.disabled = false;
-                            button.style.background = '';
-                        }, 3000);
+                            successDiv.classList.add('hidden');
+                        }, 6000);
                     } else {
-                        throw new Error(data.message || 'Failed to send message');
+                        alert('Something went wrong. Please try again.');
                     }
                 } catch (error) {
-                    console.error('Contact form error:', error);
-                    button.innerHTML = '✗ Failed to send';
-                    button.style.background = '#ef4444';
-                    
-                    setTimeout(() => {
-                        button.innerHTML = originalText;
-                        button.disabled = false;
-                        button.style.background = '';
-                    }, 3000);
+                    alert('Network error. Please check your connection and try again.');
                 }
             });
         }