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