Contact form for Vue — no backend required

Vue SPAs still need a place to send leads. FormHeron is that endpoint.

Setup

Create a FormHeron form and copy the key.
Bind a form with action/method or post with fetch.
Include _hp off-screen.
Map error codes for UX.

Working example

ContactForm.vue

<template>
  <form action="https://formheron.com/f/YOUR_KEY" method="POST">
    <input v-model="email" type="email" name="email" required />
    <textarea v-model="message" name="message" required />
    <input type="text" name="_hp" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px" />
    <button type="submit">Send</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'
const email = ref('')
const message = ref('')
</script>

Common problems

v-model and native submit

name attributes are what FormHeron stores. Keep name= on every field you care about.

SPA router after submit

Use fetch + preventDefault if you need client-side routing after success.

Nuxt vs pure Vue

Same endpoint. See the Nuxt platform page for SSR notes.

FAQ

How do I post a Vue form without a backend?

POST to FormHeron with method POST. No secret keys in the browser.

Does FormHeron support JSON?

Yes — Content-Type application/json with a flat object of string fields.

What about spam?

Honeypot is always on; optional Turnstile with your Cloudflare keys; rate limits and dedupe are automatic.

Start free Docs