Vue-Umfrageformular

Baue ein Umfrageformular in Vue ganz ohne Backend. Nutze Dropdowns für schnelle Antworten und ein offenes Feld, gebunden mit v-model, und poste dann an Formpaste. Kopiere die Komponente und ergänze deinen Zugangsschlüssel - Antworten landen in deinem Posteingang.

So baust du es

Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
Kopiere die Vue-Komponente oben und wähle dein Styling.
Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel, dann deploye.

Prompt für deinen KI-Coding-Agenten

Add a Formpaste survey form to my Vue 3 app. Use a single-file component with a couple of select dropdowns and a textarea, bound with v-model, that POSTs as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. No backend.

Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.

Vue-Fallstricke

Ein Vue-Kontaktformular ist eine Single-File-Komponente mit v-model-Bindings und einem @submit.prevent-Handler, der an Formpaste postet. Es gibt kein eigenes Backend und keine eigene API. Platziere den Fetch in der Komponente, und du bist fertig.

Es ist eine normale Komponente

Das Formular lebt in einer .vue-Single-File-Komponente mit einem <script setup>-Block. Binde die Felder mit v-model oder lies beim Absenden ein FormData vom Formularelement, und poste dann an den Formpaste-Endpunkt. Für ein einfaches Formular brauchst du keinen Store und kein Plugin.

Keine eigene API

Du leitest nicht über deinen eigenen Server weiter. Die Komponente postet direkt an den Formpaste-Endpunkt, das spart dir einen Mailer und einen Speicher für Einsendungen, den du sonst selbst bauen müsstest.

Verarbeite die Antwort in einem Ref

Der Endpunkt liefert JSON zurück (success, message, id). Warte auf den Fetch und setze einen Status-Ref, um deinen eigenen Erfolgs- oder Fehlerzustand anzuzeigen, oder hinterlege eine Weiterleitungs-URL im Dashboard und überspringe die Client-seitige Verarbeitung.

Composition oder Options API, beides funktioniert

Die Beispiele nutzen <script setup> und die Composition API, aber derselbe Fetch funktioniert auch in einer Komponente mit Options API. Formpaste kümmert sich nur um den POST, nicht darum, wie du die Komponente strukturierst.

Worauf es ankommt

Kurz halten für eine hohe Abschlussquote

Jede zusätzliche Frage kostet Antworten. Ein paar Dropdowns und ein offenes Kommentarfeld liefern meist alles, was du brauchst, ohne Ermüdung.

Dropdowns schlagen Freitext bei der Auswertung

Feste Auswahlmöglichkeiten (Select-Felder) lassen sich später leicht auszählen. Heb dir das Textfeld für die eine offene Frage auf, die es wirklich braucht.

Mach die E-Mail optional für ehrliche Antworten

Anonyme Antworten sind oft ehrlicher. Frag nur nach der E-Mail, wenn du nachfassen musst, und markiere sie als optional.

So funktioniert es

Drei einfache Schritte, bis Formular-Einsendungen in deinem E-Mail-Posteingang landen.
Erstelle dein Formular, setze die action-URL auf den Formpaste-Endpunkt und trage deinen Zugangsschlüssel ein.

1

Formular erstellen

Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.

2

Code kopieren

Füge das Snippet oben in dein Projekt ein. Wähle CSS oder Tailwind passend zu deiner Website.

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

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

async function onSubmit(e: Event) {
  status.value = "sending";
  const form = new FormData(e.target as HTMLFormElement);
  const res = await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form as any) });
  status.value = res.ok ? "ok" : "error";
}
</script>

<template>
  <p v-if="status === 'ok'">Thanks - your message was sent.</p>
  <form v-else @submit.prevent="onSubmit" class="mx-auto flex w-full max-w-md flex-col gap-4 rounded-xl border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">E-Mail (optional)
    <input type="email" name="email" placeholder="du@beispiel.de" class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Was trifft am besten auf dich zu?
    <select name="role" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100">
      <option>Entwickler</option>
      <option>Designer</option>
      <option>Gründer</option>
      <option>Sonstiges</option>
    </select>
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Wie zufrieden bist du?
    <select name="satisfaction" required class="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100">
      <option>Sehr zufrieden</option>
      <option>Zufrieden</option>
      <option>Neutral</option>
      <option>Unzufrieden</option>
    </select>
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Möchtest du noch etwas ergänzen?
    <textarea name="comments" class="min-h-28 rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 shadow-sm outline-none focus-visible:ring-2 focus-visible:ring-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:focus-visible:ring-gray-100"></textarea>
  </label>
    <button type="submit" class="w-full rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition-colors hover:bg-gray-800 disabled:opacity-60 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200" :disabled="status === 'sending'">Umfrage absenden</button>
    <p v-if="status === 'error'">Something went wrong. Please try again.</p>
  </form>
</template>

3

Zugangsschlüssel hinzufügen

Ersetze den Platzhalter durch deinen Zugangsschlüssel, um Einsendungen zu empfangen.

<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY_HERE">

Vue-Umfrageformular FAQ

Formular einfügen. Einsendungen erhalten.

Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.

Kostenlos starten Dokumentation lesen

Andere Vue-Formulare

Dynamisches Formular