Nuxt

<script setup>
const status = ref('idle');
const message = ref('');

const name = ref('');
const email = ref('');
const formMessage = ref('');

const onSubmit = async () => {
  status.value = 'loading';

  try {
    await $fetch('https://pipedform.com/f/{form_id}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: {
        name: name.value,
        email: email.value,
        message: formMessage.value,
      },
    });

    status.value = 'success';
    message.value = 'Form submitted successfully';
  } catch (error) {
    status.value = 'error';
    message.value = error?.data?.message ?? 'Something went wrong. Please try again.';
  }
};
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input name="name" v-model="name" placeholder="John" required />
    <input
      type="email"
      name="email"
      v-model="email"
      placeholder="john@example.com"
      required
    />
    <textarea
      name="message"
      v-model="formMessage"
      placeholder="Enter your message..."
      required
    ></textarea>

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

    <button type="submit">
      <template v-if="status === 'loading'">Loading...</template>
      <template v-else>Send</template>
    </button>
  </form>
</template>