Contact form for Nuxt — no backend required

Nuxt server routes are easy to overbuild for a simple lead form. Use FormHeron when you want zero mail infrastructure.

Setup

Create a FormHeron form.
Add the form to any page or component.
Set allowed origins to your production host.
Optional: use $fetch for JSON UX.

Working example

pages/contact.vue

<template>
  <form action="https://formheron.com/f/YOUR_KEY" method="POST">
    <input type="email" name="email" required />
    <textarea 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>

Common problems

server/api routes

Skip them for contact forms unless you need custom enrichment before storage.

SSR origin headers

Browser submissions send Origin; server-side fetch may not. Allow empty Origin for server-to-server if you proxy.

i18n paths

One form key works for all locales — field names are what matter.

FAQ

How do I add a contact form to Nuxt?

Use a standard form with FormHeron as the action URL.

Can I use useFetch?

Yes for JSON posts. Include the honeypot field in the body as an empty string for humans.

Is email included?

Yes — project notification email on every non-spam submission (budget/digest ladder applies on Free).

Start free Docs