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!