Contact form with VueJS 3 error 404 on submit

Support
, ,
1

I tried the different debug steps from the support guide but can’t make it works.
Netlify site name. Example: https://optimistic-liskov-c00b5a.netlify.app/

I am implementing a contact form with in my VueJS 3 app using the Netlify contact form. Following the documentation or videos online it sounds easy, just need to add below tags to the form.

<form name="contact" id="myForm" method="post" data-netlify="true" data-netlify-honeypot="bot-field" > <input type="hidden" name="form-name" value="contact" />

But I keep having a Page Not Found error when submitting the form after deployment on Netlify. Below is my full code, what could be wrong?

<template> <div class="contact"> <h1>Contact Me</h1> <form name="contactForm" method="post" data-netlify="true" data-netlify-honeypot="bot-field" > <div> <label>Name</label> <input v-model="name" name="name" /> </div> <div> <label>Email</label> <input v-model="email" name="email" /> </div> <div> <label>Message</label> <textarea v-model="message" name="message"></textarea> </div> <div> <button type="submit">Send</button> </div> </form> </div> </template> <script> import { ref } from "vue"; export default { setup() { const name = ref(""); const email = ref(""); const message = ref(""); return { name, email, message }; }, }; </script> <style> .contact { padding: 15px 30px; border-radius: 4px; margin: 50px auto; max-width: 600px; } form { margin: 10px; max-width: 1200px; } textarea, input { width: 100%; max-width: 100%; margin-bottom: 6px; padding: 10px; box-sizing: border-box; border: 0; border-radius: 20px; font-family: inherit; outline: none; } button { display: block; margin-top: 30px; background: #ff8800; color: white; border: none; padding: 8px 16px; font-size: 18px; } </style>

I also tried to specify enctype="application/x-www-form-urlencoded" in my form

Any idea how to solve my issue?
Thanks!

2

Hi @dumas,

Have you gone through this guide:

3

Ok I see “Though integrating Netlify forms into a plain HTML file is all well and good, integrating it into a single page app like Vue requires additional legwork.” in this guide, I will try the " Chris Fritz’s handy prerender-spa-plugin" thanks

4

Hi,
It finally worked with the solution from the section “Stand-in static forms” creating a fake contact form with similar structure with the one in my Vue app, and making sure that all the fields below are setup in the Vue app form

<form name="ask-question" method="post" data-netlify="true" data-netlify-honeypot="bot-field" > <input type="hidden" name="form-name" value="ask-question" />