How to submit Vue forms to Google Sheets

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications. It emphasizes simplicity, reactivity, and component-based architecture, making it easy to integrate with existing projects while offering powerful state management and a flexible ecosystem.

You can easily connect forms built with Vue to Google Sheets using Sheet Monkey.

Once you create a form in the Sheet Monkey dashboard, Sheet Monkey will provide a form url or "form action" where you can start posting data. This unique action is all you need to post data into the Google Sheet.

Then in your Vue form, post your data to the Sheet Monkey endpoint as in the following example:

<template>
  <div>
    <h2>Contact Form</h2>
    <form @submit.prevent="handleSubmit">
      <div>
        <label for="name">Name:</label>
        <input type="text" id="name" v-model="formData.name" required />
      </div>
      <div>
        <label for="email">Email:</label>
        <input type="email" id="email" v-model="formData.email" required />
      </div>
      <div>
        <label for="message">Message:</label>
        <textarea id="message" v-model="formData.message" required></textarea>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        email: '',
        message: ''
      }
    };
  },
  methods: {
    async handleSubmit() {
      const url = 'https://api.sheetmonkey.io/form/vB1pUYCBvUqnSarEvAgsd6';
      const response = await fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(this.formData)
      });

      if (response.ok) {
        console.log('Form submitted successfully!');
        // Reset form fields if needed
        this.formData = {
          name: '',
          email: '',
          message: ''
        };
      } else {
        console.error('Form submission failed:', response.status);
      }
    }
  }
};
</script>

Once you submit this form, the data will appear in the linked sheet like this: