Formulare auf KI-generierten Websites: So kommen die Nachrichten an

Warum senden Formulare auf KI-generierten Websites keine Nachrichten?

Ein HTML-Formular kann Eingaben selbst nicht per E-Mail versenden. Der Browser übermittelt die Daten nur an die Adresse, die im action-Attribut des Formulars eingetragen ist. Dort muss ein Programm laufen, das die Sendung entgegennimmt und weiterverarbeitet. Dieses Programm wird als Backend bezeichnet.

KI-Tools erzeugen in der Regel nur das Frontend, also das, was im Browser sichtbar ist. Die fertige Website wird meist als statische Seite veröffentlicht, etwa über Netlify, Vercel, GitHub Pages oder das Hosting des KI-Tools selbst. Auf diesen Plattformen läuft kein eigenes Backend, das Formularsendungen verarbeiten könnte.

Die KI löst dieses Problem beim Erstellen des Formulars meist nicht. Stattdessen entsteht eine der folgenden Varianten:

Formular ohne Ziel: Das action-Attribut fehlt oder enthält nur einen Platzhalter.

<form action="#" method="post">
  ...
</form>

Scheinbare Erfolgsmeldung: Bei Websites auf Basis von React oder ähnlichen Frameworks fängt ein Skript das Absenden ab, zeigt eine Bestätigung an und verwirft die Daten anschließend.

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(formData);
    setSuccess(true); // „Vielen Dank für Ihre Nachricht!"
};

Diese Variante ist besonders tückisch. Für Besucher sieht alles korrekt aus, doch Anfragen gehen ohne jeden Hinweis verloren.

Mailto-Link: Das Formular öffnet das E-Mail-Programm des Besuchers. Ob die Nachricht tatsächlich abgesendet wird, ist nicht kontrollierbar. Mehr zu den Nachteilen dieser Methode lesen Sie im Artikel So erstellen Sie ein HTML-Formular, das eine E-Mail sendet.

Ist Ihre Website betroffen? Die Schnelldiagnose

Mit den folgenden Prüfungen stellen Sie in wenigen Minuten fest, ob Ihr Formular Nachrichten tatsächlich zustellt.

1. Testsendung durchführen
   Füllen Sie das Formular mit Testdaten aus und senden Sie es ab. Erhalten Sie innerhalb weniger Minuten keine E-Mail, ist das Formular nicht verbunden. Prüfen Sie dabei auch den Spam-Ordner.
2. action-Attribut prüfen
   Öffnen Sie die Seite im Browser, klicken Sie mit der rechten Maustaste auf das Formular und wählen Sie „Untersuchen“. Im <form>-Element sehen Sie das action-Attribut:
   • fehlt oder enthält # → das Formular hat kein Ziel
   • beginnt mit mailto: → der Versand hängt vom E-Mail-Programm des Besuchers ab
   • enthält eine URL eines Formular-Backends → das Formular ist verbunden
3. Verhalten nach dem Absenden beobachten
   Achten Sie auf folgende Anzeichen:
   • die Seite lädt neu, ohne dass eine E-Mail ankommt
   • es erscheint eine Fehlerseite (z. B. 404 oder 405)
   • eine Erfolgsmeldung erscheint, im Netzwerk-Tab der Entwicklertools ist aber keine Anfrage an einen externen Dienst zu sehen

Trifft einer dieser Punkte zu, hilft die Lösung im nächsten Abschnitt.

So verbinden Sie Ihr Formular in drei Schritten

Ein Formular-Backend ist ein Online-Dienst, der Formularsendungen entgegennimmt und per E-Mail an Sie weiterleitet. Sie benötigen dafür keinen eigenen Server und keinen Server-Code. Es genügt, eine individuelle Sendeadresse in Ihr Formular einzutragen.

Schritt 1: Sendeadresse anfordern

Fordern Sie unter form.taxi/panel/create-endpoint eine Sendeadresse an. Sie geben dazu Ihre E-Mail-Adresse und einen Namen für das Formular an. Sie erhalten eine individuelle URL im Format https://form.taxi/s/FORM_CODE.

Schritt 2: Sendeadresse in das Formular eintragen

Tragen Sie die Sendeadresse im action-Attribut des Formulars ein und setzen Sie die Methode auf POST. Achten Sie darauf, dass jedes Eingabefeld ein name-Attribut besitzt. Felder ohne name werden beim Absenden nicht übertragen.

<form action="https://form.taxi/s/FORM_CODE" method="POST">
    <label for="name">Name</label>
    <input type="text" id="name" name="Name" required>

    <label for="email">E-Mail</label>
    <input type="email" id="email" name="E-Mail" required>

    <label for="nachricht">Nachricht</label>
    <textarea id="nachricht" name="Nachricht" required></textarea>

    <button type="submit">Absenden</button>
</form>

Wenn Sie den Code nicht selbst bearbeiten möchten, beauftragen Sie das KI-Tool, mit dem Sie die Website erstellt haben:

Verbinde das Kontaktformular mit dem Formular-Backend Form.taxi. Setze das action-Attribut auf https://form.taxi/s/FORM_CODE und die Methode auf POST. Entferne vorhandene JavaScript-Handler, die das Absenden abfangen, und stelle sicher, dass jedes Feld ein name-Attribut hat.

Ersetzen Sie FORM_CODE durch Ihren persönlichen Code. Passende Anweisungen für einzelne KI-Tools finden Sie im Abschnitt Prompts für KI-Tools.

Schritt 3: Konto bestätigen und Formular testen

Nach dem Anfordern der Sendeadresse erhalten Sie eine E-Mail mit einem Bestätigungslink. Damit schalten Sie Ihr Form.taxi-Konto frei. Veröffentlichen Sie anschließend die geänderte Website und senden Sie das Formular mit Testdaten ab. Die Eingaben erhalten Sie als E-Mail an die angegebene Adresse. Im Form.taxi-Konto sind alle Sendungen außerdem im Sendungsarchiv abrufbar. Dort können Sie auch den Spamschutz einstellen, nach dem Absenden auf eine eigene Danke-Seite umleiten und weitere Optionen festlegen.

Wie verbinden Sie das Formular direkt im KI-Tool?

Die meisten KI-Website-Builder setzen Änderungen am Formular zuverlässig um, wenn die Anweisung konkret ist. Wichtig ist, dass die KI das Formular per normalem POST an die Sendeadresse übermittelt. Sie soll keine eigene Server-Funktion anlegen und keinen zusätzlichen E-Mail-Dienst einbinden.

Universeller Prompt

Diese Anweisung funktioniert in allen gängigen KI-Tools. Ersetzen Sie FORM_CODE durch Ihren persönlichen Code.

Verbinde das Kontaktformular mit dem Formular-Backend Form.taxi. Setze das action-Attribut des form-Elements auf https://form.taxi/s/FORM_CODE und die Methode auf POST. Entferne JavaScript-Handler, die das Absenden abfangen (z. B. preventDefault), sowie simulierte Erfolgsmeldungen. Stelle sicher, dass jedes Eingabefeld ein eindeutiges name-Attribut hat. Lege keine Server-Funktion, API-Route oder Datenbank für das Formular an.

Hinweise zu einzelnen Tools

Lovable

Lovable erstellt Websites auf Basis von React und schlägt für Formulare häufig eine Anbindung an Supabase vor. Für den reinen E-Mail-Empfang ist das nicht nötig. Ergänzen Sie den Prompt bei Bedarf um: „Verwende kein Supabase für das Formular.“

Bolt

Bolt arbeitet mit unterschiedlichen Frameworks. Prüfen Sie nach der Änderung im Code, ob das <form>-Element das action-Attribut tatsächlich enthält. Bei Komponenten-Bibliotheken wird das Formular manchmal in eine eigene Komponente ausgelagert.

v0

