No Form submissions with Functions

Support
,
1

I have a Vue project with a form, functions and MongoDB, you can find it here: https://confessionsofaparent.netlify.app/.
On a form submission, my custom function sends the data to my MongoDB database. This all works fine! But I do not see the submissions when I go to Forms in my Netlify dashboard. I do see my form, but it doesn’t have any submissions. I would really like to see them there too, because I want to use Zapier to create a connection between my Netlify site and Twitter.

This is my code when the form gets submitted:

onSubmit: function(event: Event) {
      const body = {
        parent: this.parent,
        children: this.children,
        confession: this.confession,
        date: new Date(),
      }
      fetch('/.netlify/functions/save-confession', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
      })
      .then(() => {
        this.$router.push('/thank-you')
      })
    }

And this is my save-confession function

const handler = async (event) => {
    try {
        const database = client.db(process.env.DATABASE);
        const collection = database.collection(process.env.COLLECTION);
        const body = JSON.parse(event.body)
        const doc = {
            parent: body.parent,
            kids: body.children,
            confession: body.confession,
            date: body.date,
        }
        const result = await collection.insertOne(doc);
    } catch (error) {
        return { statusCode: 500, body: error.toString() }
    } finally {
        await client.close();
    }
    return { statusCode: 200 }
}
2

Hi @josee, thanks for the post and welcome to the Netlify Support Forums.

You are not seeing the forms in your Netlify dashboard because your form does not send form data.

You can send the form data as Post in your onSubmit function and then when the request is successful you can now call your save-confession function.

Kindly check the link below on how to properly submit form data to Netlify in a Vue.js site.

Hope this helps.
Thanks.

1 Like
3

Took me a while, but it works with your instruction! Instead of following the code in the tutorial, I went to the Github with the example and noticed that one uses fetch instead of axios and with that I got it working.

Thanks!

1 Like
4

Glad to hear this is working now, @josee! Great suggestions and solution, @clarnx!

1 Like