I’ve been trouble shooting this problem here and there for the past week or so. The issue that I’m running into is that the form doesn’t work the first time it’s filled out sometimes. It’s not very consistent when it 404s, but when it does it’s usually on first submit. Submitting the form the second time is successful. I’ve tested this through multiple browsers and devices. The inconsistency is puzzling me and I think a second pair of eyes would be helpful.
Thanks in advance!
First submit usually 404s, but is ocassionally successful
I just sent a test submission to your form and it seemed to go through on the first try. I also checked our logs for your form submission path for the last 7 days (though seems like the form has only been up since the 16th?) and am only seeing 200s. That’s not to say that you’re not seeing 404s, but that we do not have a record of them. Next time that happens, could you please let us know what you see the dev console? A screenshot would work. And if you can send an x-nf-request-id, that would also be super helpful. Thank you!
Okay, this is a weird one! I think the issue is that if you navigate to the contact page directly in the browser, you get to the right form… but if you click the “contact” button, you are taken to photos.kaiasuncion.com/contact (note no trailing slash at the end) instead of photos.kaiasuncion.com/contact/ (note the trailing slash at the end). The form at this location does not have a Google recaptcha, so it is never filled out, so the request is not successful. Can you try updating this link to add / at the end?
Could you give us an example that fails with the trailing slash please (if you still have one?) We haven’t seen one and are going to work with some nuxt experts on this next week so if you do have a reproduction case we can check out that would be a great help!
I apologize for the late reply and appreciate all the help that surrounds this community with troubleshooting. You all are the true MVPs.
As mentioned in another post, the form is rendering via javascript. The captcha renders on page loads, but not via vue routing due to the nuaces of how it works.
The fix for this is rendering the form with javascript and in my case I used the nuxt/recaptcha-module for ease of use.
Edit:
I decided to remove this method and use anchor tags <a href="/contact/">contant</a> to navigate to the form page due to unforeseen circumstances. This has seemed to work the most effectively with minimal hiccups and setup. I still receive this error message though: DOMException: Node.appendChild: Cannot add children to a Text
This doesn’t seem to effect the webpage or form submission.
Thank you for sharing your solution with us! This is always helpful, as future Forums members will be able to see what worked if they encounter something similar.
