diff --git a/src/app/(marketing)/contact/page.tsx b/src/app/(marketing)/contact/page.tsx index 57072c5..9d16202 100644 --- a/src/app/(marketing)/contact/page.tsx +++ b/src/app/(marketing)/contact/page.tsx @@ -1,6 +1,7 @@ 'use client'; import { useState, useEffect, useRef } from 'react'; +import { useSearchParams } from 'next/navigation'; import { z } from 'zod'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; @@ -28,12 +29,18 @@ interface FormErrors { } export default function ContactPage() { + const searchParams = useSearchParams(); + const isSuccessFromRedirect = searchParams.get('success') === 'true'; const [isVisible, setIsVisible] = useState(false); - const [showToast, setShowToast] = useState(false); - const [toastMessage, setToastMessage] = useState(''); - const [toastType, setToastType] = useState<'success' | 'error'>('success'); + const [showToast, setShowToast] = useState(isSuccessFromRedirect); + const [toastMessage, setToastMessage] = useState( + isSuccessFromRedirect ? '表单提交成功!我们会尽快与您联系。' : '' + ); + const [toastType, setToastType] = useState<'success' | 'error'>( + isSuccessFromRedirect ? 'success' : 'success' + ); const [isSubmitting, setIsSubmitting] = useState(false); - const [isSubmitted, setIsSubmitted] = useState(false); + const [isSubmitted, setIsSubmitted] = useState(isSuccessFromRedirect); const [formData, setFormData] = useState({ name: '', phone: '', @@ -43,6 +50,7 @@ export default function ContactPage() { }); const [errors, setErrors] = useState({}); const sectionRef = useRef(null); + const hasProcessedSuccess = useRef(isSuccessFromRedirect); useEffect(() => { requestAnimationFrame(() => { @@ -50,6 +58,13 @@ export default function ContactPage() { }); }, []); + useEffect(() => { + if (isSuccessFromRedirect && !hasProcessedSuccess.current) { + hasProcessedSuccess.current = true; + window.history.replaceState({}, '', '/contact'); + } + }, [isSuccessFromRedirect]); + const validateField = (field: keyof ContactFormData, value: string) => { try { contactFormSchema.shape[field].parse(value); @@ -92,21 +107,41 @@ export default function ContactPage() { setIsSubmitting(true); try { - const response = await fetch('https://formspree.io/f/' + process.env.NEXT_PUBLIC_FORMSPREE_ID, { + const formEndpoint = `https://formsubmit.co/${COMPANY_INFO.email}`; + const formBody = new URLSearchParams(); + formBody.append('name', formData.name); + formBody.append('phone', formData.phone); + formBody.append('email', formData.email); + formBody.append('subject', formData.subject); + formBody.append('message', formData.message); + formBody.append('_subject', `网站留言: ${formData.subject}`); + formBody.append('_captcha', 'false'); + formBody.append('_template', 'table'); + formBody.append('_next', `${window.location.origin}/contact?success=true`); + + const response = await fetch(formEndpoint, { method: 'POST', - headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, - body: JSON.stringify(formData), + headers: { 'Accept': 'application/json' }, + body: formBody, }); - if (response.ok) { + const data = await response.json(); + + if (response.ok && data.success === 'true') { setIsSubmitted(true); setToastMessage('表单提交成功!我们会尽快与您联系。'); setToastType('success'); setShowToast(true); setFormData({ name: '', phone: '', email: '', subject: '', message: '' }); } else { - setToastMessage('提交失败,请稍后重试或直接发送邮件联系我们。'); - setToastType('error'); + const errorMsg = data.message || '提交失败,请稍后重试或直接发送邮件联系我们。'; + if (errorMsg.includes('HTML files') || errorMsg.includes('web server')) { + setToastMessage('表单服务需要在生产环境激活。部署后首次提交会发送确认邮件到 ' + COMPANY_INFO.email); + setToastType('error'); + } else { + setToastMessage(errorMsg); + setToastType('error'); + } setShowToast(true); } } catch {