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

jen · April 15, 2020, 5:20pm

Hey @rasulkireev,
Thanks for sharing all the links and code about your what your setup is and what you’ve tried so far. I took a look at your site and see that you have recently received some form submissions:

So is the problem that the submissions aren’t collecting all the data you want? If that’s the issue, based on your StackOverflow post, there might be a problem with how you’re sending data to Netlify, your data encoding function (I don’t see one in the code you sent), etc. Here’s some sample code that may help you debug:

github.com

kaganjd/netlify-nuxt-forms/blob/master/pages/index.vue#L69-L90


      
          // This function puts all the form fields into a FormData constructor, which we later encode with the URLSearchParams constructor
          createFormDataObj(data) {
            const formData = new FormData();
            for (const key of Object.keys(data)) {
              formData.append(key, data[key]);
            }
            return formData;
          },
          // This is our custom onSubmit function; don't forget to add `@submit.prevent="handleSubmit"` inside your <form> tag
          handleSubmit () {
            // This `data` object is what's passed to the createFormDataObj function. It needs all of your form fields, where the key is the name= attribute and the value is the computed value.
            const data = {
              "form-name": "vue-tea",
              "tea": this.teaName
            }
            // This POSTs your encoded form to Netlify with the required headers (for text; headers will be different for POSTing a file) and, on success, redirects to the custom success page located at pages/thanks.vue
            fetch("/", {
              method: "POST",
              headers: { "Content-Type": "application/x-www-form-urlencoded" },
              body: new URLSearchParams(this.createFormDataObj(data)).toString()

This file has been truncated. show original

and a more in-depth post about the pieces you need for a form.

Or is that part working correctly and the problem is that EmailOctopus is not receiving the form data after it’s been submitted to Netlify? If it’s the latter, that would suggest an issue with the submission-created function. This tutorial has a good walkthrough with submission-created code:

Let us know how you go with this and if we can help further!

Topic		Replies	Views
Prevent Netlify Form Redirect After Submit Support netlify-forms	23	3552	April 23, 2023
Vue form questions Support netlify-forms	8	2682	November 5, 2020
Netlify: No Form Submission Action + Form Submit JS Actions Support netlify-forms	11	4483	February 12, 2020
Netlify Forms with Nuxt3 and Veutify Support netlify-forms	5	9	October 26, 2024
Form submission for react app, redirect to netlify default page Support netlify-forms	4	469	June 2, 2023

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

Related topics