Form Submission Not Working for Next Project

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>

@mishpaw This would be exceedingly difficult to try and debug just from the snippet provided.

What’s the link to the form?

Hi, here my link::::::::::::::::::::::

I see no indication the form isn’t working:

Did you receive that submission?

Perhaps I’m not looking at the right place or maybe there’s something else in my settings stopping me but this is what I see

I am only allowed 1 screenshot but will add another post that might be helpful

But I do see this which makes me think it did go through but I don’t know where to see it

@mishpaw Documentation is here:
https://docs.netlify.com/forms/submissions/#form-submissions-ui

Perhaps the submission was considered spam?

you’re right, they are being considered as spam! I removed the *data-netlify-honeypot=“bot-field” thinking this might be the issue but that didn’t work. I still see message going into the Spam Submissions. What could be causing this?

Update

I found the following. I tried with a more realistic name,email, and message, and it was as successful submission. Does this mean I shouldn’t worry about my form? that it is fine as is?

Yes and no.

It seems like there would have been two things happening.
I didn’t mention anything specific to the honeypot previously as I didn’t spot you were using it.

#1
Netlify have something that directs data that looks spammy to the ‘spam’ section.

#2
If you have honeypot field enabled you must ensure that it is sent, and is blank.
It’s mentioned in the documentation here:
https://docs.netlify.com/forms/spam-filters/#honeypot-field

If you submit your form with AJAX, make sure that the honeypot field name is included in the body of the POST request.

If you look at my screenshot of the data sent on submission you’ll see it’s missing bot-field.

So if you have it enabled make sure that bot-field is sent, and that it’s blank.
If it isn’t sent, or contains a value, Netlify will silently reject the submission.

I have added the following to my code:

 <p class="hidden">
    <label>
      Don’t fill this out if you’re human: <input name="bot-field" />
    </label>
  </p>
  <p>

and now see:

… and what was the result of that?

Still working for you?

Yes, I have received a successful submission. If i use the below to test the form again it gets marked as spam just like how the troubleshooting tips said. So I believe my problem is solved. thank you for helping me figure this out!

test, test@email.com, test message