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.
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.
For all of the forms we have on Netlify, it says I do not have extra spam prevention enabled(see below):
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.
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?
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">
<label>
Don’t fill this out:
<input name="bot-field" />
</label>
</p>
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.
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.
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)?
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.
,
?
