contact-form

1"use client";
2 
3import { useForm } from "react-hook-form";
4import { zodResolver } from "@hookform/resolvers/zod";
5import * as z from "zod";
6import { Button } from "@/components/ui/button";
7import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import { toast } from "sonner";
11import { Textarea } from "@/components/ui/textarea";
12 
13const formSchema = z.object({
14  name: z.string().min(1, "Your Name is required"),
15  email: z.string().email("Invalid email address").min(1, "Email Address is required"),
16  subject: z.string().min(1, "Subject is required"),
17  message: z.string().min(1, "Message is required"),
18});
19 
20type FormValues = z.infer<typeof formSchema>;
21export function ContactFormForm() {
22  const form = useForm<FormValues>({
23    resolver: zodResolver(formSchema),
24    defaultValues: {
25      name: "",
26      email: "",
27      subject: "",
28      message: "",
29    },
30  });
31 
32  const onSubmit = async (data: FormValues) => {
33    console.log("Form submitted:", data);
34    toast.success("Form submitted successfully!");
35  };
36 
37  return (
38    <Card className="w-full max-w-md mx-auto">
39      <CardHeader>
40        <CardTitle>Contact Form</CardTitle>
41        <CardDescription>Basic contact form with name, email, and message</CardDescription>
42      </CardHeader>
43      <CardContent>
44        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
45          <div className="space-y-2">
46            <Label htmlFor="name">Your Name</Label>
47            <Input
48              id="name"
49              type="text"
50              placeholder="John Doe"
51              {...form.register("name")}
52            />
53            {form.formState.errors.name && (
54            <p className="text-sm text-destructive">{form.formState.errors.name.message}</p>
55          )}
56          </div>
57 
58          <div className="space-y-2">
59            <Label htmlFor="email">Email Address</Label>
60            <Input
61              id="email"
62              type="email"
63              placeholder="john@example.com"
64              {...form.register("email")}
65            />
66            {form.formState.errors.email && (
67            <p className="text-sm text-destructive">{form.formState.errors.email.message}</p>
68          )}
69          </div>
70 
71          <div className="space-y-2">
72            <Label htmlFor="subject">Subject</Label>
73            <Input
74              id="subject"
75// … truncated