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

Switch contact form to FormSubmit.co

Browse Source 
- Replace /api/contact POST with FormSubmit.co action
- Add honeypot anti-spam, success banner, FormData handler
This commit is contained in:
Moxiegen Admin 2026-05-02 20:53:04 +00:00
parent a685df00c0
commit bd4919ff4b
1 changed files with 39 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
index.html
View File

@ -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.');
}
});
}