Hi all, I am trying to set up an email newsletter form. I want to update the DOM (success message), without a page reload. At the same time, on the backend, a POST request is issued to add this email to my EmailOctopus list (via their API). My site is built with Gridsome (Vue Static Builder). To p…

Thank you so much for your response! I do apologize. I was able to find the answer yesterday. Here is what works for me. <template> <form name="add-subscriber" id="myForm" method="post" data-netlify="true" data-netlify-honeypot="bot-field…

Hey @cfjedimaster , Glad to hear you sorted out your Vue form! To make sure I understand, the next issue you raised is not about Vue, but about submitting a vanilla Javascript form using fetch. Is that right? Let us know and we’ll dig in.

Correct - it isn’t a Vue issue, but an “Ajax submit on Netlify” issue. I spoke with Brian Rinaldi and he mentioned he saw this as well. To test, post with forn name equal to Something. It will fail. Build a simple form that just does a regular post and uses the same name. Now the fancy Ajax one wil…

Hi, @cfjedimaster , this sounds a bit like the “HTML form must exist” requirement mentioned here . Quoting: If you’re using a pure javascript form instead, this additional step is required: You still need to include an HTML form that meets the criteria above, including all the inputs with the same…

Close, but I am using an HTML form. Here it is: cfjedimaster/NetlifyTestingZone/blob/master/form3.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Special Contact Form</title> </head> …

Hey @cfjedimaster , Since this is not about Vue, but about submitting a form using fetch, I don’t think it’s useful to test with Vue as you’re doing in the first example. This example works for me on first submit, without sending a non-fetch form first: <!DOCTYPE html> <html lang="en"> <head> …

Fascinating - it did. Now - while I don’t think my Vue code is perfect, I honestly didn’t expect an issue there. And oddly, by using a new name and it working, maybe it’s something else. Doing a test now.

Also - if you are copying the form data with FormData(myForm), you are not passing a value called form-name with the name of the form. I thought that was required? EDIT: Never mind - forgot that the hidden form field is added automatically. AHAH! That’s getting me somewhere. When I view source on …

Hey @cfjedimaster , We just tested NetlifyTestingZone/form3.html at master · cfjedimaster/NetlifyTestingZone · GitHub and the submission was successfully received. Please let us know if you’re seeing something different.

That’s because I updated it with a fix. :slight_smile: Can you please test with the original code where @submit is used in the form tag? I believe this breaks the regex (I assume) you look when scanning for netlify forms.

Netlify Forms with Vue @submit.prevent="handleSubmit"

Support

cfjedimaster October 8, 2020, 7:06pm 15

Nope, it still won’t work for me. I noticed you post to /. I tried that as well and it doesn’t help. I also notice you aren’t encoding your formdata - I’ll give that a shot next.

Topic		Replies	Views
Vue form questions Support netlify-forms	8	2764	November 5, 2020
Netlify Forms: Page Not Found 404 on Submit Support netlify-forms	26	10025	September 25, 2024
[Support Guide] Form problems, form debugging, 404 when submitting Support Guides netlify-forms , support-guide	21	65597	July 17, 2019
Netlify doesn't recognize my Form - Vue.js Support deployment , netlify-forms , vuejs	3	1461	March 16, 2023
Forms not working with gridsome Support netlify-forms	21	2768	May 22, 2020

Netlify Forms with Vue @submit.prevent="handleSubmit"

Related topics