v0 erzeugt Next.js-Projekte und schlägt für Formulare oft Server Actions oder API-Routen vor, etwa in Verbindung mit einem E-Mail-Dienst. Ergänzen Sie den Prompt um: „Verwende keine Server Action und keine API-Route, sondern ein normales HTML-Formular mit action-Attribut.“

ChatGPT, Claude, Gemini (HTML-Ausgabe)

Wenn Sie den Code der Website direkt im Chat erstellen lassen, nennen Sie die Sendeadresse gleich in der ersten Anfrage. So entsteht das Formular von Beginn an mit dem richtigen Ziel, zum Beispiel:

Erstelle eine einfache Website für meine Tischlerei mit einem Kontaktformular (Name, E-Mail, Telefon, Nachricht). Das Formular soll per POST an https://form.taxi/s/FORM_CODE gesendet werden.

Cursor, Claude Code und andere Coding-Agenten

Coding-Agenten können die Sendeadresse auch selbst anlegen. Wie das über die Schnittstelle von Form.taxi funktioniert, beschreibt der nächste Abschnitt.

Häufige Stolpersteine

• Fehlende name-Attribute: KI-generierte React-Formulare speichern Eingaben oft nur im Komponenten-Zustand. Ohne name werden die Felder nicht übertragen.
• Abgefangenes Absenden: Ein verbleibendes e.preventDefault() verhindert die Übermittlung. Die Erfolgsmeldung erscheint trotzdem.
• Änderung nicht veröffentlicht: Viele Tools unterscheiden zwischen Vorschau und veröffentlichter Version. Testen Sie das Formular auf der veröffentlichten Website.
• Erfolgsmeldung ohne Seitenwechsel: Soll die Bestätigung auf der eigenen Seite erscheinen, kann das Formular auch per JavaScript an Form.taxi gesendet werden. Die Anleitung finden Sie unter JavaScript-Sendungen.

Für KI-Agenten und Entwickler: Sendeadresse per API anlegen

Form.taxi bietet eine öffentliche Schnittstelle, über die eine Sendeadresse ohne vorherige Anmeldung angelegt werden kann. KI-Agenten und Entwicklerwerkzeuge können damit ein Formular vollständig selbst verbinden. Sie fragen dazu nur die E-Mail-Adresse des Nutzers ab.

Anfrage

POST https://form.taxi/api/v1/create-endpoint
Content-Type: application/json

Beispiel mit curl:

curl -X POST https://form.taxi/api/v1/create-endpoint \
  -H "Content-Type: application/json" \
  -d '{
    "email": "user@example.com",
    "form_name": "Kontaktformular",
    "language": "de",
    "website_url": "https://example.com",
    "timezone": "Europe/Vienna"
  }'

Antwort

Bei Erfolg (Status 201) enthält die Antwort die Sendeadresse:

{
    "success": true,
    "endpoint_url": "https://form.taxi/s/xxxxxxxx"
}

Empfohlener Ablauf für KI-Agenten

1. Den Nutzer nach der E-Mail-Adresse fragen, an die Sendungen zugestellt werden sollen. Die Schnittstelle legt damit ein Konto an, daher nur mit Zustimmung des Nutzers verwenden.
2. Die Anfrage an /api/v1/create-endpoint senden.
3. Bei 201: die endpoint_url als action-Attribut mit method="POST" in das Formular eintragen und prüfen, dass alle Felder ein name-Attribut haben. Den Nutzer darauf hinweisen, dass er sein Konto über den zugesandten Bestätigungslink freischalten muss.
4. Bei 409: dem Nutzer mitteilen, dass mit dieser E-Mail-Adresse bereits ein Konto besteht. Den in der Fehlermeldung angegebenen Login-Link weitergeben, damit der Nutzer das Formular im Panel anlegen kann.
5. Den Nutzer auffordern, das Formular nach der Veröffentlichung mit einer Testsendung zu prüfen.

