Contact form for Vue.js websites

Drop the <script setup> single-file component above into any .vue file in your project, replace YOUR_ACCESS_KEY, and import it where you need it. No router config, no backend, no Vuex/Pinia required.

Yes. The form component is client-only (it uses fetch), but it hydrates cleanly into any SSR-rendered page. For Nuxt SSG, see the dedicated /forms/nuxt page — same backend, Nuxt-specific runtimeConfig pattern.

Use a status ref with four states: idle, loading, ok, err. Show inline messages with v-if for ok/err. The fetch call returns { success: boolean, message?: string } — render data.message for the user when success is false.

Yes. If you'd rather hide the access key, post from a Nuxt /server/api/contact.post.ts route or a Vue 3 server function. The Nuxt page covers this pattern in detail.

Two options. (1) Stay on-page and show a Vue-rendered success message (the default in our snippet). (2) Configure /thanks in Dashboard → Form settings → Redirect and use a native form submit. Submitted redirect fields are ignored.

Yes. Use the UI library's form/input components for the markup, but make sure each input has a name attribute (some component libraries omit it by default). FormData reads from name attributes, not v-model bindings.

If you write status === 'loading' inside <script setup> it works because Vue auto-unwraps refs in templates — but inside a function you need status.value. Mixing the two is the #1 cause of "why isn't my button disabling?" bugs in Vue contact forms.

If you bind inputs with v-model="name" to a ref and then build new FormData(e.target), FormData reads the DOM — which Vue keeps in sync — so it works. But if you bind a computed value and the input doesn't have a name attribute, FormData drops it silently. Always set name="…" on every input.

Vue's event modifier syntax is @submit.prevent="onSubmit". People often write @submit="onSubmit" and then forget to call e.preventDefault() inside the handler — the page reloads and the fetch is cancelled mid-flight.

Reading import.meta.env.SPLITFORMS_KEY returns undefined unless you rename it to VITE_SPLITFORMS_KEY (Vite) or expose it via runtimeConfig (Nuxt). Vite intentionally hides anything without the prefix to prevent leaking server secrets.

Modern browsers all support fetch, but if you support IE11 (Vue 2 territory), you need a polyfill or axios. Splitforms only requires a POST with FormData — any client lib works.

If you wrap your form fields in const form = reactive({ name: '', email: '', message: '' }) and then do const { name, email } = form to shorten template references, you lose reactivity — the destructured locals are plain primitives, not refs. The submit handler reads stale values and you get empty fields in the splitforms inbox. Use toRefs(form) when destructuring, or skip destructuring and reference form.name directly. Same trap exists for props passed from a parent.

Vue ships nothing form-related beyond v-model for two-way binding. To deliver a submission anywhere, you write the same backend stack as React: an Express/Nitro/Hono route, an email provider, a database, spam filtering. Nuxt narrows the gap with /server/api routes, but you're still operating the route. Pinia/Vuex don't help — they're for client state, not network. The Vue ecosystem has FormKit and VeeValidate for validation UX, but neither delivers submissions. Splitforms slots in as the missing endpoint: any Vue 2 / Vue 3 / Nuxt setup posts a FormData to one URL, gets { success: true } back, done.

Vue + Vite produces a static bundle that deploys anywhere. For Nuxt, every Nitro preset (Vercel, Netlify, Node, Cloudflare, static, AWS Lambda) works identically because the form posts client-side. On Cloudflare Pages with the Nuxt Cloudflare preset, avoid proxying through /server/api — the fetch round-trip eats the 10ms CPU budget on the free tier; post directly to splitforms. Vite-only (non-Nuxt) projects must use VITE_SPLITFORMS_KEY or env vars are silently undefined client-side. Nuxt uses runtimeConfig.public.splitformsKey. Both inline the value into the bundle, so domain-lock the key in the splitforms dashboard.