Kontaktformulare für Vite
Füge deiner Vite-App (React oder Vue) ein Kontaktformular hinzu, ganz ohne Backend. Es ist eine Komponente, die an Formpaste postet, wobei der Endpunkt in einer Vite-Env-Variable liegt. Sieh sie dir live an, kopiere den Code, und Einsendungen landen direkt in deinem Posteingang - Spam wird gefiltert.
So erstellst du ein Vite-Formular
- 1
Erstelle ein Formular in deinem Formpaste-Dashboard und kopiere den Zugangsschlüssel.
- 2
Kopiere die Komponente oben und füge VITE_FORMPASTE_ENDPOINT zu deiner .env hinzu.
- 3
Ersetze YOUR_ACCESS_KEY_HERE durch deinen Zugangsschlüssel, dann builden und deployen.
Prompt für deinen KI-Coding-Agenten
Add a Formpaste contact form to my Vite app. Use a component that reads the endpoint from import.meta.env.VITE_FORMPASTE_ENDPOINT and POSTs as application/x-www-form-urlencoded (URLSearchParams) with a hidden access_key input. No server, no API route.Oder verbinde den Formpaste-MCP-Server mit Claude Code, Codex, Cursor, Claude Desktop, VS Code oder einem beliebigen mcp-remote-Client. Zur Einrichtungsanleitung.
Den Endpunkt in einer Env-Variable halten
Vite macht dem Client Umgebungsvariablen mit dem Präfix VITE_ verfügbar,
speichere den Endpunkt also als VITE_FORMPASTE_ENDPOINT und lies ihn mit
import.meta.env.VITE_FORMPASTE_ENDPOINT aus. So bleibt die URL aus deinen
Komponenten heraus und lässt sich einfach zwischen Umgebungen wechseln.
React oder Vue, dieselbe Idee
Vite scaffoldet eine React- oder eine Vue-App. So oder so ist das Formular eine Komponente mit einem Submit-Handler, der den Endpunkt fetcht - nutze den passenden Code aus dem Umschalter oben. Es gibt keinen Dev-Server-Proxy und keine Backend-Route einzurichten.
Statischer Output, überall deploybar
vite build erzeugt statische Assets, die an einen externen Endpunkt posten,
also lässt sich die App auf jedem statischen Host deployen, und das Formular
funktioniert sofort.
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.
Formular erstellen
Melde dich an, verifiziere deine E-Mail und erstelle einen Zugangsschlüssel im Dashboard.
Code kopieren
Füge das Snippet oben in dein Projekt ein. Wähle CSS oder Tailwind passend zu deiner Website.
export function ContactForm() {
async function onSubmit(e) {
e.preventDefault();
const form = new FormData(e.currentTarget);
await fetch("https://api.formpaste.com/submit", { method: "POST", body: new URLSearchParams(form) });
}
return (
<form onSubmit={onSubmit} className="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 className="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Name
<input type="text" name="name" placeholder="Dein Name" required className="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 className="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">E-Mail
<input type="email" name="email" placeholder="du@beispiel.de" required className="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 className="flex flex-col gap-1.5 text-sm font-medium text-gray-900 dark:text-gray-100">Nachricht
<textarea name="message" required className="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" className="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">Senden</button>
</form>
);
}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">Kontaktformulare für Vite FAQ
Formular einfügen. Einsendungen erhalten.
Sofort, ohne Backend, Server oder Datenbanken einzurichten. 250 Einsendungen/Monat kostenlos - keine Kreditkarte.
Das bekommst du mit Formpaste
Kein Server, kein DNS
Richte dein Formular auf Formpaste aus - kein Backend, kein DNS, kein E-Mail-Server zu betreiben.
Spam automatisch gefiltert
Heuristiken plus ein Quarantäne-Ordner, den du kontrollierst. Echte Nachrichten kommen immer durch.
Quarantäne, die du kontrollierst
Verdächtige Einsendungen landen in einem Ordner, den du prüfst - nichts wird stillschweigend verworfen.
Gebaut für KI-Agenten
Ein MCP-Server, den dein Coding-Agent aufruft, um ein Formular zu erstellen und einzurichten.
Copy-Paste-Komponenten
Zugänglicher Copy-Paste-Formularcode für HTML, React, TypeScript, JavaScript und Astro.
Einfaches Dashboard
Verwalte Formulare, Posteingang, Quarantäne und Zustellung an einem Ort.