Vue Form to Google Sheets

<!-- src/components/ContactForm.vue -->

<template>
  <div v-if="submitted">
    <p>Thank you for your submission!</p>
  </div>
  <form v-else @submit.prevent="handleSubmit">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      submitted: false,
    };
  },
  methods: {
    async handleSubmit(event) {
      const formData = new FormData(event.target);

      try {
        const response = await fetch('YOUR_HEYSHEET_ENDPOINT', {
          method: 'POST',
          body: formData,
        });

        if (response.ok) {
          this.submitted = true;
        }
      } catch (error) {
        console.error('Form submission error:', error);
      }
    },
  },
};
</script>

<!-- src/App.vue -->

<template>
  <div id="app">
    <h1>Contact Us</h1>
    <ContactForm />
  </div>
</template>

<script>
import ContactForm from './components/ContactForm.vue';

export default {
  name: 'App',
  components: {
    ContactForm,
  },
};
</script>