# Formular-Backend für KI-Websites: Lovable, Bolt, v0, Cursor

KI-Builder erzeugen Formulare, die nirgendwohin senden. Vergleichen Sie drei funktionierende Wege, verbinden Sie ein gehostetes Backend mit einem Prompt und testen Sie die Zustellung vor dem Launch.

Author: Formgong team
Published: 2026-10-06
Updated: 2026-10-06
Language: de
Canonical: https://formgong.com/de/blog/form-backend-for-ai-website-builders/

Generierte Formulare zeigen oft nur eine Dankesmeldung, ohne Daten zu senden. Der schnellste zuverlässige Weg ist ein gehostetes Formular-Backend: Das Formular sendet einen POST mit öffentlichem Schlüssel an /submit, der Dienst speichert die Einsendung und benachrichtigt per E-Mail und Telegram. Ein Prompt verbindet die bestehende Form in Lovable, Bolt, v0 oder Cursor, ohne das Design zu ändern; vor dem Launch testen Sie Anfrage, Datensatz und Benachrichtigungen.

## Warum das generierte Formular nirgendwohin sendet

Lovable, Bolt, v0 und Cursor erzeugen überzeugende Oberflächen: Felder, Validierung, ein Button und eine „Danke!“-Meldung. Doch standardmäßig tut dieser Button oft nichts Sinnvolles – der Handler zeigt den Dank sofort, ohne irgendeine Netzwerkanfrage. Die Daten werden nirgendwo gespeichert.

Das andere Muster: Die KI bindet von selbst Supabase oder Lovable Cloud ein. Das funktioniert, zieht für ein simples Kontaktformular aber eine Datenbank, Zugangskonfiguration und meist einen separaten E-Mail-Dienst wie Resend nach sich.

Den Zustand kennen Sie in einer Minute: Entwicklertools öffnen, den Tab Netzwerk wählen, absenden. Gibt es keine POST-Anfrage, ist das Formular Dekoration – genau das passiert bei den meisten generierten Websites.

## Drei funktionierende Wege für ein Formular

**1. Das eigene Backend des Builders.** Lovable Cloud oder Supabase plus E-Mail-Konnektor. Sinnvoll, wenn Ihre App bereits Authentifizierung, Datenbankeinträge oder andere Server-Abläufe hat. Für ein isoliertes Kontaktformular ist es zu viel Infrastruktur.

**2. Ein gehostetes Formular-Backend.** Das Formular sendet einen POST an einen Endpunkt mit öffentlichem Schlüssel; der Dienst speichert Einsendungen und benachrichtigt per E-Mail und Telegram. Der schnellste Weg für Landingpages und Übersichtswebsites: keine Schemas, keine Edge-Funktionen, keine Server.

**3. Eine eigene Serverless-Funktion.** Volle Kontrolle und volle Verantwortung: Code, Secrets, Spamfilter und Zustellungs-Wiederholungen liegen bei Ihnen. Gerechtfertigt, wenn das Formular bereits Teil komplexerer Logik ist.

Dieser Artikel behandelt den zweiten Weg: Er funktioniert gleich in Lovable, Bolt, v0, Cursor und jedem anderen Builder, der HTML oder React erzeugt.

## Ein Formular-Backend auswählen: die Kriterien

**Zustellnachweis.** „Danke“ auf der Seite beweist nichts. Sie brauchen einen Einsendungsspeicher mit Status: angenommen, zugestellt, Spam. In Formgong ist das ein Posteingang mit Zustelldetails je Kanal.

**Spam-Schutz.** Mindestens ein Honeypot; besser sind optionales Turnstile oder Captcha und eine Spam-Bewertung, wobei Spam Ihr Monatskontingent nicht verbraucht.

**Benachrichtigungskanäle.** E-Mail ist die Basis; für schnelle Reaktionen braucht das Team Telegram, für Integrationen signierte Webhooks.

**Datenort.** Liegen Ihre Kunden in der EU, prüfen Sie, wo Einsendungen physisch gespeichert werden. Formgong speichert Einsendungen und Dateien in Cloudflare D1 und im Dateispeicher mit EU-Gerichtsstand. Benachrichtigungen an Telegram, Slack oder Discord werden von diesen Diensten außerhalb dieses Speichers verarbeitet. Eine Datenschutzerklärung auf Ihrer Website ist weiterhin erforderlich.

**Änderungen ohne Neubau der Website.** Empfänger, Weiterleitungen und Auto-Antwort sollten sich im Dashboard ändern lassen – nicht in Code, den die KI neu generieren muss.

## Ein Prompt, der in jedem Builder funktioniert

Öffnen Sie den Chat Ihres Projekts und bitten Sie ihn, das bestehende Formular zu verbinden und das Design beizubehalten. Der Prompt unten passt für Lovable, Bolt, v0 und Cursor; ersetzen Sie `fk_your_access_key` durch den Schlüssel aus Ihrem Formgong-Dashboard (Bereich „Website einbinden“ dieses Formulars).

```text
Connect this form to Formgong. Keep its design and field names.
1. Send a POST request to https://formgong.com/submit (FormData or JSON with access_key).
2. access_key: fk_your_access_key (a public key; it can stay in the code).
3. Show success only after a response with success: true.
4. On error, keep the entered field values and show an error message.
5. Add a hidden botcheck field (honeypot) with no visible UI change.
6. Do not add tokens, secrets, or file inputs.
```

### So sieht die API-Anfrage aus

