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)); },