Netlify Forms - not receiving verified submissions in static Nuxt app

Support
,
1

Hi

I’m having trouble receiving verified submissions with my statically generated Nuxt app, Netlify discovers that there’s a form and that I’ve enabled the honeypot protection but whenever I try to test it and send a message using my form, nothing shows in either the verified OR spam submissions.

Weird thing is that I have already received an actual spam message and this was the only thing captured correctly by Netlify:

image
image1253×603 20.2 KB

I’ve tried it with and without the action attribute, I’ve added form-name hidden field and my logic in the sendMessage method is executed correctly so I don’t see what I’m missing here, would really appreciate some help!

Other threads with the same issue but no solution :frowning:

Link to live version of the form: Contact

This is what my form looks like:

          <form
            name="contact"
            action="/"
            method="post"
            data-netlify="true"
            data-netlify-honeypot="bot-field"
            @submit.prevent="sendMessage">
            <input type="hidden" name="form-name" value="contact" />            
            <div class="flex flex-wrap mb-8 -mx-3">
              <div class="w-full lg:w-1/2 px-3 inline-flex space-y-5 flex-col">
                <div class="w-full">
                  <label for="email" class="flex justify-between">
                    <span class="label">E-mail</span>
                    <span>
                      <span
                        v-if="$v.form.email.$error && !$v.form.email.required"
                        class="text-error">
                        E-mail is verplicht
                      </span>
                      <span
                        v-if="$v.form.email.$error && !$v.form.email.email"
                        class="text-error">
                        E-mail is ongeldig
                      </span>
                    </span>
                  </label>
                    <input
                      id="email"
                      name="email"
                      v-model.trim="$v.form.email.$model"
                      class="input"
                      :class="{ 'input-error': $v.form.email.$error }"
                      :disabled="loading"
                      type="email"
                      placeholder="E-mail">
                </div>
                <div class="w-full">
                  <label>
                    <span class="flex justify-between">
                      <span class="label">Bedrijf</span>
                      <span class="label-optional">Optioneel</span>
                    </span>
                    <input
                      v-model="form.company"
                      name="company"
                      class="input"
                      :disabled="loading"
                      type="text"
                      placeholder="Bedrijf">
                  </label>
                </div>
                <div class="w-full">
                  <label>
                    <span class="flex justify-between">
                      <span class="label">Telefoon</span>
                      <span class="label-optional">Optioneel</span>
                    </span>
                    <input
                      v-model="form.phone"
                      name="phone"
                      class="input"
                      :disabled="loading"
                      type="text"
                      placeholder="Telefoon">
                  </label>
                </div>
              </div>
              <div class="w-full lg:w-1/2 px-3 mb-4">
                <label for="message" class="flex justify-between">
                  <span class="label">Bericht</span>
                  <span
                    v-if="$v.form.message.$error && !$v.form.message.required"
                    class="text-error"
                  >
                  Bericht is verplicht
                  </span>
                </label>
                  <textarea
                    id="message"
                    name="message"
                    v-model.trim="$v.form.message.$model"
                    class="input h-full"
                    :class="{ 'input-error': $v.form.message.$error }"
                    :disabled="loading"
                    type="text"
                    placeholder="Bericht..."></textarea>
              </div>
            </div>
            <div class="flex justify-center items-center ">
              <button
                class="text-xl"
                :disabled="loading"
                :class="{ 'btn-disabled': loading, 'text-link-growing': !loading }"
                type="submit">Verzenden</button>
            </div>
          </form>

sendMessage() {
      this.$v.$touch()

      const invalid = this.$v.$invalid

      if(!invalid) {
        this.loading = true

        // Send emails
        this.$axios
          .$post('/.netlify/functions/contact-mail', {
            email: this.form.email,
            phone: this.form.phone,
            company: this.form.company,
            message: this.form.message,
            language: this.currentLanguage
          })
          .then(() => {
            this.$v.$reset()
            this.form = {
              email: '',
              phone: '',
              company: '',
              message: '',
            }
            this.$toasted.show("Bericht succesvol verzonden", { type: 'success' })
            this.loading = false
          })
          .catch((error) => {
            this.$toasted.show("Oops! Er is een fout opgetreden. Gelieve opnieuw te proberen.", { type: 'error' })
            this.loading = false
          })
      }
    }

Kind regards
Woet

2

Hi @Woet

I notice the sendMessage function that handles the form submit is posting to a function /.netlify/functions/contact-mail. This indicates you are not indenting to use Netlify Forms, but are rather handling submissions in your own function which (if the function name is anything to go by) sends that message to you via email.

3

Hi @coelmay

Thanks for getting back to me, I followed the explanation described here in the docs: Forms setup | Netlify Docs. I’ve extended my method so I can POST an application/x-www-form-urlencoded body to the Netlify forms, but I’m still not receiving any verified submissions.

The encoded string body looks correct & the first POST request does run succesfully but nothing is submitted when I check. My first guess is something is wrong with the endpoint but I can’t find anything in the documentation about API endpoints to create a new submission? Get started with the Netlify API | Netlify Docs

data: () => ({
    form: {
      email: '',
      phone: '',
      company: '',
      message: '',
    },
    loading: false,
  }),

    encode(data) {  
        return Object.keys(data)
        .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        .join("&");
        
        return formData
    },
    sendMessage() {
      this.$v.$touch()

      const invalid = this.$v.$invalid

      if(!invalid) {
        this.loading = true

        // Capture form submission
        const formData = this.encode(
        {'form-name': this.$refs.contactForm.getAttribute('name'),
            ...this.form })

        const formCaptureConfig = {
          header: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }

        console.log(formData)

        this.$axios
        .$post('/', { body: formData }, formCaptureConfig)
          .then(() => {
            // Send emails
            console.log('form should be sent to Netlify so now my other function runs')
            this.$axios
              .$post('/.netlify/functions/contact-mail', {
                email: this.form.email,
                phone: this.form.phone,
                company: this.form.company,
                message: this.form.message,
                language: this.currentLanguage
              })
              .then(() => {
                this.$v.$reset()
                this.form = {
                  email: '',
                  phone: '',
                  company: '',
                  message: '',
                }
                this.$toasted.show("Bericht succesvol verzonden", { type: 'success' })
                this.loading = false
              })
              .catch((error) => {
                this.$toasted.show("Oops! Er is een fout opgetreden. Gelieve opnieuw te proberen.", { type: 'error' })
                this.loading = false
              })
          })
          .catch((error) => {
            this.$toasted.show("Oops! Er is een fout opgetreden. Gelieve opnieuw te proberen.", { type: 'error' })
            this.loading = false
          })
      }
    }
4

What happens when you send new FormData(form) as the body?

5

Couldn’t get this to work properly, so I’ve decided to just not use Netlify Forms for now and use normal API requests to handle form submissions.