Honeypot Functionality Not Being Implemented for Form

site name: loving-rosalind-839f86.netlify.app


I’m trying to implement a Honeypot field to my form (which is in working condition), but according to Netlify Honeypot field is not enabled. I’ve taken a look at the documentation regarding Honeypot fields and followed the examples, but I believe the issue lies in specifying the honeypot field name in the body of the POST request since we are submitting this form via XHR request.

Below are screenshots of the react component containing the HTML of my form and the function that handles the submission of that form.

Hey @ragjames :wave: ,

I looked into the backend and confirmed that honeypot is enabled for form, “New Contact”.

I can’t see what is in your forms UI, that info is redacted on my end, but when you open up the forms page, do you see something similar to :point_down: ?

Hi @audrey,

  1. The name of the form on our site that is having issues is “New Contact” like you said, but Netlify UI tells me that the honeypot is in fact not enabled. We do have a form called “contact” on our Netlify UI but that is not in use currently.

  2. For all of the forms we have on Netlify, it says I do not have extra spam prevention enabled(see below):

hi there, we had some issues with our form handling recently, you can see a little more here:

can you verify that this was or was not related to the issues you are experiencing? are things working properly now?

Hi @perry ,

I don’t believe this was related to the issues we are experiencing, all forms on the Netlify UI are still telling us that extra spam protection is not enabled like in the screenshots posted above.

Hey @ragjames,

Could you link where exactly on your site do the forms exist?

Hello @hrishikesh,

On our homepage https://loving-rosalind-839f86.netlify.app/ , we have a contact form which is our ‘New Contact’ form on Netlify.

On our Careers page, we have job listings like https://loving-rosalind-839f86.netlify.app/career/email-copywriter/ , which have a form that is the ‘Job Form’ form on Netlify.

Hi @ragjames ,

Thanks for sharing the form links!

I think I found the issue. It looks like you’re missing the class attribute in your hidden div. Could you try adding the class so that <div hidden> is <div class="hidden"> and let us know how it goes?

Hi @audrey,

If you take a look now I have changed the hidden field to be more in line with what is shown in the documentation on Netlify:

However, I do not see any changes on the Netlify form UI, it is still saying there is no extra spam prevention enabled.

Hey @ragjames,

For the time being, could you try removing the action attribute?

Hi @hrishikesh,

Can do, I removed the action attribute from the form html.

Thanks for trying that, @ragjames !

Looking back at the changes you made to the hidden field, I see quotes around "Don't fill this out: " Could you try removing the quotes and adding a closing /> to the input field and let us know if that works?

So something like:

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

Hi @audrey,

In my source HTML for the form, I do not have those quotes and I already also included that closing /> to the input field, like in my original post:


In addition, trying to edit the live page HTML via the ‘inspect element’ on the website shows that it does not have those quotes and no closing />, but those quotes are included after editing:

After editing:

This makes me convinced that the quotes are just added in by default, not sure if this would be a problem or who to fix it.

Hey @ragjames,

We apologise as it’s getting so long to figure this out. Would it be possible for you to share your repo so we can figure this out instead of asking for little changes from your end? A small reproduction would also help.

Hi @hrishikesh,

We can do that, please message me so I can add you as a collaborator to our repo.

I’ve reached out… :slight_smile:

Hey @ragjames,

Sorry for the delay here, but i was finally able to test the repo today.

And I got it to work:

I ignored the public folder from your repo as that contained the pre-built files from Gatsby. When I did that, I noticed that the form didn’t get detected at all. So, I created a form.html and in that, I pasted the content from the <form> tag that I copied from dev tools. I re-deployed and it works.

Great! You said you re-deployed but I’m not seeing that in our dashboard. If you made a new branch with these changes, could you send a pull request? Or if not, could you tell us how to recreate the steps you did (like where did you create the form.html)?

Hey @ragjames,

Sorry for the time taken to get back to this.

I created a site and published the repo in my account which is why you can’t see it as a branch or site in your account.

I created the form.html in the static folder so it gets copied to the public folder during build. You can try adding public folder to .gitignore so that won’t add any conflicts.

Hi @hrishikesh , thanks for following up. Can you take a look at commit 2ee3caf on our master branch on our github to see if this is the way it was supposed to have the static and form.html set up? Thanks.