diff --git a/frontend/src/components/sections/Contact.tsx b/frontend/src/components/sections/Contact.tsx
index 12f494f..c0c80a5 100644
--- a/frontend/src/components/sections/Contact.tsx
+++ b/frontend/src/components/sections/Contact.tsx
@@ -2,11 +2,11 @@ import { useState, type FormEvent } from 'react'
import { Send, CheckCircle2 } from 'lucide-react'
interface FormState {
- name: string
- email: string
- org: string
+ name: string
+ email: string
+ org: string
siteType: string
- message: string
+ message: string
}
const initialForm: FormState = {
@@ -22,10 +22,14 @@ const siteTypes = [
'Other',
]
+
+const FORMSPREE_ENDPOINT = import.meta.env.VITE_FORMSPREE_ENDPOINT
+
export default function Contact() {
- const [form, setForm] = useState
(initialForm)
+ const [form, setForm] = useState(initialForm)
const [submitted, setSubmitted] = useState(false)
- const [loading, setLoading] = useState(false)
+ const [loading, setLoading] = useState(false)
+ const [error, setError] = useState(null)
const set = (field: keyof FormState) =>
(e: React.ChangeEvent) =>
@@ -34,12 +38,44 @@ export default function Contact() {
const handleSubmit = async (e: FormEvent) => {
e.preventDefault()
setLoading(true)
- // Simulated — wire to your backend or Formspree later
- await new Promise(r => setTimeout(r, 1000))
- setLoading(false)
- setSubmitted(true)
+ setError(null)
+
+ try {
+ const response = await fetch(FORMSPREE_ENDPOINT, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Accept: 'application/json',
+ },
+ body: JSON.stringify({
+ name: form.name,
+ email: form.email,
+ organization: form.org,
+ siteType: form.siteType,
+ message: form.message,
+ _subject: `Demo Request from ${form.name}`,
+ _replyto: form.email,
+ _gotcha: '',
+ }),
+ })
+
+ if (response.ok) {
+ setSubmitted(true)
+ setForm(initialForm)
+ } else {
+ const data = await response.json()
+ setError(data.error || 'Something went wrong. Please try again.')
+ }
+ } catch (err) {
+ console.error('Form submission error:', err)
+ setError('Network error. Please check your connection and try again.')
+ } finally {
+ setLoading(false)
+ }
}
+ // ─── Success Page ──────────────────────────────────────────────
+
if (submitted) {
return (