نموذج تواصل لـ Vue

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

const status = ref("");

async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify({ ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  status.value = result.success ? "ok" : (result.message || "error");
}
</script>

<template>
  <form @submit="onSubmit">
    <input name="name" required>
    <input name="email" type="email" required>
    <textarea name="message" required></textarea>
    <div aria-hidden="true" style="position:absolute;left:-10000px">
      <input name="botcheck" tabindex="-1" autocomplete="off">
    </div>
    <button type="submit">Send</button>
    <p>{{ status }}</p>
  </form>
</template>