Support Forums

Contact form with VueJS 3 error 404 on submit

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.

      <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?

  <div class="contact">
    <h1>Contact Me</h1>
        <input v-model="name" name="name" />

        <input v-model="email" name="email" />

        <textarea v-model="message" name="message"></textarea>

        <button type="submit">Send</button>

import { ref } from "vue";

export default {
  setup() {
    const name = ref("");
    const email = ref("");
    const message = ref("");

    return { name, email, message };

.contact {
  padding: 15px 30px;
  border-radius: 4px;
  margin: 50px auto;
  max-width: 600px;
form {
  margin: 10px;
  max-width: 1200px;
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;

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

Any idea how to solve my issue?

Hi @dumas,

Have you gone through this guide:

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