I have my form the same way Divya does, before even seeing this post, and mine isnt working at all
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));
},