I have two sites that had functioning forms on them but which were not effectively filtering spam. I added the data-netlify-recaptcha=‘true’ attribute to the html form element and since then I have not been able to get a form submission to register successfully. The form continues to show on the forms area of the Netlify dashboard. Can anyone help me identify the issue? Also, on submit the page simply refreshes with no success or error message.
Site url: https://www.steadyhandtea.com/
2nd site url: https://joemygoodness.com/#booking
Code for form (using Styled Components) below and React/JS/Styled Components code shown in screenshot.
Hi Perry, thank you for you response. I checked the support guide and am still having issues. The spam filtering seems to be inconsistent and there are several messages that never went through even though they were clearly not spam. Hoping someone can help me identify what is wrong.
A few more notes. I just sent a test submission on the steadyhandtea.com site and ensured that the message wasn’t obviously spam/test content to ensure akismet wasn’t catching the submission. On submitting the form I never see the netlify thank you page, the site just refreshes. I also don’t see the submission in the netlify dashboard area in verified or spam submissions.
I just updated my code (for steadyhandtea.com) a bit which is shown in this screenshot. I noticed I had a ‘netlify=true’ as well as a ‘data-netlify=true’ attribute on the form, not sure if that was wrong but I removed it and just kept ‘data-netlify=true’.
I also changed the name of the netlify-honeypot attribute to ‘bot-field’ and made the hidden input match.
After trying the new form I got a 404 error. Not sure what else to try.
Thank you
if you change the form in react/your SSG, you also have to change the form in the clear html version you are including somewhere so that our bots can process things correctly. Did you do that already?
I don’t understand. The site is built using React/Gatsby so the html version is being generated during build from the code in the screenshot (using Styled Components which is why the elements don’t have standard html syntax). Does that answer your question?
Hi! The issue is that on first load, we serve the html version of your form and are able to inject the recaptcha. However, Gatsby ‘rehydrates’ the site using Javascript which now makes it impossible for us to inject the recaptcha (since everything is loaded using JS). I recommend that you consider implementing a custom recaptcha instead (Spam filters | Netlify Docs). This method allows you to implement your recaptcha in any way you like as long as the steps on the docs are done.
Thank you for that info. I tried to implement that and got frustrated, so I decided to attempt to deploy the form on this site: https://joemygoodness.com/#booking
without the recaptcha at all and only using the honeypot field. When I submit the form I get a 404 and have no idea why. This seems like it should be pretty straightforward but at this point I can’t identify what is causing the issue if I know it isn’t related to the Recaptcha. Here is a screenshot of the form (also gatsby) for that site. Any more insights?
I appreciate your support.
Ok, I learned something new that I think could be helpful to add to the docs, and I still need a fix for the issue. The contact form was in a section of page that a user can navigate to by clicking on a link in the nav that scrolls them to the section using a CSS ID, in this case #booking, after navigating to that part of the page using the nav link the url is now: https://djjoemygoodness.com/#booking.
When I submitted the form from this URL I get a 404 error, but when I submit the form with the ‘/#booking’ piece of the URL the submission goes through.
How can I get the form to submit regardless of whether the url has the anchor tag ID in it?
Thank you
Sorry for the multiple messages, but I just realized I was wrong, the form is still not submitting correctly even without the anchor tag ID in the url. I do get redirected to my new success page (I added 'action="/thanks" to the form element) but the form doesn’t successfully submit. I’m at a loss.
