Vue Forms

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

const status = ref('idle')
const FORM_ID = 'cf_xxxxx'

async function handleSubmit(e) {
  status.value = 'submitting'

  const formData = new FormData(e.target)
  const data = {
    _formId: FORM_ID,
    name: formData.get('name'),
    email: formData.get('email'),
    message: formData.get('message'),
  }

  try {
    const res = await fetch('https://codasite.ai/forms/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data),
    })

    const result = await res.json()
    status.value = result.success ? 'success' : 'error'
  } catch {
    status.value = 'error'
  }
}
</script>

<template>
  <div v-if="status === 'success'" class="success">
    Thanks! We'll be in touch soon.
  </div>

  <form v-else @submit.prevent="handleSubmit">
    <input name="name" placeholder="Name" required />
    <input name="email" type="email" placeholder="Email" required />
    <textarea name="message" placeholder="Message" required></textarea>

    <button :disabled="status === 'submitting'">
      {{ status === 'submitting' ? 'Sending...' : 'Send' }}
    </button>
  </form>
</template>

export default {
  data() {
    return {
      status: 'idle',
      formId: 'cf_xxxxx'
    }
  },
  methods: {
    async handleSubmit(e) {
      this.status = 'submitting'

      const formData = new FormData(e.target)

      const res = await fetch('https://codasite.ai/forms/api/submit', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          _formId: this.formId,
          name: formData.get('name'),
          email: formData.get('email'),
          message: formData.get('message'),
        }),
      })

      const result = await res.json()
      this.status = result.success ? 'success' : 'error'
    }
  }
}