Site name: auditbycherie.netlify.app
I think the honeypot/captcha may have glitched my form in some way. My form was working perfectly fine, but I noticed I got two spam submissions in my inbox so I decided to test out the Netlify captcha first. I added data-netlify-recaptcha="true"
to <form>
and deployed it. I realized I forgot to add it to an empty div element, but while working on that, decided to use a honeypot instead.
I set up the honeypot as directed in the Netlify docs, but it didn’t work. I then noticed none of my manual form submissions (filling out the form on my website) were registered in Netlify (the form redirects upon submission but is not actually submitting). Not only that, many of the existing (pre-all of this) form submission titles became blank:
I reverted the code and tested it again but the form still didn’t work. I published an older deploy hoping that’ll fix it, but it didn’t. I’ve just tried pushing my code again and that’s why you see the form submission titles are back in the image. However, manual form submissions are still not being delivered. Spam submissions are still coming in though.
New info: I’m also reading about a hard bounce list and hoping my email isn’t a part of that (contact@auditbycherie.com). Thank you!
@cherieodu The ‘hard bounce’ list would be related to receiving notifications to your own email, it would not relate to the form itself receiving submissions.
I tested your form but didn’t reply as I couldn’t see it submitting to Netlify’s standard form handling, I could only see it submitting to a custom function, is that correct?
@nathanmartin Hi! Thank you for testing the form. To clarify, the form does include the netlify
attribute, which should enable Netlify’s standard form handling. The onsubmit
function (handleFormSubmit(event)
) is intended only to enhance the user experience and should not interfere with the actual submission to Netlify.
The form was working perfectly earlier today before I tested a honeypot and captcha implementation, which I’ve since removed. I’m wondering if there’s something else in my current setup that might be causing the form to bypass Netlify’s form handling.
I’m open to any feedback or suggestions you might have to troubleshoot this further. If there’s anything specific I should check, update or provide, please let me know!
@cherieodu The netlify
attribute doesn’t imbue a form with any behavior, it marks it for detection by Netlify’s post-processing and effectively whitelists it for future submissions (e.g. They become aware that you have a form called X with Y fields).
You need to ensure your site performs a POST to a static route of your website, either directly via a standard form submission or AJAX.
I don’t see your site doing that.
You can confirm it yourself by checking the network tab of your browser:
I see:
- It first makes a call to
https://api.ipify.org/?format=json
(Presumably to acquire the IP address of the person making the submission)
- It then performs a POST to
https://auditbycherie.netlify.app/.netlify/functions/sendConversionEvent
(This is the custom function I’m referring to)
- The page then navigates to
https://auditbycherie.netlify.app/form-received.html?fbConvEventSent=true
All of this behavior is caused by your /scripts/facebookConversionAPI.js
file:
https://auditbycherie.netlify.app/scripts/facebookConversionAPI.js
So the reason you’re not getting the submissions in the Netlify UI is because nothing is submitting to Netlify.
See the applicable documentation here for submitting your form with AJAX:
https://docs.netlify.com/forms/setup/#submit-html-forms-with-ajax
@nathanmartin I appreciate it, thank you! I reviewed my code and realized I forgot to make a post request after my FB conversion event had taken place. I’ve now made the post request and sent the event afterwards so it works perfectly now. I appreciate your help!