Can't make POST calls using Netlify Forms in a Nuxtjs App

Support
1

Hello everyone!

I previously had an issue with Netlify Forms which I ended up solving myself, however, anytime I try to make an Ajax call via fetch, I’m redirected to Netlify’s success page :eyes:

This is the html part:

        <form
          name="contact"
          method="POST"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          class="contact-form"
          @submit.prevent="handleSubmit"
        >
            <!-- content omited for better readability -->
        </form>

This is my javascript:

    async handleSubmit(event) {
      const params = new URLSearchParams([
        ...new FormData(event.target).entries(),
      ])
      this.$v.$touch()
      if (!this.$v.$invalid) {
        try {
          const { status } = await fetch('/', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: params.toString(),
          })

          if (status === 200) {
            this.showSuccessMessage()
            this.resetForm()
          } else {
            throw new Error(status)
          }
        } catch (error) {
          console.error(error)
          this.showErrorMessage()
        }
      }
    },

Thanks in advance everyone!

2

Hi @th3N0m4d,

Have a look at Submit JavaScript-rendered forms with AJAX and notice the ... }).then(() => navigate("/thank-you/")).catch(error ...

Remember, not every around here is a fella either.

3

Hi @coelmay and thanks for your reply!

I think I came across this article (the one you recommended to me) and that’s not exactly what I want to accomplish: I want to 1) validate the form and 2) keep the user within the /contact page.

Am I missing something?

Thanks in advance :slight_smile:

4

@coelmay after a few hours struggling with this issue, I think I found the answer. Please check out the code snippet below:

        <form
          name="contact"
          method="POST"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          class="contact-form"
          @submit.prevent="handleSubmit"
        >
          <!-- Add a hidden field with an input containing the name of the form -->
          <input type="hidden" name="form-name" value="contact" />
       </form>

    async handleSubmit(event) {
      const params = new URLSearchParams([
        ...new FormData(event.target).entries(),
      ])
   }

As you can see, I had to add the name of the form in a hidden field and that did the trick. I believe I might have missed this detail from the docs.

5

Great that you found a solution @th3N0m4d.

For the record, using the Submit HTML forms with AJAX worked perfectly for me (though not using NuxtJS)

<form id="contactForm" name="contact" data-netlify="true">
	<p>
		<label>Your Name: <input type="text" name="name" /></label>
	</p>
	<p>
		<label>Your Email: <input type="email" name="email" /></label>
	</p>
	<p>
		<label>Message: <textarea name="message"></textarea></label>
	</p>
	<p>
		<button type="submit">Send</button>
	</p>
</form>

and

const handleSubmit = (e) => {
	e.preventDefault()
	let myForm = document.getElementById('contactForm');
	let formData = new FormData(myForm)
	fetch('/.netlify/functions/form-post-function', {
		method: 'POST',
		headers: {
			"Content-Type": "application/x-www-form-urlencoded"
		},
		body: new URLSearchParams(formData).toString()
	}).then(() => console.log('Form successfully submitted')).catch((error) =>
		alert(error))
}
document.querySelector("form").addEventListener("submit", handleSubmit);

Submitting the form, logging success message to console, and not redirecting me from the page.

1 Like
6

hey @th3N0m4d - i think what coel is trying to say is that there are actually a lot of people who aren’t men in these forums and on the netlify teams, and we want to make sure not to overlook their contributions :slight_smile:

1 Like
7

Hi @perry! English is not my first language and I thought I could use fellas as I use guys which serves to address both genders.

My comment wasn’t meant to exclude other people really. Thanks for educating me on this though, I’ll try to be more conscious about it from now on.

Have a good day

1 Like
8

thanks for listening, @th3N0m4d ! Appreciate you :slight_smile: