Netlify form submission using fetch in Nuxtjs

Support
,
1

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!

2

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

1 Like
3

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

4

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.

5

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
6

thanks for sharing, @ishaan005!

1 Like