Nuxt forms not working

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

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:

<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:

<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 :


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

deployed on Netlify in this repo and enabled form detection:

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

Thanks for reaching out!

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

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:

Also note, that I’m not seeing the HTML in the public folder could you double check to ensure it’s there?

1 Like

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

1 Like