Unable to Submit Forms with Vue3 and Netlify

Support
,
1

I’ve looked at a few other posts and they are similar but I still cannot get mine to work. I have three other sites with forms on netlify I did in react/Gatsby and they work. This one is Vue3 and I get a 404 error after form submission. I don’t see the form submitted on my netlify dashboard.
The error is a 404: Page Not Found and its the same page as the contact page.

added a _redirect page to public folder which handled the site redirect breaking.

Tried: changed axios to fetch. Also used a raw netlify form without any ajax call. post URL changed to “/” as well.

site:
https://unrivaled-gelato-e3b6dd.netlify.app/contact

<form
    id="myForm"
    name="motive8contact"
    method="post"
    data-netlify="true"
    data-netlify-honeypot="bot-field"
    class="flex flex-wrap w-full"
    @submit.prevent="handleSubmit">
  >

form handler:

const handleSubmit = async (e: Event) => {
  error.value = false;
  const axiosConfig: AxiosRequestConfig = {
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  };

  error.value = false;
  await axios
    .post(
      location.href,
      encode({
        'form-name': e.target.getAttribute('name'),
        ...form.value,
      }),
      axiosConfig,
    )
    .then((response) => {
      if (!error.value) doToast();
    })
    .catch((e: Error) => {
      error.value = true;
      doToast();
    });
};

/**
 *
 * @param data
 * encode the query params
 */
const encode = (data: FormInterface) => {
  const formData = new FormData();

  for (const key of Object.keys(data)) {
    formData.append(key, data[key as keyof FormInterface]);
  }

  return formData;
};
2

Hi, it would be helpful if you shared your repo? Did you also check out the guide below?

Also can you specify more about the issue you are experiencing? I was able to submit a submission in the form.

1 Like
3

Hey SamO thank you. I thought this question didn’t go through so I made another one earlier. Yes I created a static form in my public folder and it worked! NOTE: make sure not to name that html page the same as the contact page or else on refresh it will error out)

Thanks!

1 Like
4

Hi @coreysmaller thanks so much for chiming in and sharing this with the community! (: