Vue form backend

<script setup lang="ts">
import { ref } from "vue";

const email = ref("");
const message = ref("");
const state = ref<"idle" | "sending" | "sent" | "error">("idle");

async function submit() {
  state.value = "sending";
  const response = await fetch("https://formivo.faizyab.me/api/f/YOUR_FORM_ID", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify({ email: email.value, message: message.value }),
  }).catch(() => null);

  state.value = response?.ok ? "sent" : "error";
}
</script>

<template>
  <form @submit.prevent="submit">
    <input v-model="email" type="email" required aria-label="Email" />
    <textarea v-model="message" aria-label="Message" />
    <button :disabled="state === 'sending'">
      {{ state === "sending" ? "Sending…" : "Send" }}
    </button>
    <p v-if="state === 'error'" role="alert">Could not send.</p>
  </form>
</template>