Bei diesem Projekt ging es nicht einfach nur um ein Kontaktformular. Ziel war es, ein vollständiges, leichtes und stabiles System zur Lead-Erfassung aus einem gesponserten Artikel auf 4881.pl aufzubauen und diese Leads anschließend sowohl an den Kunden als auch an das interne Reporting der Agentur weiterzuleiten.
Dafür mussten mehrere Elemente zu einem funktionierenden Gesamtprozess verbunden werden: ein per iframe eingebettetes Formular, Validierung und Quellen-Tracking, ein Produktions-Webhook in n8n, zwei Telegram-Benachrichtigungen sowie zwei getrennte Google-Sheets-Anbindungen.
Kontext
Das Formular sollte in einen Artikel auf 4881.pl eingebettet werden, der sich mit Barkrediten für Ukrainer in Polen befasste. Die technische Einschränkung war klar: Das CMS erlaubte nur die Einbindung eines iframe. Praktisch bedeutete das, dass das gesamte Formular als eigenständige Seite innerhalb des iframe funktionieren musste.
Gleichzeitig durfte das Formular nicht wie eine große Landingpage wirken. Es musste kompakt, ruhig im Design, responsiv und sowohl auf Mobilgeräten als auch auf Tablets und Desktop-Geräten komfortabel nutzbar sein. Außerdem musste die Darstellung zum Stil des Stadtportals passen und den Lesefluss des Artikels nicht stören.
Herausforderungen
Mehrere Aufgaben mussten parallel gelöst werden:
- Entwicklung einer kompakten Formularversion, die in einem iframe zuverlässig funktioniert,
- Erhalt der bestehenden Business-Logik und aller erforderlichen Formularfelder,
- saubere Erfassung von Tracking-Daten wie UTM-Parametern, gclid, fbclid, Artikel-URL und Herkunft,
- Übergabe der Leads an einen Produktions-Webhook in n8n,
- Versand von Benachrichtigungen sowohl an den Kunden als auch an das interne Team der Agentur,
- Speicherung der Daten in zwei getrennten Google Sheets,
- Einrichtung eines Fehler-Workflows, damit technische Probleme ebenfalls per Telegram gemeldet werden.
Es ging also nicht nur um die Umsetzung eines Formulars, sondern um den Aufbau einer kompakten Lead-Infrastruktur für ein konkretes redaktionelles Werbeformat.
Was umgesetzt wurde
Kompaktes iframe-Formular
Wir entwickelten eine neue, dichtere und kompaktere Version des Formulars auf Basis von reinem HTML, CSS und JavaScript ohne externe Bibliotheken. Das Formular wurde so gestaltet, dass es gut lesbar bleibt und gleichzeitig möglichst wenig vertikalen Platz im iframe einnimmt.
Das Layout wurde für zwei Spalten auf größeren Bildschirmen und für eine kompakte mobile Darstellung optimiert. Zusätzlich wurden unnötige Außenabstände entfernt, horizontaler Scroll vermieden und die korrekte Darstellung innerhalb des iframe sichergestellt.
Formularlogik und Validierung
Die notwendigen Felder blieben vollständig erhalten, darunter Kontaktdaten, Beschäftigungsart, Einkommen, bestehende Kredite, Finanzierungszweck und Dringlichkeit. Außerdem wurde die Auswahl bevorzugter Kontaktkanäle in einer kompakteren Oberfläche umgesetzt.
Zusätzlich wurden Pflichtfeld-Validierungen, ein Honeypot gegen einfachen Spam sowie eine bedingte Logik implementiert: Wenn der Nutzer E-Mail als Kontaktkanal auswählt, wird das E-Mail-Feld verpflichtend.
Eindeutige Zuordnung der Lead-Quelle
Ein zentraler Punkt war die genaue Zuordnung eines Leads zur konkreten Artikel-Quelle. Ein einfacher Browser-Referrer reicht dafür nicht immer aus. Deshalb wurde das Formular so erweitert, dass die exakte Artikel-URL über einen iframe-Parameter übergeben und im weiteren Prozess mitgeführt werden kann.
Dadurch lässt sich nicht nur das Portal als Quelle identifizieren, sondern auch der konkrete Beitrag. Zusätzlich werden UTM-Parameter, gclid, fbclid, Seiten-URL, Seitentitel und Zeitstempel der Übermittlung erfasst.
Automatisierung in n8n
Auf der Seite von n8n wurde ein Workflow zur Verarbeitung der Leads aufgebaut. Dieser normalisiert die Daten, erstellt eine Lead-ID, berechnet eine einfache Priorität und bereitet die Daten für die Weitergabe an die nächsten Systeme vor.
Der Lead landet dabei nicht nur in einem Kanal. Das System unterstützt gleichzeitig die operative Bearbeitung beim Kunden und das interne Marketing-Reporting der Agentur.
Telegram für den Kunden und internes Telegram
Es wurden zwei getrennte Telegram-Nachrichtentypen aufgebaut:
- eine Nachricht für den Kunden mit vollständigen Lead-Daten zur schnellen Kontaktaufnahme,
- eine interne Nachricht für die Agentur mit Fokus auf Quelle, Artikel, UTM-Daten und Kampagnenkontext.
Beide Nachrichtenformate wurden mit sicherem HTML-Format und sauberer Link-Behandlung umgesetzt. Der Link zum Artikel erscheint als beschreibender Link Artikel auf dem Portal 4881.pl, während der Link zur Tabelle als offener vollständiger URL sichtbar bleibt, was für den Kunden praktischer ist.
Zwei Google-Sheets-Integrationen
Der Workflow wurde so aufgebaut, dass die Daten parallel in zwei getrennte Tabellen geschrieben werden:
- in die Kundentabelle mit vollständigen Lead-Daten,
- in die interne Agentur-Tabelle für vereinfachtes Reporting, Attribution und Ergebnisübersicht.
Die interne Tabelle wurde bewusst auf die Informationen reduziert, die wirklich notwendig sind, um schnell zu erkennen, wann ein Lead eingegangen ist, woher er stammt und aus welchem Artikel er kam.
Fehlerbehandlung
Zusätzlich wurde ein eigener Fehler-Workflow in n8n vorbereitet. Wenn ein Teil des Prozesses fehlschlägt, erhält das interne Team eine Telegram-Benachrichtigung mit Workflow-Namen, betroffenem Node, Fehlermeldung und Link zur betreffenden Ausführung.
Gerade bei Lead-Systemen ist es entscheidend, nicht nur den Prozess zu starten, sondern auch Störungen schnell zu erkennen.
Was besonders wichtig war
Der größte Mehrwert dieses Projekts lag in der Verbindung einer einfachen Nutzererfahrung mit einem strukturierten und kontrollierbaren Backend-Prozess.
Der Nutzer sieht nur ein kurzes und klares Formular innerhalb eines Artikels. Im Hintergrund läuft jedoch ein vollständiger Prozess: Validierung, Quellenzuordnung, Eintrag in zwei Tabellen, zwei unterschiedliche Telegram-Nachrichten und separate Fehlerbenachrichtigung.
Bei solchen Projekten liegt die eigentliche Komplexität selten nur im HTML. Die zentrale Aufgabe besteht darin, alle Elemente so zu verbinden, dass sie als ein verlässlicher Gesamtprozess funktionieren.
Ergebnis
Das Ergebnis war ein kompaktes Lead-System für einen gesponserten Artikel auf 4881.pl, das als iframe-Formular eingebettet ist und gleichzeitig sofort sowohl die operative Bearbeitung beim Kunden als auch das interne Marketing-Reporting der Agentur unterstützt.
Der Kunde erhält jeden Lead direkt in Telegram und in seiner Tabelle. Die Agentur erhält parallel einen internen Datensatz mit Quelle, Kampagnenkontext und konkretem Artikel. Bei technischen Fehlern meldet sich das System zusätzlich in Telegram.
Diese Lösung lässt sich ohne großen Aufwand auf weitere Artikel, weitere Formulare und weitere Kampagnen übertragen, ohne den gesamten Prozess neu aufzubauen.
Was der Kunde am Ende erhalten hat
Am Ende erhielt der Kunde nicht nur ein funktionierendes Formular, sondern einen vollständigen Mechanismus zur Lead-Bearbeitung aus redaktionellen Werbeplatzierungen:
- ein kompaktes, per iframe eingebettetes Formular,
- eine genaue Identifikation der Lead-Quelle,
- automatische Einträge in das Google Sheet des Kunden,
- sofortige Telegram-Benachrichtigung für den Kunden,
- separate interne Protokollierung und Telegram-Benachrichtigung für die Agentur,
- einen Fehler-Workflow in n8n.
In der Praxis bedeutet das weniger manuelle Arbeit, bessere Kontrolle über Lead-Quellen und schnellere Reaktion auf eingehende Anfragen.
