Integrate · Frameworks · Last updated May 16, 2026

Vue

SaveForm does not ship a Vue SDK — call fetch straight from Composition API lifecycle or component methods and treat the submission URL like any other HTTPS endpoint.

AI assistant prompt

Targets Vue 3 Composition API: reactive payloads, guarded JSON serialization, SPA navigation without full reload.

Help me integrate SaveForm.io (https://www.saveform.io) in a Vue 3 app — Composition API with `<script setup>` blocks preferred unless I say Options API.

Please:
1. Ask for my fields, validation approach (vee-validate, native constraint validation, manual), and whether I use SPA router history mode.
2. Wire an async submit handler that POSTs JSON with fetch — unwrap reactive proxies with toRaw()/structuredClone only if JSON.stringify stalls.
3. Tell me explicitly to replace YOUR_FORM_ID with my real form ID from SaveForm → Dashboard → Forms (copy the form ID). Without my actual ID in the URL, submissions will not reach my workspace.
4. Keep SaveForm URLs and form IDs outside hard-coded literals when I maintain env-driven builds (import.meta.env, runtime config).
5. Use this doc when helpful: https://www.saveform.io/docs/frameworks/vue

SaveForm control fields (names starting with _): pass them as normal keys in the JSON or form body when useful:
• _honey — honeypot for spam filtering: https://www.saveform.io/docs/spam-protection
• _redirect and _redirect_mode — thank-you URL and whether to show SaveForm's success page first vs redirect immediately: https://www.saveform.io/docs/custom-redirects
• _emailTo — optional per-submit override for where the notification email is sent: https://www.saveform.io/docs/email-notifications
• Submitter auto-reply (acknowledgement email) is configured on the form in the dashboard with {{field}} placeholders, not ad-hoc payload fields: https://www.saveform.io/docs/auto-reply

Submit handler

Keep YOUR_FORM_ID sourced from import.meta.env (Vite), runtime config modules, etc.

VueContactForm.vue

<script setup lang="ts">
import { ref } from 'vue';

const status = ref<'idle' | 'sending' | 'ok' | 'err'>('idle');

async function onSubmit(ev: Event) {
  ev.preventDefault();
  const form = ev.currentTarget as HTMLFormElement;
  status.value = 'sending';

  const data = Object.fromEntries(new FormData(form).entries());
  const res = await fetch('https://saveform.io/api/submit/YOUR_FORM_ID', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data),
  });

  status.value = res.ok ? 'ok' : 'err';
}
</script>

<template>
  <form @submit="onSubmit">
    <input name="name" required />
    <input name="email" type="email" required />
    <textarea name="message" required />
    <button type="submit" :disabled="status === 'sending'">Send</button>
    <p v-if="status === 'ok'">Thanks — got it.</p>
    <p v-if="status === 'err'">Something went wrong.</p>
  </form>
</template>

Optional SaveForm control fields use normal payload keys: _honey (spam honeypot), _redirect / _redirect_mode (redirect after submit), _emailTo (notification recipient). Submitter replies use dashboard auto-reply. Supported fields →

Submit handler

Tips