Contact Form 7 und Elementor an Telegram senden

Drei Wege, WordPress-Anfragen in Telegram zu bekommen

• Ein Telegram-Plugin mit eigenem Bot. Sie legen über BotFather einen Bot an, ermitteln Ihre Chat-ID und tragen beides in ein Plugin ein. Das funktioniert, aber Sie pflegen das Plugin, und der Bot-Token liegt in WordPress.
• Ein Webhook an einen Formular-Dienst. Ihr Formular bleibt, wie es ist. Jede Anfrage geht an einen Dienst, der sie an Telegram und per E-Mail sendet. In dieser Anleitung ist das Formgong.
• Das Formular durch ein HTML-Formular ersetzen. Sie fügen ein schlichtes HTML-Formular in einen Block „Individuelles HTML“ ein und brauchen kein Formular-Plugin mehr. Diesen Weg beschreibt die WordPress-Seite. Die vollständige Anleitung ist WordPress-Kontaktformular ohne Plugin.

Lieber ein eigener Bot? Die Anleitung zum Telegram-Bot für das Kontaktformular zeigt den Code.

Schritt 1: eine Plattform-URL in Formgong anlegen

1. Legen Sie in Formgong ein Formular an und verbinden Sie in den Einstellungen Telegram. Dazu öffnen Sie den Link zum Formgong-Bot und starten ihn mit Start. Für eine Gruppe senden Sie den Verbindungsbefehl in der Gruppe selbst.
2. Öffnen Sie das Formular, gehen Sie zu Plattformen und klicken Sie auf Plattform hinzufügen.
3. Wählen Sie für ein Elementor-Formular Elementor, für Contact Form 7 Sonstiges (JSON- oder Formulardaten).
4. Kopieren Sie die URL sofort. Aus Sicherheitsgründen wird sie nur einmal angezeigt. Wenn Sie sie verlieren, legen Sie eine neue an.

Wer diese URL kennt, kann Anfragen an Ihr Formular senden. Halten Sie sie deshalb aus öffentlichen Seiten und aus dem Code heraus.

Schritt 2a: Contact Form 7 mit dem Plugin CF7 to Webhook

Contact Form 7 hat keine eigene Webhook-Option. Das kostenlose Plugin CF7 to Webhook ergänzt sie. Es sendet jede Anfrage als JSON mit Ihren Feldnamen als Schlüssel. Die Einstellungen nennen wir so, wie sie in der englischen Oberfläche des Plugins heißen.

1. Installieren und aktivieren Sie CF7 to Webhook aus dem WordPress-Pluginverzeichnis.
2. Bearbeiten Sie Ihr Formular und öffnen Sie den neuen Tab Webhook. Setzen Sie den Haken bei Send to Webhook und fügen Sie die Formgong-URL ein.
3. Entfernen Sie den Haken bei Send CF7 mail as usually. Contact Form 7 ruft den Webhook erst auf, nachdem die eigene Mail erfolgreich verschickt wurde. Funktioniert der Mailversand von WordPress nicht, würde der Webhook nie laufen.
4. Ergänzen Sie Ihre Formular-Tags um webhook:-Optionen wie in der Vorlage unten. Sie benennen die Felder im JSON um. Mit name und email füllt Formgong Absendername und Antwortadresse der Benachrichtigungs-Mail. Ein als _subject gesendetes Feld wird zum Betreff.
5. Speichern Sie das Formular und senden Sie einen Test von der veröffentlichten Seite.

Ohne Umbenennung kommen die Anfragen trotzdem an, aber mit Schlüsseln wie your-email. Formgong speichert sie unverändert, nur geht eine Antwort aus der Benachrichtigungs-Mail dann nicht an den Besucher. Feldbeschriftungen dürfen deutsch sein, Tag-Namen schreiben Sie ohne Umlaute.

<label> Ihr Name
    [text* your-name autocomplete:name webhook:name] </label>

<label> Ihre E-Mail-Adresse
    [email* your-email autocomplete:email webhook:email] </label>

<label> Betreff
    [text* your-subject webhook:_subject] </label>

<label> Ihre Nachricht
    [textarea your-message webhook:message] </label>

[submit "Senden"]

POST https://formgong.com/in/YOUR_PLATFORM_TOKEN
Content-Type: application/json; charset=UTF-8

{"name":"Jonas Becker","email":"jonas@example.com","_subject":"Angebotsanfrage","message":"Bitte um ein Angebot für eine Firmenwebsite"}

Schritt 2b: Formulare in Elementor Pro

Das Form-Widget und seine Webhook-Aktion gehören zu Elementor Pro. Das kostenlose Elementor hat kein Formular-Widget. Die Bezeichnungen unten stammen aus der englischen Oberfläche von Elementor.

1. Bearbeiten Sie die Seite und wählen Sie das Formular aus.
2. Fügen Sie unter Actions After Submit die Aktion Webhook hinzu.
3. Öffnen Sie den neuen Bereich Webhook, fügen Sie die Formgong-URL ein und schalten Sie Advanced Data ein.
4. Geben Sie jedem Feld eine klare Beschriftung, denn genau die sehen Sie in Telegram.
5. Klicken Sie auf Update und senden Sie einen Test von der veröffentlichten Seite.

Die E-Mail-Aktion von Elementor können Sie neben dem Webhook behalten oder entfernen, sobald die Telegram-Nachrichten ankommen.

Schritt 3: testen

Senden Sie von der veröffentlichten Seite eine Nachricht, die Sie leicht wiedererkennen, etwa „Test, Jonas“. Nach wenigen Sekunden sollte sie in Telegram, in Ihrem Postfach und im Formgong-Posteingang erscheinen.

Die Plattform-Liste in Formgong zeigt die Zeit der letzten Anfrage und ihren Status: Funktioniert, Testanfrage erhalten oder Die letzte Anfrage ist fehlgeschlagen. Kam gar nichts an, prüfen Sie, ob der Webhook gespeichert und die Seite neu veröffentlicht ist. Die allgemeinen Schritte stehen in der Anleitung Website-Formular an Telegram senden.

Was Sie vorher wissen sollten

• Keine Datei-Uploads. Plattform-URLs nehmen keine Dateien an. CF7 to Webhook sendet Uploads als Links zu Kopien auf Ihrem Server. Lassen Sie die Option, den Dateiinhalt statt eines Links zu senden, deaktiviert.
• Spam wird zweimal geprüft. Zuerst filtern Contact Form 7 oder Elementor, zum Beispiel über die Turnstile-Integration von Contact Form 7. Danach wendet Formgong eigene Spamprüfungen und die Sperrliste an.
• Anfragen zählen zum Tarif. Anfragen über Plattformen zählen wie jede andere Einsendung zu Ihrem monatlichen Formgong-Limit. Der Free-Tarif enthält 300 pro Monat.
• Halten Sie die URL geheim. Gelangt sie nach außen, legen Sie unter Plattformen eine neue URL an. Die alte funktioniert ab sofort nicht mehr.