Vue 3 Contact Form

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

const status = ref('idle') // idle | sending | success | error

async function handleSubmit(e) {
  status.value = 'sending'
  const form = e.target
  const data = new FormData(form)

  try {
    const res = await fetch(form.action, { method: 'POST', body: data })
    if (res.ok) {
      status.value = 'success'
      form.reset()
    } else {
      status.value = 'error'
    }
  } catch {
    status.value = 'error'
  }
}
</script>

<template>
  <p v-if="status === 'success'" style="color: #16a34a; font-weight: 600">
    Message sent! We'll be in touch.
  </p>

  <form
    v-else
    action="https://app.formwit.com/api/s/YOUR_FORM_ID"
    method="POST"
    @submit.prevent="handleSubmit"
  >
    <label for="name">Name</label>
    <input type="text" id="name" name="name" required />

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />

    <label for="message">Message</label>
    <textarea id="message" name="message" required></textarea>

    <!-- Honeypot spam protection -->
    <input type="text" name="_gotcha" style="display: none" tabindex="-1" autocomplete="off" />

    <button type="submit" :disabled="status === 'sending'">
      {{ status === 'sending' ? 'Sending...' : 'Send Message' }}
    </button>
    <p v-if="status === 'error'" style="color: #dc2626">Something went wrong. Please try again.</p>
  </form>
</template>