Vue Contact Form Without a Backend

Set up FormsReach with Vue

Install the package

Run npm install @formsreach/vue (or pnpm/yarn). Create your API key in FormsReach.

Use the hook in an SFC

const { submit, submitting } = useFormsReach('YOUR_API_KEY'). Bind submit with @submit.prevent and disable the button while submitting.

Ship and test

Deploy your Vue app. Submit once - check email and/or WhatsApp depending on your delivery settings.

 <script setup> import { useFormsReach } from '@formsreach/vue'; const { submit, submitting } = useFormsReach('YOUR_API_KEY'); </script> <template> <form @submit.prevent="submit"> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" :disabled="submitting">Submit Form</button> </form> </template>

<script setup> import { useFormsReach } from '@formsreach/vue'; const { submit, submitting } = useFormsReach('YOUR_API_KEY'); </script> <template> <form @submit.prevent="submit"> <input type="text" name="name" required /> <input type="email" name="email" required /> <textarea name="message" required /> <button type="submit" :disabled="submitting">Submit Form</button> </form> </template>

The SPA form problem

In a client-rendered Vue app there is no natural place to POST a contact form. Teams either abuse third-party email widgets, stand up a tiny API, or postpone the form entirely. FormsReach is the form API: the hook submits to our endpoint so you keep building UI, not infrastructure.

Platform notes

Use named inputs so the hook can read FormData from the form.
Handle success UI after submit resolves (inline message or router push).
Prefer the Nuxt page if you need Nuxt-specific app directory guidance.

Troubleshooting

submit is not a function: Confirm import from @formsreach/vue and that the hook runs inside setup.
Empty payload: Ensure inputs have name attributes.
Double submit: Disable the button with submitting.

What you get

Free

500 credits every month for form submissions, email, and WhatsApp. Spam filtering, webhooks, and workflow rules included. No credit card required.

Starter & Pro

Larger monthly credit pools (2,000 or 8,000) for growing sites and multi-site volume. Same channels - email, WhatsApp via the official Meta API, webhooks. See pricing.

FAQ

Do I need a Vue server or custom API route?+

No. useFormsReach talks to the FormsReach form API. You do not need a custom backend for basic contact forms.

What does useFormsReach return?+

submit and submitting - use submit with @submit.prevent and submitting to disable the button or show loading UI.

Free vs Pro delivery?+

Email and WhatsApp via Meta WhatsApp Business API, with spam filtering. Usage is metered in monthly credits.

Does this work with Vite / Vue SPA hosts?+

Yes - any Vue setup that can install npm packages. For Nuxt app structure, see the Nuxt integration page.

Vue contact form for any website