```javascript
async function onSubmit(event) {
  event.preventDefault();
  const fields = Object.fromEntries(new FormData(event.currentTarget));
  const response = await fetch("https://formgong.com/submit", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    // _lang: language of Formgong messages and the autoreply (multilingual site: document.documentElement.lang).
    body: JSON.stringify({ _lang: "en", ...fields, access_key: "fk_your_access_key" }),
  });
  const result = await response.json();
  if (!result.success) throw new Error(result.message || "Could not send. Please try again.");
  return result.message; // localized "Sent. Thank you!"
}
```

## Zustellung testen, nicht die Erfolgsmeldung

Wenn der Builder die Änderungen übernommen hat, senden Sie eine erkennbare Test-Einsendung und gehen Sie den ganzen Weg:

- **Anfrage.** Der Tab Netzwerk zeigt einen POST an `https://formgong.com/submit` mit `success: true` in der Antwort.

- **Datensatz.** Die Einsendung erscheint im Formgong-Posteingang dieses Formulars, mit allen Feldern.

- **E-Mail.** Im Free-Tarif kommt die E-Mail im Digest am nächsten Morgen um 08:00, in der Zeitzone des Kontoinhabers, an einen Empfänger. Bei Pro und Business wird jeder Lead einzeln per E-Mail gesendet. Prüfen Sie den Spam-Ordner.

- **Telegram.** Telegram kommt in jedem Tarif sofort, auch bei Free. Ist ein Chat verbunden, kommt die Nachricht genau in diesem Chat an.

Wiederholen Sie den Test nach dem Veröffentlichen auf der echten Domain: Eine Editor-Vorschau kann sich anders verhalten. Die vollständige Anleitung steht im Artikel [„Kontaktformular sendet keine E-Mails“](/de/blog/contact-form-not-sending-email/).

Verwenden Sie in diesem Ablauf keine Datei-Felder: Das Beispiel zielt auf Text-Einsendungen. Anhänge benötigen eigene Formular-Einstellungen und Turnstile.

## Nach dem Launch: Änderungen ohne neue Generierung

Sobald das Formular funktioniert, brauchen die meisten Änderungen keine Rückkehr in den Builder. Das Formgong-Dashboard ändert E-Mail-Empfänger, verbundene Telegram-Chats, Weiterleitungen nach dem Absenden, die Auto-Antwort an Besucher und den Schutz.

Kommen Einsendungen nach einem Redesign plötzlich nicht mehr an, raten Sie nicht: Die Formular-Diagnose von Formgong lädt Ihre Seite und zeigt, ob das Snippet korrekt sitzt – Endpunkt, Methode, Schlüssel und benötigte Felder.

Die Formular-Analyse zeigt, bei welchen Feldern Besucher das Ausfüllen abbrechen. Das ist günstiger als ein A/B-Experiment und braucht keinen neu generierten Code.

## Typische Fehler KI-generierter Formulare

**„Erfolg“ erscheint, aber es gibt keine Anfrage**
Der Builder hat einen dekorativen Handler erzeugt. Bitten Sie ihn: „Sende die Daten per fetch und zeige Erfolg erst nach einer Antwort mit success: true“.

**Im Code steht noch fk_your_access_key**
Das ist ein Platzhalter. Nehmen Sie den echten Schlüssel aus dem Bereich „Website einbinden“ Ihres Formulars und ersetzen Sie ihn.

**Felder leeren sich nach einem Fehler**
Der Besucher verliert seinen Text. Der Handler sollte die Werte behalten und die Fehlermeldung anzeigen; geben Sie das in den nächsten Prompt.

**Das Formular brach nach der Aktivierung von Turnstile ab**
Das Widget muss in den Code und `cf-turnstile-response` senden. Aktualisieren Sie das Integrationsbeispiel im Dashboard, nachdem Sie den Schutz geändert haben.

**Die Einsendung existiert, aber keine E-Mail kommt an**
Prüfen Sie die E-Mail-Bestätigung von Inhaber und Empfängern. Unbestätigte Adressen sind keine Zustellziele; Details stehen im [Artikel zur Zustellungsdiagnose](/de/blog/contact-form-not-sending-email/).

## Häufig gestellte Fragen

### Sendet mein generiertes Formular überhaupt Daten?

Prüfen Sie es im Tab Netzwerk der Entwicklertools: Ohne POST-Anfrage beim Absenden ist das Formular dekorativ. Dann fehlt ein Handler, der die Daten an einen Endpunkt sendet.

### Brauche ich Supabase oder Lovable Cloud für ein Kontaktformular?

Nur wenn Ihre App bereits serverseitige Abläufe wie Authentifizierung oder Datenbankeinträge nutzt. Für ein isoliertes Kontaktformular ist ein gehostetes Formular-Backend schlanker: ein Endpunkt, ein öffentlicher Schlüssel, keine eigene Infrastruktur.

### Ist der Schlüssel im Frontend-Code ein Risiko?

Der Formularschlüssel ist öffentlich und erlaubt nur Einsendungen für dieses Formular – keinen Zugriff auf Posteingang oder Einstellungen. Geheimnisse wie E-Mail-Passwörter oder Bot-Token gehören nie in den Browser.

### Funktioniert derselbe Endpunkt auch mit reinem HTML?

Ja. Derselbe POST-Endpunkt nimmt auch klassische HTML-Formulare an. Ein eigenes Beispiel zeigt method, action und die benötigten Feldnamen inklusive Honeypot.

## Quellen und Dokumentation

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [MDN: Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
- [Formgong-Dokumentation](https://formgong.com/de/docs/)

[Formularschlüssel holen](https://formgong.com/de/#top)