Vue form handling without a backend

The Vue example

Copy this into your project and replace <FORM_ID> with the id of a form you create in the Formward dashboard.

vue

Copy<script setup>
import { ref } from "vue";

const status = ref("idle"); // idle | sending | ok | error

async function onSubmit(e) {
  status.value = "sending";
  const form = e.target;
  try {
    const res = await fetch("https://forms.formward.eu/f/<FORM_ID>", {
      method: "POST",
      headers: { Accept: "application/json" },
      body: new FormData(form),
    });
    const data = await res.json(); // { ok: true, id, files }
    if (!res.ok || !data.ok) throw new Error(data.error || res.status);
    form.reset();
    status.value = "ok";
  } catch {
    status.value = "error";
  }
}
</script>

<template>
  <p v-if="status === 'ok'">Thanks - we received your message.</p>
  <form v-else @submit.prevent="onSubmit">
    <input type="email" name="email" required />
    <textarea name="message" required></textarea>
    <input type="text" name="_gotcha" tabindex="-1" autocomplete="off"
      style="display:none" aria-hidden="true" />
    <button :disabled="status === 'sending'">
      {{ status === "sending" ? "Sending…" : "Send" }}
    </button>
    <p v-if="status === 'error'" role="alert">Could not send. Try again.</p>
  </form>
</template>

Success and error handling

• →@submit.prevent stops the native navigation so your fetch() handles the request and the user stays on the page.
• →Asking for Accept: application/json makes Formward reply with { ok: true, id, files }; without it the endpoint sends a 302 redirect suited to no-JS forms.
• →The hidden _gotcha honeypot must stay empty - Formward drops filled-in submissions as spam before they reach your inbox.

Spam protection

Every example above includes the _gotcha honeypot field. It is hidden from real users and must stay empty. When a bot fills it, Formward files the submission as spam and still answers with a normal success response, so the bot learns nothing and nothing reaches your inbox. Rate limits and the origin allowlist are checked on Formward's side as well. For a stricter gate, switch on Cloudflare Turnstile in the form's settings and add the widget; it adds a cf-turnstile-response field that Formward verifies on receipt. Turnstile is optional, and Cloudflare is a US provider, listed as such in the sub-processor register. The spam docs have the widget markup.

The JSON response

A standard POST gets a 302 redirect (or your thank-you page). Send the Accept: application/json header - as every fetch() example above does - and Formward returns JSON instead:

CopyHTTP/1.1 200 OK
Content-Type: application/json

{ "ok": true, "id": "3f2a9c1e-...", "files": 0, "success": { "title": "Thank you!", ... } }

files is the number of uploaded files stored and success carries the confirmation text from the form's settings. When you set a redirect URL for the form, the reply also has a redirect field your code can send the visitor to. On failure the body is { ok: false, error } with a 4xx status: 422 when required consent is missing or a field is too long, 403 when a Turnstile check fails, 429 for too many submissions from one address, 402 when the account is over its plan limit. See responses and redirects for the full table and the AJAX docs for CORS.

Related

• Vue form templates: Single-file components for contact, booking and feedback forms.
• Nuxt form handling: The same component inside Nuxt, including a static nuxi generate build.
• Spam filtering: The checks behind the _gotcha field, and how to add Turnstile.
• GDPR form backend: Where the submissions are stored and what the DPA covers.
• Vite env setup: Keeping the endpoint in a .env file for a Vue app built with Vite.