# Netlify Forms - not receiving verified submissions in static Nuxt app

**URL:** <https://answers.netlify.com/t/netlify-forms-not-receiving-verified-submissions-in-static-nuxt-app/47796>\
**Category:** Support\
**Tags:** netlify-forms, vuejs\
**Created:** [November 23, 2021, 8:45pm UTC](https://answers.netlify.com/t/netlify-forms-not-receiving-verified-submissions-in-static-nuxt-app/47796 "2021-11-23T20:45:02Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Woet](https://avatars.discourse-cdn.com/v4/letter/w/a5b964/32.png) [@Woet](https://answers.netlify.com/u/Woet)\
**Post date:** [November 23, 2021, 8:45pm UTC](https://answers.netlify.com/t/netlify-forms-not-receiving-verified-submissions-in-static-nuxt-app/47796/1 "2021-11-23T20:45:02Z")

</div>

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](https://global.discourse-cdn.com/netlify/original/3X/3/7/3799e000b6e2a91d28db707ee0f0ad215ebd4d27.png)

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 ☹

- [Nuxt Netlify Form](https://answers.netlify.com/t/nuxt-netlify-form/24507)
- [Form with Nuxt and fetch API returns 200 but no submissions in dashboard](https://answers.netlify.com/t/form-with-nuxt-and-fetch-api-returns-200-but-no-submissions-in-dashboard/34606)

Link to live version of the form: [Contact](https://prioflux.com/contact/)

This is what my form looks like:

```auto
          <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>

```

```auto
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

---

<div class="post-metadata">

**Author:** ![coelmay](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/coelmay/32/24427_2.png) [@coelmay](https://answers.netlify.com/u/coelmay)\
**Post date:** [November 23, 2021, 10:40pm UTC](https://answers.netlify.com/t/netlify-forms-not-receiving-verified-submissions-in-static-nuxt-app/47796/2 "2021-11-23T22:40:35Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Woet](https://avatars.discourse-cdn.com/v4/letter/w/a5b964/32.png) [@Woet](https://answers.netlify.com/u/Woet)\
**Post date:** [November 27, 2021, 1:17pm UTC](https://answers.netlify.com/t/netlify-forms-not-receiving-verified-submissions-in-static-nuxt-app/47796/3 "2021-11-27T13:17:20Z")

</div>

Hi @coelmay

Thanks for getting back to me, I followed the explanation described here in the docs: [Forms setup | Netlify Docs](https://docs.netlify.com/forms/setup/#submit-javascript-rendered-forms-with-ajax). 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](https://docs.netlify.com/api/get-started/#forms)

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

```

```auto
    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
          })
      }
    }

```

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [November 27, 2021, 1:42pm UTC](https://answers.netlify.com/t/netlify-forms-not-receiving-verified-submissions-in-static-nuxt-app/47796/4 "2021-11-27T13:42:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Woet](https://avatars.discourse-cdn.com/v4/letter/w/a5b964/32.png) [@Woet](https://answers.netlify.com/u/Woet)\
**Post date:** [February 26, 2022, 7:54pm UTC](https://answers.netlify.com/t/netlify-forms-not-receiving-verified-submissions-in-static-nuxt-app/47796/5 "2022-02-26T19:54:23Z")

</div>

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.