# So fügen Sie ein funktionierendes Kontaktformular in Lovable ein

Verbinden Sie Ihr Lovable-Kontaktformular mit E-Mail und Telegram. Kopieren Sie einen vorgefertigten Prompt, verifizieren Sie Ihre E-Mail-Adresse und überprüfen Sie Ihre erste Einsendung in Formgong.

Author: Formgong
Published: 2026-10-01
Language: de
Canonical: https://formgong.com/de/blog/lovable-contact-form-email-telegram/

Um ein Lovable-Kontaktformular mit Formgong zu verbinden, holen Sie sich einen öffentlichen Formularschlüssel, verifizieren Sie Ihre E-Mail-Adresse und fügen Sie den Integrationsprompt in Lovable ein. Das Formular sendet die Daten an /submit; Formgong speichert die Einsendungen und versendet Benachrichtigungen per E-Mail sowie an Ihren verbundenen Telegram-Chat. Sie benötigen für dieses Formular kein eigenes Backend.

## Wann sich ein eigener Formular-Dienst lohnt

Ihre Lovable-Landingpage verfügt bereits über Eingabefelder, eine Schaltfläche und eine Dankesnachricht. Als Nächstes müssen Sie sicherstellen, dass eine eingereichte Einsendung auch tatsächlich bei Ihnen ankommt. Eine Erfolgsmeldung auf der Seite allein ist kein Beweis dafür, dass die Daten gespeichert oder per E-Mail versendet wurden.

Lovable verfügt über ein eigenes Backend sowie E-Mail- und Telegram-Konnektoren. Wenn Ihre App diese bereits für Konten, Datenbankeinträge und andere Arbeitsabläufe nutzt, kann es sinnvoll sein, das Formular dort zu belassen. Formgong ist nützlich, wenn Sie ein Kontaktformular, E-Mail- und Telegram-Benachrichtigungen sowie einen separaten Posteingang für Einsendungen wünschen. Das Design des Formulars verbleibt auf Ihrer Website.

Im Folgenden werden wir ein Formular mit Feldern für Name, E-Mail-Adresse und Nachricht einrichten. Sie benötigen ein Lovable-Projekt, eine E-Mail-Adresse, auf die Sie Zugriff haben, sowie optional ein Telegram-Konto.

## 1. Holen Sie sich Ihren Formularschlüssel und verifizieren Sie Ihre E-Mail-Adresse

