Netlify doesn't recognize my Form - Vue.js

[ChenBr]

Hello,
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>
</form>

My Website:

PsyChen - PsychoPy Experiments

Error on submit:

# This psychen.dev page can’t be found
No webpage was found for the web address: **https://psychen.dev/**
HTTP ERROR 404

Any help would be appreciated,
Thanks!

[nathanmartin]

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

[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 this section:

@Dennis

If you’re using a pure javascript form or Server Side Rendering instead, this additional step is required:

• You still need to include an HTML form that meets the criteria above, including all the inputs with the same names as the JavaScript form. This is required because we parse HTML to find forms during your deploy - but we don’t try to parse javascript files. This means if you are using any framework which create HTML elements using JavaScript during the render, you’ll still need to include an actual HTML file that includes all of the form details in it, including all possible inputs that you want to use. For a working example using React that you can generalize to other frameworks from, check out this blog post .

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.

[ChenBr]

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.

Chen.

[SamO]

Hi @ChenBr ,

Thanks for confirming that you found your solution.