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" />