Home / Vue contact form

Add a contact form to Vue — get submissions by email & Slack

The easiest way to handle Vue form submissions without building a backend. Connect your form to Formcatch and receive every message by email, Slack, and a dashboard.

Create your free form endpoint

1. Create a form (free) and copy your endpoint

Sign up and create a form — you'll get a URL like https://forms.mgm-llc.org/f/YOUR_FORM_ID.

2. Paste this into your Vue project

<script setup>
async function onSubmit(e) {
  await fetch("https://forms.mgm-llc.org/f/YOUR_FORM_ID", {
    method: "POST",
    headers: { Accept: "application/json" },
    body: new FormData(e.target),
  });
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input name="email" type="email" required />
    <textarea name="message" required></textarea>
    <button>Send</button>
  </form>
</template>

That's it. Submissions are stored in your dashboard and sent to your email/Slack. Add _redirect for a thank-you page, or send Accept: application/json for AJAX.

Why Formcatch for Vue

• No backend or API route to build or host
• Spam filtering, email & Slack notifications
• Free to start; Pro at $9/mo

Start free   Pricing

Other frameworks

HTMLReactNext.jsSvelteAstroNuxtGatsbyTailwind CSS