Vue contact form without a backend

In Vue 3 you can submit with fetch and reactive state.

ContactForm.vue

<script setup>
import { ref, reactive } from "vue";
const form = reactive({ name: "", email: "", message: "", botcheck: "" });
const status = ref("idle");
async function submit() {
  status.value = "sending";
  const res = await fetch("https://forms.elimbi.com/submit", {
    method: "POST",
    headers: { "Content-Type": "application/json", Accept: "application/json" },
    body: JSON.stringify({ ...form, access_key: "YOUR-ACCESS-KEY" }),
  });
  status.value = (await res.json()).success ? "sent" : "error";
}
</script>
<template>
  <p v-if="status==='sent'">Thanks!</p>
  <form v-else @submit.prevent="submit">
    <input v-model="form.name" required />
    <input v-model="form.email" type="email" required />
    <textarea v-model="form.message" required />
    <input v-model="form.botcheck" type="checkbox" style="display:none" />
    <button :disabled="status==='sending'">Send</button>
  </form>
</template>

Supported fields

• access_key — your key (required).
• email — if present, FormDrop sets it as Reply-To so you can answer directly.
• subject — optional email subject.
• redirect — optional thank-you page URL for plain HTML posts.
• botcheck — hidden honeypot; if a bot fills it, the submission is silently dropped.

Every other field is included in the email and saved in your dashboard log. Send Accept: application/json to get a JSON reply instead of a redirect.

Test it

1. Create a free access key with your email.
2. Paste the key, deploy, submit a test message.
3. Check your inbox and the dashboard log. If mail is delayed, the submission is still stored in the log.

FAQ

Related guides