Die vollständige Beschreibung inklusive OpenAPI-Spezifikation finden Sie in der API-Dokumentation. Eine maschinenlesbare Übersicht des Dienstes steht unter form.taxi/llms.txt bereit.

Worauf sollten Sie beim Datenschutz achten?

Kontaktformulare verarbeiten personenbezogene Daten wie Namen und E-Mail-Adressen. Für Websites im EU-Raum gelten daher die Anforderungen der DSGVO. Das betrifft auch den Dienst, der die Formularsendungen entgegennimmt.

Viele KI-Website-Builder und Hosting-Plattformen haben ihren Sitz außerhalb der EU. Die Verarbeitung der Formulardaten lässt sich davon jedoch trennen: Mit einem Formular-Backend gelangen die Eingaben direkt vom Browser des Besuchers zum Backend-Dienst, nicht über die Plattform, auf der die Website liegt.

Bei Form.taxi gilt:

• Hosting in Deutschland, Betrieb durch ein Unternehmen mit Sitz in Österreich
• Auftragsverarbeitungsvertrag (AVV) nach Art. 28 DSGVO im Panel abschließbar; ein Muster-AVV ist ohne Anmeldung einsehbar
• Textbaustein für Ihre Datenschutzerklärung im Panel-Bereich „Datenschutz“
• Einsendungen werden maximal ein Jahr gespeichert

Ergänzen Sie in Ihrer Datenschutzerklärung einen Hinweis auf die Verarbeitung der Formulardaten durch Form.taxi. Die Unterauftragnehmer sind im AVV aufgeführt.

Welche weiteren Funktionen stehen zur Verfügung?

Nach der Grundeinrichtung lässt sich die Verarbeitung der Sendungen in den Formulareinstellungen anpassen:

• Spamfilter: Spam-Sendungen werden aussortiert und zählen nicht zum monatlichen Kontingent.
• Auto-Response: Absender erhalten automatisch eine Bestätigung ihrer Nachricht.
• Dateiuploads: Besucher können Dateien mitsenden.
• Sendungsarchiv: Alle Sendungen sind im Panel abrufbar.
• Webhooks und Automatisierung: Sendungen lassen sich an andere Anwendungen weiterleiten, etwa über Zapier oder Integrately.

Eine Übersicht aller Funktionen finden Sie unter Leistungen und in der Dokumentation.

Häufig gestellte Fragen

Funktioniert Form.taxi mit jedem KI-Website-Builder?

Ja, sofern das Formular als HTML-Formular mit action-Attribut umgesetzt werden kann. Das ist bei Lovable, Bolt, v0 und bei Websites aus ChatGPT, Claude oder Gemini der Fall.

Brauche ich Programmierkenntnisse?

Nein. Sie können die Sendeadresse selbst in den Code eintragen oder das KI-Tool mit einem der Prompts oben beauftragen.

Was kostet die Nutzung?

Die Basisnutzung ist kostenlos. Für höhere Sendungszahlen und zusätzliche Funktionen gibt es kostenpflichtige Pakete. Details finden Sie unter Preise.

Kann eine KI die Sendeadresse selbst anlegen?

Ja. Über die Schnittstelle POST https://form.taxi/api/v1/create-endpoint können KI-Agenten eine Sendeadresse anlegen und direkt ins Formular eintragen. Die Beschreibung finden Sie im API-Abschnitt.

Warum nicht einfach einen Mailto-Link verwenden?

Ein Mailto-Link öffnet nur das E-Mail-Programm des Besuchers. Ob die Nachricht abgesendet wird, ist nicht kontrollierbar, und Ihre E-Mail-Adresse steht ungeschützt im Quellcode.

Warum zeigt mein Formular eine Erfolgsmeldung, obwohl keine E-Mail ankommt?

KI-Tools erzeugen häufig Formulare, die das Absenden per JavaScript abfangen und nur eine Bestätigung anzeigen. Die Daten werden dabei nicht übertragen. Wie Sie das erkennen, lesen Sie in der Schnelldiagnose.