Home
Support Forums

Vue form questions

I have this and my netlify website page says it sees a form but hasnt received anything, i don’t get any kind of submission page successful OR error:

<form class="col-xs-8 col-xs-offset-2"
					name="contactform"
					method="post"
					data-netlify="true"
					netlify-honeypot="bot-field"
					@submit.prevent>

					<input type="hidden"
						name="form-name"
						value="contactform" />
					<p class="hidden">
						<label>Don’t fill this out if you're human: <input name="bot-field" /></label>
					</p>

					<div class="form-group">
						<label for="name">Name</label>
						<input type="text"
							name="name"
							class="form-control"
							id="name"
							placeholder="Robert Paulson">
					</div>

					<div class="form-group">
						<label for="email">Email address</label>
						<input type="email"
							name="email"
							class="form-control"
							id="email"
							placeholder="foo@bar.com">
					</div>

					<div class="form-group">
						<label for="message">Write your message here</label>
						<textarea name="message"
							id="message"
							class="form-control"
							rows="7"
							placeholder="Yeah, well, that's just, like, your opinion, man."></textarea>
					</div>

					<div class="form-group">
						<label class="sr-only"
							for="file">File input</label>
						<input type="file"
							name="file"
							id="file">
					</div>

					<div data-netlify-recaptcha="true"></div>

					<input type="submit"
						name="submit"
						class="btn btn-success" />

				</form>

I realized that the index.html static file I have in the public folder had this with the fron name on the form:

<form name="contactform" action="/thankyou.html" data-netlify-recaptcha="true" data-netlify="true" netlify-honeypot="bot-field" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
<input type="file" name="file" />
<input type="submit" name="submit" />

but I have since fixed it to be “contactform” just as in my app.vue SPA file. It still isn’t doing anything upon clicking submit…

I tried adding this in the methods:

handleSubmit(e) {
	e.preventDefault();
	let contactform = document.getElementById("contactform");
	let formData = new FormData(contactform);
	fetch("/", {
			method: "POST",
			body: formData,
	})
	.then(() => alert("success!"))
	.catch((error) => alert(error));
},

And that gave me the alert(“success!”) result! But…sadly I have no idea if that means it is actually working, or it’s just something local that’s working, because I still haven’t received the submission on my netlify profile…the “fetch” URL needs to be something for netlify, yeah? I don’t see anything about fetch API urls anywhere in the guides, yet i see others talking about functions like this…

Hi, @jwhitty. Our support team can assist with troubleshooting forms.

This Support Guide is the first port of call to debug any forms issues. There are also many other Support Guides for forms - you can find them here: #Netlify-support:support-guides

We also recommend trying to search the forums or look at topics tagged Netlify forms if you haven’t already - it’s likely your question was already asked by someone else!

If you are still not able to resolve the issue after reading that guide, would you please send us the following details?

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form (in case you have a javascript form, we need to literally be linked to the html version you’ve deployed as mentioned above - look for “pure javascript”)
  3. The form name that you’ve set and that shows in our UI
  4. Any errors or logs from the Netlify build logs, dashboard or browser developer console
  5. Description of anything you have tried that did or didn’t help or make things better/worse

I have my form the same way Divya does, before even seeing this post, and mine isnt working at all :frowning:

This is my index.html in the public folder

<form name="contactform" action="/thankyou.html" data-netlify-recaptcha="true" data-netlify="true" netlify-honeypot="bot-field" hidden>
    <input type="hidden" name="form-name" />
    <input type="text" name="name" />
    <input type="email" name="email" />
    <textarea name="message"></textarea>
    <input type="file" name="file" />
    <input type="submit" name="submit" />
  </form> 

And this is my form and the submit method in my app.vue (this is vue3, not nuxt):