Öffnen Sie [Formgong](/de/#top) und geben Sie Ihre E-Mail-Adresse ein. Ihr Formularschlüssel wird auf dem Bildschirm angezeigt. Öffnen Sie die E-Mail von Formgong und folgen Sie dem Bestätigungslink. Dadurch erhalten Sie Zugriff auf das Dashboard und ermöglichen den Versand von Benachrichtigungen an Ihre Adresse.

Vor der E-Mail-Verifizierung werden Einsendungen möglicherweise bis zur Bestätigung zurückgehalten. Schließen Sie diesen Schritt ab, bevor Sie die Zustellung testen. Sie können sich auch mit Google anmelden, sofern diese Schaltfläche verfügbar ist.

Öffnen Sie im Dashboard Ihr Formular und wählen Sie anschließend **Website einbinden**. Dieser Abschnitt enthält den Schlüssel und einen Prompt für dieses bestimmte Formular. Verwenden Sie diesen Schlüssel anstelle des Beispielschlüssels `fk_your_access_key`.

**Der Formularschlüssel ist öffentlich.** Er ermöglicht die Einsendung von Formularen und kann im Code Ihrer Website erscheinen. Er gewährt keinen Zugriff auf Ihren Posteingang und ermöglicht keine Bearbeitung Ihrer Einstellungen. Sie müssen im Frontend weder ein Passwort noch einen Telegram-Bot-Token noch den geheimen Schlüssel Ihres E-Mail-Anbieters angeben.

## 2. Fügen Sie den Prompt in Lovable ein

Öffnen Sie den Chat Ihres Projekts. Falls Sie bereits über ein Formular verfügen, beginnen Sie mit: „Mein bestehendes Formular mit Formgong verbinden. Das Design und die Felder beibehalten.“ Fügen Sie anschließend den Prompt aus „Website einbinden“ ein.

Dies ist ein Beispiel-Prompt. Ersetzen Sie `fk_your_access_key` durch Ihren Formularschlüssel, bevor Sie ihn verwenden. Falls Ihr Formular zusätzliche Felder enthält, bitten Sie Lovable, deren Namen beizubehalten.

```text
Füge ein Kontaktformular hinzu, das Anfragen an Formgong sendet. Erstelle kein Backend, keine Datenbank und keine Secrets.

- POST https://formgong.com/submit
- Verstecktes Feld access_key mit dem Wert fk_your_access_key (der Schlüssel ist öffentlich und gehört in den Frontend-Code)
- Felder: name, email, optional phone, message. Beschriftungen auf Deutsch
- Honeypot: Textfeld botcheck, per CSS außerhalb des sichtbaren Bereichs (position:absolute; left:-10000px), tabindex="-1", autocomplete="off"
- Keine Datei-Uploads und keine Serverfunktionen, kein Resend
- Normales HTML-Formular (method="POST" action="https://formgong.com/submit") oder fetch mit Content-Type application/json und Accept: application/json. Erfolg bedeutet json.success === true
- Nach Erfolg eine Danke-Meldung anzeigen
```

### 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!"
}
```

## 3. Überprüfen Sie die Einsendungen, nicht nur die Erfolgsmeldung

Wenn Lovable die Änderungen abgeschlossen hat, öffnen Sie Ihr Formular in der Vorschau. Geben Sie einen Testnamen, eine E-Mail-Adresse, über die Sie verfügen, und eine Nachricht ein, die Sie wiedererkennen können. Senden Sie das Formular einmal ab.

- Auf der Website sollte eine Meldung über die erfolgreiche Einsendung angezeigt werden.

- Öffnen Sie in Formgong den Abschnitt „Einsendungen“ dieses Formulars. Vergewissern Sie sich, dass die Testnachricht und alle erwarteten Felder vorhanden sind.

- Überprüfen Sie Ihre Benachrichtigungs-E-Mails, einschließlich des Spam-Ordners. Wenn der Besucher eine E-Mail-Adresse angegeben hat, sollte die Antwort auf die Benachrichtigung an diesen Besucher gerichtet sein.

Wiederholen Sie den Test nach der Veröffentlichung der Website auf deren tatsächlicher Domain. Eine funktionierende Editor-Vorschau ist kein Ersatz für das Testen der veröffentlichten Version.

**Wenn das Formular „fetch“ verwendet:** Zeigen Sie den Erfolgszustand erst an, nachdem Formgong eine Antwort zurückgegeben hat `success: true`. Behalten Sie die Eingaben des Besuchers bei, wenn eine Anfrage fehlschlägt, damit er es erneut versuchen kann.

## 4. Telegram verbinden

Öffnen Sie den Telegram-Abschnitt in den Einstellungen dieses Formulars und klicken Sie auf die Schaltfläche „Verbinden“. Dadurch wird der Formgong-Bot mit einem Link zu Ihrem Formular geöffnet. Starten Sie den Bot, um die Verbindung herzustellen. Sie müssen keinen eigenen Bot erstellen oder ein Bot-Token in Lovable eingeben.

Für eine Gruppe befolgen Sie bitte die Anweisungen im selben Abschnitt: Fügen Sie den Bot hinzu und senden Sie `/connect` mit dem angezeigten Code. Der Verbindungscode unterscheidet sich von Ihrem öffentlichen Formularschlüssel.

Kehren Sie zu den Einstellungen zurück und überprüfen Sie, ob der Chat verbunden ist. Senden Sie eine weitere Test-Einsendung von Ihrer Website. Diese sollte in diesem Chat und im Formgong-Posteingang erscheinen. E-Mail und Telegram sind separate Benachrichtigungskanäle.

## Was ist zu überprüfen, wenn eine Einsendung nicht eintrifft?

**Die Website meldet „Erfolg“, doch der Posteingang ist leer**
Überprüfen Sie, ob das Formular einen POST-Request an `https://formgong.com/submit` mit einem echten `access_key` sendet. Bitten Sie Lovable, die Erfolgsmeldung erst nach der API-Antwort anzuzeigen, statt unmittelbar nach dem Klick auf die Schaltfläche.

**Die Einsendung ist erfolgt, aber die E-Mail fehlt**
Überprüfen Sie die E-Mail-Verifizierung, die Empfängeradresse in den Einstellungen sowie den Spam-Ordner. Falls die Einsendung als Spam markiert wurde, überprüfen Sie die Registerkarte „Spam“ und das Feld `botcheck`: Ein Besucher sollte dieses niemals ausfüllen.

