Netlify Forms returns 404, loading using JavaScript

[helixre]

Briefly summarize the issues you have been experiencing.

Hello! We have set up a couple of websites running on Netlify and they are all running fine. The problem is with the new website we’re working on, the form won’t work for some reason. We copied the code from the existing websites, so it should work in theory, correct?

After the submission, we get redirected to the /thanks/ page, but receive a 404 status from the POST request. Inspected request contains values form-name: contact, email: support@helix.re which is the same as on the existing websites.

A couple of differences we have in the implementation is that this website is running on localhost or Netlify as opposed to the existing websites running on Netlify and hosted on a custom domain. The other difference is we use dynamic import to generate the content, i.e. when inspecting source code, the form is not included yet. I read this might be causing issues with Netlify not picking up forms, but then again, we build the existing websites using the same import and they work. Would you be able to give me some pointers what might be going wrong please?

Please provide a link to your live site hosted on Netlify.

https://helix-re-demo.netlify.com/

What have you tried as far as troubleshooting goes? Do you have an idea what is causing the problem?

[fool]

Hiya!

This is the best article to walk through on debugging why your form doesn’t work:

[Support Guide] Form problems, form debugging, 404 when submitting

Last reviewed August 2023 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the information that we request at the end of this guide in the new post that you create. Thank you! Why use Forms? Forms are one of the most useful parts of modern websites because they allow us to capture input from our visitors. There are many ways to use forms: contact forms, such as contact forms and sign-up forms. Seeing as there are many types of fo…

Specifically a 404 probably means we did not find a form with that action configured (/thanks) or a different name= parameter in the HTML version of the form that we detect and key off of for use at deploy time.

So hopefully that’ll help you pinpoint the problem and get it fixed, but let us know if not.

[helixre]

Hey! Thank you so much! Yes, I was able to figure out the issue and fix it. It appears the issue was with dynamic loading, as soon as I removed it, the form started working. The confusing part for me was that the same setup worked for existing forms, but wouldn’t pick up new forms. Either way, all is good again. Thank you again.