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

Hi all,

I am trying to set up an email newsletter form. I want to update the DOM (success message), without a page reload. At the same time, on the backend, a POST request is issued to add this email to my EmailOctopus list (via their API).

My site is built with Gridsome (Vue Static Builder). To prevent redirect to success page I add @submit.prevent attribute to my form:

<form
   name="add-subscriber"
   id="myForm"
   method="post"
   data-netlify="true"
   data-netlify-honeypot="bot-field"
   @submit.prevent="handleFormSubmit">
            <input type="hidden" name="form-name" value="add-subscriber" />
            <input type="email" v-model="userEmail" name="user_email" required="" id="id_user_email">
            <button type="submit" name="button">Subscribe</button>
          </form>

This is how my handleFormSubmit function currently looks like:

handleFormSubmit() {
            document.getElementById("myForm").innerHTML = `
                <div>
                  Almost there! Check your inbox for a confirmation e-mail.  
               </div>`

Now the dom gets updated with a success message, but the form is not actually submitted. Clearly I need to add something else to my function.

Previously I had a POST request with a “/” URL, but I kept getting a Cannot POST / error:

        handleFormSubmit() {
            document.getElementById("myForm").innerHTML = `
                <div>
                  Almost there! Check your inbox for a confirmation e-mail.  
               </div>`

            await axios.post('/', {
                data: {
                    "user_email": this.userEmail,
                    "apiKey": apiKey
                }
            })
            .then(data => console.log(data))
            .catch(error => console.log(error))
        }

My function is called submission-created.js, so it can be launched only when the form submission is registered with Netlify.

My site is currently located at https://rk-gridsome-pw.netlify.com/

Sorry for the long message. I hope this is clear. If further details are needed please let me know. Thanks a ton in advance. I really appreciate everyone’s help!

Best,
Rasul

P.S. I have tried to use Netlify Tutorial and run into a couple of issues described here in a stackoverflow post

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:
https://app.netlify.com/sites/rk-gridsome-pw/forms

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:


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!

Thank you so much for your response!

I do apologize. I was able to find the answer yesterday. Here is what works for me.

<template>
          <form
          name="add-subscriber"
          id="myForm"
          method="post"
          data-netlify="true"
          data-netlify-honeypot="bot-field"
          enctype="application/x-www-form-urlencoded"
          @submit.prevent="handleFormSubmit">
            <input type="hidden" name="form-name" value="add-subscriber" />
            <input type="email" name="userEmail" v-model="formData.userEmail">
            <button type="submit" name="button">Subscribe</button>
          </form>
 </template>

<script>
import axios from "axios";

export default {
    data() {
        return {
            formData: {
                userEmail: null,
            },
        }
    },
    
    methods: {
        encode(data) {  
            const formData = new FormData();
            
            for (const key of Object.keys(data)) {
                formData.append(key, data[key]);
            }
            
            return formData;
        },

        handleFormSubmit(e) {
            const axiosConfig = {
                header: { "Content-Type": "application/x-www-form-urlencoded" }
            };

            axios.post(
                location.href, 
                this.encode({
                    'form-name': e.target.getAttribute("name"),
                    ...this.formData,
                }),
                axiosConfig
            )
            .then(data => console.log(data))
            .catch(error => console.log(error))
            .then(document.getElementById("myForm").innerHTML = `
            <div>
                Thank you! I received your submission.
            </div>
            `)
        }
    }
}
</script>

Specifically declaring the userEmail helped, as well as correct encoding.

1 Like

awesome! so glad you found a solution, and thanks for posting it. That will definitely help other people.