**Die Einsendung ist erfolgt, aber Telegram meldet sich nicht**
Überprüfen Sie, ob der Chat zu diesem Formular gehört, ob der Bot gestartet wurde und ob er nicht blockiert wurde. Bei einer Gruppe vergewissern Sie sich, dass der Bot Mitglied ist und der Schritt `/connect` abgeschlossen wurde.

**Das Formular funktioniert nach der Aktivierung von Turnstile nicht mehr**
Aktualisieren Sie den Prompt unter „Website einbinden“ und fügen Sie das Widget mit dem aktuellen Site-Schlüssel hinzu. Ihr Formular muss das resultierende Turnstile-Token übermitteln. Einzelheiten finden Sie in der [Integrationsanleitung](/de/docs/lovable/).

**Sie müssen Dateien akzeptieren**
In diesem Beispiel handelt es sich um Textfelder. Anhänge können in den Formulareinstellungen aktiviert werden, nachdem Sie Ihre E-Mail-Adresse verifiziert und Turnstile hinzugefügt haben. Senden Sie native Multipart-Dateien, nicht Base64.

## Bevor Sie live gehen

Testen Sie das Formular auf einem Smartphone und einem Computer unter der veröffentlichten Domain. Vergewissern Sie sich, wer Benachrichtigungen erhält, welche Dankesseite dem Besucher angezeigt wird und was geschieht, wenn eine Einsendung fehlschlägt. Löschen Sie die Eingabefelder nach einer fehlgeschlagenen Einsendung nicht.

Sobald das Formular funktioniert, ändern Sie in Formgong die Empfänger, Telegram, den E-Mail-Betreff und das Ziel nach der Einsendung. Für diese Einstellungen ist kein Neuaufbau Ihrer Website erforderlich. Wenn Sie sehen möchten, an welcher Stelle Besucher ein Formular unvollständig verlassen, fügen Sie [Formularanalysen](/de/docs/analytics/) hinzu.

Der Free-Tarif umfasst 300 Einsendungen pro Konto und Monat sowie E-Mail und Telegram. Beginnen Sie mit einem Formular und einer von Ihnen geprüften Test-Einsendung.

## Häufig gestellte Fragen

### Benötigt ein Lovable-Kontaktformular Supabase?

Nein. Ein mit Formgong verbundenes Formular benötigt kein separates Supabase-Projekt; es sendet die Einsendungen direkt an Formgong. Falls Ihre App bereits Lovable Cloud oder Supabase nutzt, können Sie das Formular stattdessen auf diesem bestehenden Backend belassen.

### Braucht ein Lovable-Kontaktformular Resend?

Nein. Fügen Sie weder den Resend-Konnektor noch einen Resend-API-Aufruf hinzu. Formgong versendet die Benachrichtigungs-E-Mail. Geben Sie den geheimen Schlüssel des E-Mail-Anbieters nicht im Frontend an.

### Kann ich den Formgong-Schlüssel in den Frontend-Code einfügen?

Ja. access_key ist ein öffentlicher Übermittlungsschlüssel. Er ermöglicht es nicht, Ihren Posteingang zu lesen oder Einstellungen zu ändern. Sie müssen weder den geheimen Schlüssel eines E-Mail-Anbieters noch ein Telegram-Bot-Token in den Code Ihrer Website einfügen.

### Sind Telegram-Benachrichtigungen kostenlos?

E-Mail und Telegram sind im kostenlosen Tarif von Formgong enthalten, mit 300 Einsendungen pro Konto und Monat. Verifizieren Sie Ihre E-Mail-Adresse und verbinden Sie einen Chat mit dem entsprechenden Formular, bevor Sie die Zustellung von Benachrichtigungen testen.

### Wird Formgong das Design meines Formulars verändern?

Formgong empfängt die Einsendungen; die Felder und Schaltflächen verbleiben auf Ihrer Website. Bitten Sie Lovable, das bestehende Formular unter Beibehaltung seines Designs anzubinden, und überprüfen Sie anschließend das Ergebnis im Editor sowie auf einem Smartphone.

## Quellen und Dokumentation

- [Lovable Cloud](https://docs.lovable.dev/features/cloud)
- [Lovable Resend connector](https://docs.lovable.dev/integrations/resend)
- [Lovable Telegram connector](https://docs.lovable.dev/integrations/telegram)
- [Formgong-Dokumentation](https://formgong.com/de/docs/lovable/)

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