Gridsome

<template>
  <form @submit.prevent="onSubmit">
    <input id="name" name="name" v-model="name" required />
    <input id="email" name="email" type="email" v-model="email" required />
    <textarea id="message" name="message" v-model="message" required></textarea>

    <p v-if="status === 'success'" style="color: green">{{ statusMessage }}</p>
    <p v-if="status === 'error'" style="color: red">{{ statusMessage }}</p>

    <button type="submit" :disabled="status === 'submitting'">
      {{ status === 'submitting' ? 'Sending...' : 'Submit' }}
    </button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      status: 'idle',
      statusMessage: '',
      name: '',
      email: '',
      message: '',
    };
  },
  methods: {
    async onSubmit() {
      this.status = 'submitting';

      try {
        const response = await fetch('https://pipedform.com/f/{form_id}', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Accept: 'application/json',
          },
          body: JSON.stringify({
            name: this.name,
            email: this.email,
            message: this.message,
          }),
        });

        const data = await response.json();

        if (response.ok) {
          this.status = 'success';
          this.statusMessage = 'Form submitted successfully';
        } else {
          this.status = 'error';
          this.statusMessage = data.message ?? 'Something went wrong. Please try again.';
        }
      } catch (error) {
        this.status = 'error';
        this.statusMessage = 'Network error. Please check your connection.';
      }
    },
  },
};
</script>