butterfly/moxie-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Connect contact form to backend API

Browse Source
This commit is contained in:
Z User 2026-03-27 23:46:37 +00:00
parent efd6d519ce
commit 986bb5e032
1 changed files with 66 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
index.html
View File

@ -943,26 +943,26 @@
</div> </div>
<div class="lg:col-span-7 bg-slate-950 rounded-3xl p-10 scroll-animate slide-right border border-slate-800 hover:border-[#38BDF8]/30 transition-colors"> <div class="lg:col-span-7 bg-slate-950 rounded-3xl p-10 scroll-animate slide-right border border-slate-800 hover:border-[#38BDF8]/30 transition-colors">
<form class="space-y-8"> <form id="contactForm" class="space-y-8">
<div class="grid grid-cols-2 gap-6"> <div class="grid grid-cols-2 gap-6">
<div> <div>
<label class="block text-sm text-slate-400 mb-2">Your name</label> <label class="block text-sm text-slate-400 mb-2">Your name</label>
<input type="text" placeholder="Jane Doe" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg"> <input type="text" id="contactName" placeholder="Jane Doe" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg" required>
</div> </div>
<div> <div>
<label class="block text-sm text-slate-400 mb-2">Company</label> <label class="block text-sm text-slate-400 mb-2">Company</label>
<input type="text" placeholder="Acme AI Labs" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg"> <input type="text" id="contactCompany" placeholder="Acme AI Labs" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg">
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm text-slate-400 mb-2">Work email</label> <label class="block text-sm text-slate-400 mb-2">Work email</label>
<input type="email" placeholder="you@company.com" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg"> <input type="email" id="contactEmail" placeholder="you@company.com" class="form-input w-full rounded-2xl px-6 py-5 outline-none text-lg" required>
</div> </div>
<div> <div>
<label class="block text-sm text-slate-400 mb-2">Tell us about your use case</label> <label class="block text-sm text-slate-400 mb-2">Tell us about your use case</label>
<textarea rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..." class="form-input w-full rounded-3xl px-6 py-5 outline-none text-lg resize-none"></textarea> <textarea id="contactMessage" rows="4" placeholder="We run 400 H100s and want to run inference + training simultaneously..." class="form-input w-full rounded-3xl px-6 py-5 outline-none text-lg resize-none" required></textarea>
</div> </div>
<button type="button" onclick="handleSubmit()" class="ripple btn-primary w-full py-6 bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] text-slate-950 font-semibold text-2xl rounded-3xl"> <button type="submit" class="ripple btn-primary w-full py-6 bg-gradient-to-r from-[#38BDF8] to-[#A5B4FC] text-slate-950 font-semibold text-2xl rounded-3xl">
Send message to Moxiegen Send message to Moxiegen
</button> </button>
</form> </form>
@ -1128,25 +1128,67 @@
// ============================================ // ============================================
// FORM SUBMIT HANDLER // FORM SUBMIT HANDLER
// ============================================ // ============================================
function handleSubmit() { function initContactForm() {
const button = event.target; const form = document.getElementById('contactForm');
const originalText = button.innerHTML; if (!form) return;
// Loading state form.addEventListener('submit', async (e) => {
button.innerHTML = '<span class="inline-block animate-spin mr-3">⟳</span> Sending...'; e.preventDefault();
button.disabled = true;
setTimeout(() => { const button = form.querySelector('button[type="submit"]');
button.innerHTML = '✓ Message Sent!'; const originalText = button.innerHTML;
button.classList.remove('from-[#38BDF8]', 'to-[#A5B4FC]');
button.style.background = '#22c55e';
setTimeout(() => { // Get form values
button.innerHTML = originalText; const name = document.getElementById('contactName').value.trim();
button.disabled = false; const company = document.getElementById('contactCompany').value.trim();
button.style.background = ''; const email = document.getElementById('contactEmail').value.trim();
}, 2000); const message = document.getElementById('contactMessage').value.trim();
}, 1500);
// Basic validation
if (!name || !email || !message) {
alert('Please fill in all required fields.');
return;
}
// Loading state
button.innerHTML = '<span class="inline-block animate-spin mr-3">⟳</span> Sending...';
button.disabled = true;
try {
const response = await fetch('/api/contact', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, company, email, message })
});
const data = await response.json();
if (data.success) {
button.innerHTML = '✓ Message Sent!';
button.classList.remove('from-[#38BDF8]', 'to-[#A5B4FC]');
button.style.background = '#22c55e';
form.reset();
setTimeout(() => {
button.innerHTML = originalText;
button.disabled = false;
button.style.background = '';
}, 3000);
} else {
throw new Error(data.message || 'Failed to send message');
}
} 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);
}
});
} }
// ============================================ // ============================================
@ -1210,6 +1252,7 @@
initTiltEffect(); initTiltEffect();
initSmoothScroll(); initSmoothScroll();
animateCounters(); animateCounters();
initContactForm();
initAuth(); initAuth();
}); });