Netlify doesn't recognize my Form - Vue.js

As my title states, I cannot make Netlify forms work with my form.
I followed many forum threads and searched online, and I couldn’t make it work.

I tried adding all the attributes, adding hidden input fields, using the example form from the docs, and verifying all my settings were set correctly. Nothing seems to work.

I am using Vue as my framework.

My form:

<form name="contact" method="POST" netlify-honeypot="bot-field" data-netlify="true">
  <input type="text" name="name" placeholder="Name" required />
  <input type="email" name="email" placeholder="Email" required/>
  <textarea type="text" name="text" placeholder="Message" required></textarea>
  <button type="submit"> Submit </button>

My Website:

Error on submit:

# This page can’t be found
No webpage was found for the web address: ****

Any help would be appreciated,

@ChenBr When you say you’ve read various forum threads, have you read this one?

Specifically this section:

Since you mention using Vue, my guess is that your pages are being client side rendered and thus that there is no HTML form within your HTML file/s for Netlify to have discovered during their post build processing.

For example your /index.html looks like this:

There is no <form> there at all obviously, as it’s being generated at runtime via the Vue code.

As mentioned in the text from that thread, you will need to have a HTML file in the build output that contains a version of the form, so that Netlify can detect it.

1 Like

I actually read the thread you posted, and I completely missed this part. I was probably swamped by the wall of text that I didn’t notice it at all.

I added the form into my index.html file with a hidden attribute. It works perfectly.

@nathanmartin, Thank you very much! I appreciate it.


Hi @ChenBr :wave:t6: ,

Thanks for confirming that you found your solution.