Nuxt-Lead-Formular

Füge deiner Nuxt-Seite ein Lead-Generierungsformular ohne Server-Route hinzu. Qualifiziere mit einem Firmenfeld in einer Vue-Komponente, und Leads landen in deinem Posteingang oder deinem CRM. Kein eigenes Backend.

So baust du es

Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
Kopiere die Vue-Komponente oben in eine Nuxt-Seite oder -Komponente.
Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel, dann deploye.

Prompt für deinen KI-Coding-Agenten

Add a Formpaste lead generation form to my Nuxt 3 app. Use a Vue component with name, work email, company, phone and message that POSTs as application/x-www-form-urlencoded (URLSearchParams) to https://api.formpaste.com/submit with a hidden access_key input. No server route.

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

Nuxt-Fallstricke

Nuxt gibt dir Server-Routen, aber für ein Formular brauchst du keine. Ein Formpaste-Formular ist eine Vue-Komponente, die direkt an Formpaste postet, also gibt es keinen server/api-Handler und keine Nitro-Route zu schreiben. Es funktioniert mit SSR oder einem statischen nuxi generate-Build.

Keine Server-Route nötig

Du brauchst keinen server/api/-Endpunkt und keinen Nitro-Handler. Die Komponente postet direkt an den Formpaste-Endpunkt, wodurch die App überall deploybar bleibt, auch als vollständig statischer nuxi generate-Build.

Es ist eine Vue-Komponente

Nuxt ist Vue, das Formular ist also eine Single-File-Komponente mit v-model und einem @submit.prevent-Handler. Nutze den Vue-Code aus dem Umschalter oben - er funktioniert innerhalb von Nuxt genauso.

Pinia nur, wenn du geteilten State willst

Bei einem mehrstufigen Formular kannst du den Schritt-Status in einem Pinia-Store halten, falls er sich über mehrere Routen erstreckt, aber lokaler Komponenten-State ist für einen einseitigen Assistenten einfacher. So oder so postet der letzte Schritt einmal an Formpaste.

SSR oder statisch, dasselbe Formular

Weil das Formular an einen externen Endpunkt postet, funktioniert es unabhängig davon, ob du mit SSR oder als statische Seite deployst. Zum Zeitpunkt der Einsendung läuft kein eigener Server-Code.

Worauf es ankommt

Jedes Feld ist ein Kompromiss

Mehr Felder qualifizieren den Lead, kosten aber Volumen. Frag nach Name, geschäftlicher E-Mail und Unternehmen, und lass den Rest optional. Details kannst du immer noch nachträglich erfragen.

Leite Leads an dein CRM weiter

Leite Einsendungen per Webhook an dein CRM oder deinen Vertriebs-Posteingang weiter, damit ein neuer Lead dort landet, wo dein Team schon arbeitet. Reply-to ist auf den Lead gesetzt, damit du direkt antworten kannst.

Qualifiziere ohne Reibung

Ein Unternehmensfeld und eine kurze Notiz zu Wonach-suchst-du sagen dir genug, um zu priorisieren, ohne ein langes Formular, das Leute abschreckt.

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">Name
    <input type="text" name="name" 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" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Geschäftliche E-Mail
    <input type="email" name="email" placeholder="du@firma.de" 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" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Unternehmen
    <input type="text" name="company" 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" />
  </label>
  <label class="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Telefon
    <input type="tel" name="phone" 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">Wonach suchst du?
    <textarea name="message" 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'">Kontakt aufnehmen</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">

Nuxt-Lead-Formular FAQ

Formular einfügen. Einsendungen erhalten.

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

Kostenlos starten Dokumentation lesen

Andere Nuxt-Formulare