# Nuxt forms not working

**URL:** <https://answers.netlify.com/t/nuxt-forms-not-working/96421>\
**Category:** Support\
**Tags:** netlify-forms, nuxt\
**Created:** [July 10, 2023, 7:05pm UTC](https://answers.netlify.com/t/nuxt-forms-not-working/96421 "2023-07-10T19:05:59Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![coreysmaller](https://avatars.discourse-cdn.com/v4/letter/c/c0e974/32.png) [@coreysmaller](https://answers.netlify.com/u/coreysmaller)\
**Post date:** [July 10, 2023, 7:05pm UTC](https://answers.netlify.com/t/nuxt-forms-not-working/96421/1 "2023-07-10T19:05:59Z")

</div>

I have had form trouble in the past with Gatsby sites and thought I had it all figured out however now I am writing Nuxt sites and suddenly my forms don’t work.

first: my main sites form worked when it was just a Vue/Vite site but now that it is a Nuxt site the forms don’t work anymore:  
site: [https://unrivaled-gelato-e3b6dd.netlify.app/contact](https://unrivaled-gelato-e3b6dd.netlify.app/contact)

the form data being submitted is correct and has the form name in the POST data and I get a 200 return with no errors.

I have a static form in public/ content\_static.html:

```auto
<html>
  <form name="m8EnduranceContact" netlify netlify-honeypot="bot-field" hidden>
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
    <input type="hidden" name="form-name" value="m8EnduranceContact" />
  </form>
</html>

```

when I did that Netlify saw the form name but no submissions go through. I also checked spam just to be sure.  
here is the form with primevue components:

```auto
<form
    name="m8EnduranceContact"
    method="POST"
    netlify
    netlify-honeypot
    class="flex flex-wrap w-full p-3 gap-3"
    @submit.prevent="handleSubmit"
  >
    <div class="flex w-full">
      <h3>Contact Us</h3>
    </div>
    <div class="w-full">
      <input type="hidden" name="form-name" value="m8EnduranceContact" />
      <div class="field flex flex-column">
        <label for="name" class="required">Name</label>
        <InputText id="name" v-model="v$.name.$model" name="name" class="w-6" />
        <div v-for="error of v$.name.$errors" :key="error.$uid" class="input-errors">
          <div class="p-error">{{ error.$message }}</div>
        </div>
      </div>

      <div class="field flex flex-column">
        <label for="email" class="required">Email</label>
        <InputText id="email" v-model="v$.email.$model" name="email" class="w-6" />
        <div v-for="error of v$.email.$errors" :key="error.$uid" class="input-errors">
          <div class="p-error">{{ error.$message }}</div>
        </div>
      </div>
      <div class="field flex flex-column">
        <label for="message" class="required">message</label>
        <textarea id="message" v-model="v$.message.$model" name="message" class="w-6"></textarea>
        <div v-for="error of v$.message.$errors" :key="error.$uid" class="input-errors">
          <div class="p-error">{{ error.$message }}</div>
        </div>
      </div>
      <Button id="save_btn" type="submit" label="Send" :disabled="v$.$invalid" class="button" />
    </div>
  </form>

```

the handleSubmit function that I changed to match the examples :

```auto

const handleSubmit = (event) => {
  event.preventDefault();

  const myForm = event.target;
  const formData = new FormData(myForm);
  fetch('/', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams(formData).toString(),
  })
    .then(() => doToast())
    .catch((error) => alert(error));
};

```

Nothing worked so…  
I checked out the NuxtToolbox here [toolbox](https://www.netlify.com/blog/netlify-feature-toolbox-template-for-nuxt.js/)

deployed on Netlify in this repo and enabled form detection:

[https://thriving-malabi-543f51.netlify.app/](https://thriving-malabi-543f51.netlify.app/)

This form works as expected. So I copy/pasted that form directly into my repo and changed the form name to “motive” to prevent collision. Also made it a component instead of sitting directly on the page itself and put it on the index page. When I pushed my code netlify still did not see the form and any form subs don’t go through. GRRRRRR

---

<div class="post-metadata">

**Author:** ![Melvin](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/melvin/32/23606_2.png) [@Melvin](https://answers.netlify.com/u/Melvin)\
**Post date:** [July 11, 2023, 10:40am UTC](https://answers.netlify.com/t/nuxt-forms-not-working/96421/2 "2023-07-11T10:40:50Z")

</div>

Thanks for reaching out!

We have a Support Guide on common form issues to help with troubleshooting:

> [@\[Support Guide\] Form problems, form debugging, 404 when submitting](https://answers.netlify.com/t/support-guide-form-problems-form-debugging-404-when-submitting/92):
>
> Last reviewed by Netlify Support in July 2025 sparkles [AskNetlify’s](https://docs.netlify.com/ask-netlify/) Version sparkles Where can I check form submissions on my site? Copy the prompt above and paste it into [AskNetlify](https://docs.netlify.com/ask-netlify/), and it’ll break down this info. You can also ask clarifying questions. Still need help? No problem! We’re happy to clarify. Last reviewed October 2024 Please give these debugging tips a try before making a new post. If none of the suggestions work, please include the requested information that we request…

Could you review the guide to see if that helps with resolving the issue?

Additionally, I found this forum post with a similar issue that has a solution that may help resolve this issue:

> [@Form in Nuxt 3 somehow not detected by Netlify](https://answers.netlify.com/t/form-in-nuxt-3-somehow-not-detected-by-netlify/89109):
>
> Hello, site in question is [here](https://doktorzamekcz.netlify.app/opravy-dveri-zabezpeceni), form at the bottom above footer. The project is a static HTML render using Nuxt 3 and the form element contains the netlify attribute (also tried data-netlify). According to docs this attribute should be removed when Netlify correctly detects the form, and since it is not, I guess the problem is somewhere around the detection itself. I’ve also tried adding the hidden field even though the form is static HTML, but to no effect. The form doesn’t show at all in the…

Also note, that I’m not seeing the HTML in the [public folder](https://github.com/csmaller/motive8/tree/main/public) could you double check to ensure it’s there?

---

<div class="post-metadata">

**Author:** ![coreysmaller](https://avatars.discourse-cdn.com/v4/letter/c/c0e974/32.png) [@coreysmaller](https://answers.netlify.com/u/coreysmaller)\
**Post date:** [July 11, 2023, 2:49pm UTC](https://answers.netlify.com/t/nuxt-forms-not-working/96421/3 "2023-07-11T14:49:26Z")

</div>

oh man this little curve ball! I did not know it would be in the build generate. Another lesson learned. this worked and should be somewhere in the Nuxt README for future form users. Thank you Melvin