Vue Contact Form Without a Backend

Vue contact form for any website

Add a Vue contact form with the useFormsReach hook from @formsreach/vue. No custom API route, no serverless handler, no DIY email pipeline. Deliver submissions by email with spam filtering and to WhatsApp in seconds, metered with monthly credits.

 <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

Monthly credits for submissions and delivery. Scale when volume grows.

Free

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

Starter, Pro & Agency

Larger monthly credit pools (2,000 / 5,000 / 18,000). WhatsApp via Meta Business API unlocks on Pro and Agency. See pricing.

FAQ

Common questions about FormsReach with Vue.

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

Set up FormsReach with Vue

Install the package

Use the hook in an SFC

Ship and test

Vue snippet

The SPA form problem

Platform notes

Troubleshooting

What you get

FAQ

Ready to receive form leads?

Set up FormsReach with Vue

Install the package

Use the hook in an SFC

Ship and test

Vue snippet

The SPA form problem

Platform notes

Troubleshooting

What you get

FAQ

Related frameworks

Ready to receive form leads?