Form backend for Vue.js

How it works

1. 1

   Sign up and create a form endpoint on LazyForms.

2. 2

   Build your Vue form component with v-model bindings.

3. 3

   Submit via fetch to your LazyForms endpoint URL.

4. 4

   Check your email and dashboard for submissions.

Code example

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

const name = ref('')
const email = ref('')
const message = ref('')
const status = ref('idle')

async function handleSubmit() {
  status.value = 'sending'

  const res = await fetch('https://api.lazyforms.com/f/YOUR_ACCESS_KEY', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      name: name.value,
      email: email.value,
      message: message.value,
    }),
  })

  status.value = res.ok ? 'sent' : 'error'
  if (res.ok) {
    name.value = ''
    email.value = ''
    message.value = ''
  }
}
</script>

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

Tips

• You can submit as JSON or FormData — LazyForms accepts both.
• Use v-model for clean two-way binding on form fields.
• Works with Vue 2 (Options API) and Vue 3 (Composition API) — just change the syntax.