Vue Contact Form API

Add a working contact form to any Vue 3 application with EasyFormAPI. Use the Composition API and fetch() to receive every form submission by email — no backend server required.

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

const status = ref('idle');

async function handleSubmit(event) {
  status.value = 'sending';
  const data = Object.fromEntries(new FormData(event.target));
  const res = await fetch('https://api.easyformapi.com/submit', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ access_key: 'YOUR_ACCESS_KEY', ...data }),
  });
  status.value = res.ok ? 'sent' : 'error';
}
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <input name="name"    type="text"  required placeholder="Name" />
    <input name="email"   type="email" required placeholder="Email" />
    <textarea name="message"           required placeholder="Message" rows="4"></textarea>
    <button type="submit" :disabled="status === 'sending'">
      {{ status === 'sending' ? 'Sending…' : 'Send Message' }}
    </button>
    <p v-if="status === 'sent'">Message sent!</p>
  </form>
</template>

Works With

• Vue 3 + Vite
• Nuxt 3 (client-side pages)
• Vue CLI
• Quasar
• Any HTML page with Vue CDN