diff --git a/contact.html b/contact.html index 1efe247..11d4dbd 100644 --- a/contact.html +++ b/contact.html @@ -639,6 +639,7 @@ > + { const contactForm = document.getElementById("contactForm"); if (contactForm) { - contactForm.addEventListener("submit", (e) => { + contactForm.addEventListener("submit", async (e) => { e.preventDefault(); - alert( - "Thank you for your message! We'll get back to you within 24 hours." - ); - contactForm.reset(); + + const submitButton = contactForm.querySelector('button[type="submit"]'); + const originalText = submitButton.innerHTML; + + // Show loading state + submitButton.innerHTML = "Sending..."; + submitButton.disabled = true; + + try { + const formData = new FormData(contactForm); + const name = formData.get("name"); + const email = formData.get("email"); + const phone = formData.get("phone"); + const company = formData.get("company"); + const service = formData.get("service"); + const budget = formData.get("budget"); + const message = formData.get("message"); + + // Send to Resend API + const response = await fetch("https://api.resend.com/emails", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: "Bearer re_YOUR_API_KEY_HERE", // Replace with your Resend API key + }, + body: JSON.stringify({ + from: "KH3 Website ", // Replace with your verified domain + to: ["george.fleef@gmail.com"], + subject: `New contact form submission from ${name}`, + html: ` + New Contact Form Submission + Name: ${name} + Email: ${email} + Phone: ${phone || "Not provided"} + Company: ${company || "Not provided"} + Service Interest: ${ + service || "Not specified" + } + Budget: ${budget || "Not specified"} + Message: + ${message.replace(/\n/g, "")} + `, + }), + }); + + if (response.ok) { + alert( + "Thank you for your message! We'll get back to you within 24 hours." + ); + contactForm.reset(); + } else { + throw new Error("Failed to send email"); + } + } catch (error) { + console.error("Error:", error); + alert( + "Sorry, there was an error sending your message. Please try again or contact us directly at george.fleef@gmail.com" + ); + } finally { + // Reset button + submitButton.innerHTML = originalText; + submitButton.disabled = false; + } }); }
Name: ${name}
Email: ${email}
Phone: ${phone || "Not provided"}
Company: ${company || "Not provided"}
Service Interest: ${ + service || "Not specified" + }
Budget: ${budget || "Not specified"}
Message:
${message.replace(/\n/g, "")}