Contact form for Vue & Nuxt

Vue or Nuxt contact form, no server needed

Post from a method with fetch() and flip a flag for the thank-you state.

How to set it up

1. Create a form in Formpit and copy the endpoint URL.
2. Use the component below.
3. Send a test submission.

ContactForm.vue

<script setup>
import { ref } from "vue";
const sent = ref(false);
async function submit(e) {
  const r = await fetch("https://formpit.com/f/YOUR_FORM_ID", { method: "POST", headers: { Accept: "application/json" }, body: new FormData(e.target) });
  sent.value = r.ok;
}
</script>
<template>
  <p v-if="sent">Thanks, we'll be in touch.</p>
  <form v-else @submit.prevent="submit">
    <input name="email" type="email" required />
    <textarea name="message" required />
    <input name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
    <button>Send</button>
  </form>
</template>

Replace YOUR_FORM_ID with the endpoint from your form's Setup tab.

Good to know

• In Nuxt this is a normal component; no server route is needed.

What you get

• Every submission emailed to you and stored forever in an inbox with New / Replied / Closed statuses.
• Reply from the inbox, add tags and notes, search, export CSV or JSON.
• Spam filtering with a honeypot, rate limiting and content checks; hCaptcha, reCAPTCHA or Turnstile if you want it.
• 500 submissions a month free. Pro adds file uploads, Google Sheets, Notion, Slack, webhooks and reminders.

Other platforms

Lovable · Bolt · v0 · WordPress · Shopify · Wix · Squarespace · Framer · Webflow · Carrd · Plain HTML · React · Next.js · Astro · Hugo, Jekyll & Eleventy · Svelte & SvelteKit