Hi everyone, I’m using Nuxt3 and I’m using the Netlify form, but it’s not submitting even though I’m not getting any error messages.
Site name : sprightly-pika-e45d03
here my template code :
<form @submit.prevent="submitForm" name="contact-form" data-netlify-recaptcha="true" data-netlify="true" data-netlify-honeypot="bot-field">
<input type="hidden" name="form-name" value="contact-form" />
<div>
<input type="text" v-model="name" name="name" id="exampleInput7" placeholder="Nom, prénom">
</div>
<div>
<input type="email" name="email" v-model="email" id="exampleInput8" placeholder="Email">
</div>
<div>
<textarea name="message" v-model="message" id="exampleFormControlTextarea13" rows="5" placeholder="Message"></textarea>
</div>
<div v-if="showPopup" id="popup" :class="{ 'opacity-100': showPopup, 'opacity-0': !showPopup }">
<p v-if="isEmailSent">E-mail envoyé avec succès !</p>
<p v-else>Erreur lors de l'envoi de l'e-mail.</p>
</div>
<div data-netlify-recaptcha="true"></div>
<button type="submit">Envoyer</button>
</form>
and here my method to submit the form :
methods: {
createFormDataObj(data) {
const formData = new FormData();
for (const key of Object.keys(data)) {
formData.append(key, data[key]);
}
return formData;
},
submitForm() {
const data = {
"form-name": "contact-form",
"name": this.name,
"email": this.email,
"message": this.message
}
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams(this.createFormDataObj(data)).toString()
})
.then(() => {
this.isEmailSent = true;
this.name= "",
this.email = "",
this.message = "",
this.showPopupFunc();
})
.catch(error => alert(error))
},
showPopupFunc() {
this.showPopup = true;
setTimeout(() => {
this.hidePopup();
}, 3000);
},
hidePopup() {
this.showPopup = false;
},
},
During my fetch, I enter the “then” block and not the “catch” block, but when I go to my Netlify interface in the form section, no email is detected.
My form seems to be detected correctly by Netlify, but it is not retrieving any emails. Here is a screenshot of my dashboard in the “form” section, as well as the logs for the post-processing part.
Post processing logs :
12:11:18 PM: Starting post processing
12:11:18 PM: Post processing - HTML
12:11:18 PM: Processing form - contact-form
12:11:19 PM: Detected form fields:
- name
- message
12:11:19 PM: Post processing - header rules
12:11:19 PM: Post processing - redirect rules
12:11:19 PM: Post processing done
12:11:19 PM: Section completed: postprocessing
12:11:20 PM: Site is live 