<form class="col-xs-8 col-xs-offset-2"
					name="contactform"
					id="contactform"
					method="post"
					action="https://whitt.tech/thankyou.html"
					data-netlify="true"
					netlify-honeypot="bot-field"
					@submit.prevent="handleSubmit">

					<input type="hidden"
						name="form-name"
						value="contactform" />
					<p class="hidden">
						<label>Don’t fill this out if you're human: <input name="bot-field" /></label>
					</p>

					<div class="form-group">
						<label for="name">Name</label>
						<input type="text"
							name="name"
							class="form-control"
							id="name"
							placeholder="Robert Paulson">
					</div>

					<div class="form-group">
						<label for="email">Email address</label>
						<input type="email"
							name="email"
							class="form-control"
							id="email"
							placeholder="foo@bar.com">
					</div>

					<div class="form-group">
						<label for="message">Write your message here</label>
						<textarea name="message"
							id="message"
							class="form-control"
							rows="7"
							placeholder="Yeah, well, that's just, like, your opinion, man."></textarea>
					</div>

					<div class="form-group">
						<label class="sr-only"
							for="file">File input</label>
						<input type="file"
							name="file"
							id="file">
					</div>

					<div data-netlify-recaptcha="true"></div>

					<input type="submit"
						name="submit"
						class="btn btn-success" />

				</form>

This method shows me the alert, but idk where the fetch is coming from, or where the fetch url should b e pointed at since nobody else is using this method in these guides…and it isnt working without it either…

handleSubmit(e) {
				e.preventDefault();
				let contactform = document.getElementById("contactform");
				let formData = new FormData(contactform);
				fetch("/", {
					method: "POST",
					body: formData,
				})
					.then(() => alert("success!"))
					.catch((error) => alert(error));
			},

Hi, @jwhitty. I’ve moved the questions from other other topics here to keep the all questions in one place.

1 Like

Thanks! I ran into so much struggle trying to make this work that I gave up on it both due to the lack of ease of use and functioning documentation answers, and because my friends told me “everyone hates contact forms in IT anyways, skipping it is fine”. So… I don’t have the live form stuff anymore, because this website has to be done way before I’m gonna get an answer about this unnecessary part. I will check back in some weeks when I have time/mental space, because I would love to know why my netlify page recognized that the form was set up but couldnt receive any information no matter what person’s working answer I copied and tested out…

Hi, @jwhitty. Unless you deleted the site, there would still be a deploy with the form and we would be happy to take a look and see if the issue is anything we’ve seen before. In order to do that, we need the details above. Two of these details are a bare minimum to get started:

  1. The URL for your live form as you want visitors to use it
  2. The URL of your deployed html form (if it exists)

Most (really most but not all) form issues come down to this:

  • There must always be an HTML version of the form (before any javascript is run) which contains the complete form and all possible fields.

The vast majority of form issues are because that requirement is not met. If you send me a link to the form (or both forms if two exist because of the requirement above), then I can confirm if that is the issue or not.

Let us know if you want to troubleshoot further and feel free to reply here again anytime.

I made a basic version of the form in html, and im almost positive that I included that within the code of my questions…yup. scrolling up you have literally ALL the code related to this.

The index.html static file in the public folder, plus the html out of the template section in my app.vue file.

I can send you the private gitlab repo, but i dont know how that will change anything from here to there, its the same code (and I would have to go back and find a repo that still has the form in it too, cuz ive pushed about 25 more times since then…I dont have time to do this now)

Hi, @jwhitty. About this:

yup. scrolling up you have literally ALL the code related to this.

Troubleshooting third-party code is outside the scope of our technical support. I’m happy to troubleshoot a deployed site but I won’t troubleshoot someone’s copy/pasted Vue code.

I did find the site with the form using this name and tested the deployed version at the time this topic was created (Fri Oct 30 22:54:47 UTC 2020) which was deploy id f9c977b726f36000844f704. When I tested the form, the “Submit” button does not trigger a POST with the form data.

Now there could still be an issue with the form handler backend but, if so, we won’t know because the form itself doesn’t send any form submissions. The backend form handler is not being used because of the site code not sending anything. The issue in the deploy I tested was the site code not sending, not the backend not processing. The backend cannot process a form submission which was never sent in the first place.

It could be that the form doesn’t send because you were testing something during that deploy and there is some other deploy to test. If so, please send us a link to the correct deploy.

I hope this is helpful. I also it clarifies why the link to the deployed form is so important. A deployed site is the only way to test and I need the site URL to do that.

Again, if there are other questions we are happy to troubleshoot and we need the link to the deployed form before we will do so.