So fügen Sie ein funktionierendes Kontaktformular in Lovable ein

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

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.

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

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.

1. Auf der Website sollte eine Meldung über die erfolgreiche Einsendung angezeigt werden.
2. Öffnen Sie in Formgong den Abschnitt „Einsendungen“ dieses Formulars. Vergewissern Sie sich, dass die Testnachricht und alle erwarteten Felder vorhanden sind.
3. Ü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.

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.

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