Netlify form not being detected by build

So I have used Netlify forms a lot in the past and have never run into this issue, in fact ive even tried copying the exact form from other repository and still cant get the Netlify build to detect our contact form for our site. Hoping to get some feedback as to what may be going wrong. Here is a Link to a repo containing the file that the page is on: https://github.com/dml0031/NetlifyForm/tree/main

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, your form name as it exists in the UI, and a link to your live form. :slight_smile:

Unfortunately that guide and forums were the first place I looked and ive tried almost all of the suggestions I found… not sure what else to try.

The Form name is just “contact” and a live link to the form is: https://www.fetchmealcohol.com/contact-us

Hi, @itsjustdylan. The explanation here is covered in the JavaScript forms documentation. Quoting that page:

Our buildbots find your forms by parsing the HTML of your site when the build completes. This means that if you’re using JavaScript to render a form client-side, our buildbots won’t find it in the pre-built files. You can work around this:

  • Create a hidden HTML form with the data-netlify="true" attribute or a netlify attribute and input fields with name attributes to match the inputs of your JavaScript-rendered form. You need to apply the same work around if you want to use our reCAPTCHA 2 integration, and create a div element in the hidden HTML with the data-netlify-recaptcha="true" attribute.
  • Add a hidden input to the JavaScript-rendered form or JSX form:
    <input type="hidden" name="form-name" value="name_of_my_form" />
    

Your site does not have an HTML form:

$ curl -s https://www.fetchmealcohol.com/contact-us | grep -i '<form' || echo "not found"
not found

Your site’s form only exists once the client-side javascript creates it at browse time. This means the build system never sees it and there is no backend handler created to receive the form submissions.

The solution for this is found above. To summarize that solution, you copy the form from the browser once the client-side javascript renders it, add the required changes above, and then save the content into a static file which gets added to the site. Now that static HTML file contains the HTML form and the build system will create a form submission handler.

Note, that file doesn’t ever need to be used or viewed by people visiting your site. You can even make a redirect rule to force that file to 404 if someone guesses the URL. The only requirement is:

  • There must be an HTML form in the required format in the site’s publish directory after the build completes.

If there are other questions about this, please let us know.