Home
Support Forums

Issues with Netlify Form

Website: https://edielton-dantas.me/contact

Hello everyone!

I started playing with Netlify’s Form today and I even managed to make it work with relative ease. However, I decided to 1) rename the form fields and 2) use Ajax instead of the custom page post.

This is how the form submission looks like now:

    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()
        }
      }
    },

After I pushed these changes to the repo, the form submissions simply stopped working. I suspected that this could be related to my changing the form fields. I thought it would be a good idea to remove the form and start it fresh.

Can you tell me what’s wrong and how can I fix it?

Okay, I just realized one thing which I think is worth sharing: if I try to access the /contact route directly from the browser, I get a 404 error. If I try accessing this route from the App navigation, it works fine.

I don’t get the 404 for the other routes. Alright fellas, looks like this could be an issue with my code while the page is being pre-rendered.

I found the problem! As I wanted to validate the form before submitting it, I ended up using vuelidate and this is how I configured it on my nuxt.config file:

  plugins: [
    { src: '~/plugins/vuelidate.js', mode: 'client' },
    { src: '~/plugins/vue-flash-message.js', mode: 'client' },
  ],

With this configuration, vuelidate won’t be loaded on the server-side which was the source of my issue. That’s why I was unable to recreate my forms: the /contact page was not being rendered due to $v being undefined, which caused 500 errors on the server.

The setup above had to be changed to:

  plugins: [
    { src: '~/plugins/vuelidate.js'  },
    { src: '~/plugins/vue-flash-message.js', mode: 'client' },
  ],

If you omit the mode, Nuxt will load the plugin both on the client as well as on the server-side.