Leon-in
105 lines
4.9 KiB
TypeScript
105 lines
4.9 KiB
TypeScript
"use client"
|
||
|
||
import { useForm } from "react-hook-form"
|
||
import { zodResolver } from "@hookform/resolvers/zod"
|
||
import { z } from "zod"
|
||
import { useState } from "react"
|
||
|
||
const schema = z.object({
|
||
firstName: z.string().min(1, "请填写名字"),
|
||
lastName: z.string().min(1, "请填写姓氏"),
|
||
email: z.string().email("请输入有效的邮箱地址"),
|
||
country: z.string().min(1, "请填写所在国家或地区"),
|
||
phone: z.string().min(1, "请填写联系方式"),
|
||
company: z.string().min(1, "请填写公司或项目名称"),
|
||
companySize: z.string().min(1, "请选择团队规模"),
|
||
message: z.string().min(10, "请至少写 10 个字符说明你的需求"),
|
||
})
|
||
|
||
type FormData = z.infer<typeof schema>
|
||
|
||
export default function ContactForm() {
|
||
const [status, setStatus] = useState<"idle" | "success" | "error">("idle")
|
||
|
||
const {
|
||
register,
|
||
handleSubmit,
|
||
formState: { errors, isSubmitting },
|
||
reset,
|
||
} = useForm<FormData>({
|
||
resolver: zodResolver(schema),
|
||
})
|
||
|
||
const onSubmit = async (data: FormData) => {
|
||
try {
|
||
await new Promise((resolve) => setTimeout(resolve, 1000))
|
||
console.log("Contact form:", data)
|
||
setStatus("success")
|
||
reset()
|
||
} catch {
|
||
setStatus("error")
|
||
}
|
||
}
|
||
|
||
if (status === "success") {
|
||
return (
|
||
<div id="contact-form" className="contact-form-block w-form">
|
||
<div className="success-message-wrapper w-form-done" style={{ display: "block" }}>
|
||
<div className="contact-success-message">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="contact-success-icon">
|
||
<path d="M7.20658 10.9311L9.24116 12.1209L12.7928 7.20696M1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
|
||
</svg>
|
||
<h2 className="display-5">已收到你的信息，我们会尽快联系你</h2>
|
||
<div className="mg-top-4x-extra-small">
|
||
<p>如果你在消息里写了团队规模、代码栈和交付约束，后续沟通会更快进入正题。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div id="contact-form" className="contact-form-block w-form">
|
||
<form onSubmit={handleSubmit(onSubmit)} className="grid-2-columns contact-form-grid">
|
||
<input className={`input contact-form w-input`} maxLength={256} placeholder="名字" type="text" {...register("firstName")} />
|
||
<input className={`input contact-form w-input`} maxLength={256} placeholder="姓氏" type="text" {...register("lastName")} />
|
||
<input className={`input contact-form w-input`} maxLength={256} placeholder="工作邮箱" type="email" {...register("email")} />
|
||
<input className={`input contact-form w-input`} maxLength={256} placeholder="所在国家 / 地区" type="text" {...register("country")} />
|
||
<input className={`input contact-form w-input`} maxLength={256} placeholder="微信 / 电话" type="tel" {...register("phone")} />
|
||
<input className={`input contact-form w-input`} maxLength={256} placeholder="公司 / 项目名称" type="text" {...register("company")} />
|
||
<div className="select-wrapper">
|
||
<select className="input select-form w-select" {...register("companySize")}>
|
||
<option value="">团队规模</option>
|
||
<option value="1-10">1-10 人</option>
|
||
<option value="11-50">11-50 人</option>
|
||
<option value="51-200">51-200 人</option>
|
||
<option value="200+">200 人以上</option>
|
||
</select>
|
||
<div className="select-icon-wrapper">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 20 20" fill="none" className="select-icon">
|
||
<path d="M15.5 7.03847L10 12.9615L4.5 7.03847" stroke="currentColor" strokeWidth="1.5" strokeLinecap="square" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<textarea maxLength={5000} placeholder="介绍你的团队、当前流程、想解决的问题，以及希望 DAL Code 帮你完成什么。" className="text-area contact-form w-input" {...register("message")} />
|
||
<div className="contact-form-button-wrapper">
|
||
<button type="submit" className="form-button w-button" disabled={isSubmitting}>
|
||
{isSubmitting ? "提交中..." : "提交需求"}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
{Object.keys(errors).length > 0 && (
|
||
<div className="error-message contact-form-error w-form-fail" style={{ display: "block" }}>
|
||
<div>请先完整填写必填项，并确认邮箱格式正确。</div>
|
||
</div>
|
||
)}
|
||
{status === "error" && (
|
||
<div className="error-message contact-form-error w-form-fail" style={{ display: "block" }}>
|
||
<div>提交失败，请稍后重试。</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|