Nuxt 3 submit form results in 404

Support
,
1

Hi!

I’m trying to migrate from Nuxt 2 to Nuxt 3 and am having problems with the Netlify Forms. The setup is very similar to Nuxt 2 but I keep getting 404’s. I’m sure I’m missing something obvious but I have been stuck on this for way too long and need a helping hand :wink:

And if anyone knows how to properly declare formData without using any, that would be a real treat!

https://aquamarine-biscuit-625484.netlify.app/kontakt/

        <form
          name="contact-form-3"
          method="POST"
          data-netlify="true"
        >
        <input type="hidden" name="form-name" value="contact-form-3" />
         
         [ form fields ]
 
        <button
           type="submit"
           @click.prevent="submit()"
         >
             Submit
        </button>
    </form>




const submit = () => {
  const formData: any = new FormData();

  Object.keys(values).forEach((key) => {
    formData.append(key, values[key]);
  });

  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(formData).toString()
  })
    .then((res) => {
      console.log(res);
    })
    .catch((error) => console.log(error));
};
2

Hiya, sorry you are having trouble getting your forms to work.

This Support Guide is the first port of call to debug any forms issues. Please start here and work through these resources!

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still having problems, please provide more information such as what you have already tried, and a link to your live form the link you’ve attached is broken.

3

It turns out that it is essential building the formData from the form itself and not just populating it with the values. After changing to this approach the forms does not get rejected anymore and all is hunky dory. I suspect that the form was missing a lot of data.

My finished solution looks like this (sorry for the any):



const form = ref();

const submit = () => {
  const formData: any = new FormData(form.value);

  useFetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(formData).toString()
  })
    .then((res) => {
       await navigateTo('/thank-you')
    })
    .catch((error) => {
      console.log('Error submitting the form');
    });
};
4

Thanks for coming back and sharing your solution!