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

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).

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.

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:

1. Anfrage. Der Tab Netzwerk zeigt einen POST an https://formgong.com/submit mit success: true in der Antwort.
2. Datensatz. Die Einsendung erscheint im Formgong-Posteingang dieses Formulars, mit allen Feldern.
3. 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.
4. 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“.

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.