AJAX form from Nuxt results in 404

Support
1

Hey folks,

This seems be be a common issue but I’ve followed the docs - tried several things and I just can’t seem to get the form to submit via nuxt. It’s a ssr: false (Spa) site. Not sure what I’m doing wrong here but I get a 404 - and then forwarded on to the thanks page. Page in question can be found here:

https://oaaa.netlify.app/contact

Form at the time of posting looks like:

        <form
      name="contact-us"
      action="/thanks/"
      method="post"
      netlify
      data-netlify="true"
      data-netlify-honeypot="bot-field"
      class="grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-8"
      @submit.prevent="submit"
      enctype="multipart/form-data"
    >
      <input type="hidden" name="form-name" value="contact-us" />
      <div>
        <label
          for="first_name"
          class="block text-sm font-medium text-gray-700"
          >First name</label
        >
        <div class="mt-1">
          <input
            id="first_name"
            type="text"
            name="first_name"
            autocomplete="given-name"
            class="py-3 px-4 block w-full shadow-sm focus:ring-red-500 focus:border-red-500 border-gray-300 border rounded-md"
          />
        </div>
      </div>

…

methods for submitting are:

  methods: {
encode(data) {
  return Object.keys(data)
    .map(
      (key) =>
        encodeURIComponent(data[key].name) +
        '=' +
        encodeURIComponent(data[key].value)
    )
    .join('&')
},

submit(e) {
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: this.encode([...e.target.elements]),
  })
    .then(() => {
      this.$router.push({ name: 'thanks' })
    })
    .catch((error) => alert(error))
},

},

2

Hey there,
Sorry for the long delay in responding here! I just created a test submission to your form and it seemed to go through for me. Maybe you’ve resolved this since writing in?

4

Hey Jen,

Yeah, we figured it out. The configuration on Nuxt is pretty confusing as the nomenclature doesn’t really make sense to us. It might be helpful in any Nuxt documentation on Netlify to ensure they don’t have

target: static
AND
ssr: false

They just need to drop the ssr:false as that will prevent the html from being statically generated for your bots to see. That config combo would make ME think that a static site would be generated for client side only but that, apparently, is not how it works :slight_smile:

1 Like