Hello,
I have created a form in my project that also uses framer motion but my form does not get submissions. I am able to see in my account that Netlify knows there’s a form called “contact”, that the form has been submitted a certain time ago, but it says there are no submissions. When I submit my form I do get redirected to the Netlify default thank you your submission has been received page. i am using Tailwind and ShadCN UI. I would appreciate any help. Thanks.
This is what I currently have
<section className="px-6 lg:px-8">
<div className="py-32 sm:py-48 lg:py-56 relative">
<h2 className="text-center text-4xl font-semibold tracking-tight sm:text-6xl text-primary">
Get in Touch
</h2>
<motion.form
id="contact"
name="contact"
method="post"
data-netlify="true"
data-netlify-honeypot="bot-field"
className="mt-11 max-w-xl mx-auto space-y-6" // Increased max width and spacing
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
<Input type="hidden" name="form-name" value="contact" />
<motion.div
initial={{ scale: 0.9 }}
whileHover={{ scale: 1 }}
transition={{ duration: 0.2 }}
>
<Label htmlFor="name">Name</Label>
<Input
type="text"
id="name"
name="name"
placeholder="Your Name"
className="bg-card border-primary/20 py-7 px-7"
required
/>
</motion.div>
<motion.div
initial={{ scale: 0.9 }}
whileHover={{ scale: 1 }}
transition={{ duration: 0.2 }}
>
<Label htmlFor="email">Email</Label>
<Input
type="email"
id="email"
name="email"
placeholder="Your Email"
className="bg-card border-primary/20 py-7 px-7"
required
/>
</motion.div>
<motion.div
initial={{ scale: 0.9 }}
whileHover={{ scale: 1 }}
transition={{ duration: 0.2 }}
>
<Label htmlFor="message">Message</Label>
<Textarea
id="message"
placeholder="Your Message"
name="message"
className="bg-card border-primary/20 py-7 px-7"
required
/>
</motion.div>
<motion.div
initial={{ scale: 0.9 }}
whileHover={{ scale: 1 }}
transition={{ duration: 0.2 }}
>
<Button
type="submit"
className="w-full bg-primary text-lg text-primary-foreground hover:bg-primary/90 py-7" // Added padding for button
>
Send Message
</Button>
</motion.div>
</motion.form>
</div>
</section>