Netlify form submission using fetch in Nuxtjs

Hey there,

I am using netlify-forms in my Nuxtjs app. I am submitting the form using fetch() from /contact page.
Here is my JS code.

let data = {
        name: this.name,
        email: this.email,
        subject: this.subject,
        message: this.message,
        "form-name": "contact"
      };


fetch("/contact", {
            method: "POST",
            headers: {
              "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
            },
            body: this.encode(data)
      })
        .then(data => console.log(data))
        .catch(err => console.error(err));

The encode function from here.

encode (data) {
      return Object.keys(data)
        .map(
          key => `${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`
        )
        .join("&");
    }

I am getting 304 status and the form is not submitting.
Please help!

Hi @ishaan005, @divya made a working example of using Netlify forms with Nuxt.js, you can find it at https://github.com/shortdiv/netlify-nuxt-forms . I recommend that you check that out and then let us know if you still need help. Thanks.

1 Like

Hey, what will be the form action if Iā€™m submitting form from /contact page and not from / ?

Hi, @ishaan005.

Try making the action the same as the page where the form appears in most cases. If you have any issues with that configuration, please let us know.

Well, it works when I used '/' as my action in the fetch() method. Here is the code if someone wants -

fetch("/", {
        method: "POST",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        body: this.encode({ "form-name": "contact", ...data })
      })
        .then(data => console.log(data))
        .catch(err => console.error(err));

Other code remains the same as in the question.

1 Like

thanks for sharing, @ishaan005!