W tym projekcie celem nie było stworzenie zwykłego formularza kontaktowego. Zadanie polegało na przygotowaniu kompletnego, lekkiego i stabilnego systemu pozyskiwania leadów z artykułu sponsorowanego na portalu 4881.pl, a następnie przekazania tych leadów do klienta oraz do wewnętrznego systemu raportowania agencji.
Oznaczało to połączenie kilku elementów w jeden działający proces: formularza osadzonego w iframe, walidacji i śledzenia źródła, webhooka w n8n, dwóch powiadomień Telegram oraz dwóch zapisów do osobnych Arkuszy Google.
Kontekst
Formularz miał zostać osadzony w artykule na portalu 4881.pl dotyczącym kredytu gotówkowego dla obywateli Ukrainy w Polsce. Ograniczenie techniczne było konkretne: system CMS artykułu pozwalał na wstawienie wyłącznie iframe. W praktyce oznaczało to, że cały formularz musiał działać jako osobna, samowystarczalna strona osadzona w ramce.
Jednocześnie forma nie mogła wyglądać jak rozbudowany landing page. Musiała być możliwie kompaktowa, spokojna wizualnie, responsywna i wygodna na telefonie, tablecie oraz desktopie. Całość miała pasować do portalu miejskiego i nie zaburzać odbioru artykułu.
Co należało rozwiązać
W tym projekcie pojawiło się kilka równoległych wyzwań:
- przygotowanie zwartej wersji formularza, która dobrze działa w iframe bez dostępu do stylów z poziomu artykułu,
- zachowanie pełnej logiki biznesowej formularza i wszystkich wymaganych pól,
- poprawne zbieranie danych trackingowych, takich jak UTM, gclid, fbclid, adres artykułu i źródło wejścia,
- przekazanie leadów do produkcyjnego webhooka n8n,
- wysyłka powiadomień do klienta i osobno do wewnętrznej grupy agencji,
- zapis danych do dwóch różnych Arkuszy Google,
- przygotowanie obsługi błędów, tak aby problemy techniczne również były sygnalizowane w Telegramie.
To nie było więc tylko wdrożenie formularza. Była to mała infrastruktura leadowa zbudowana pod konkretny kanał publikacji.
Zakres prac
Kompaktowy formularz do iframe
Przygotowaliśmy nową, uproszczoną i gęstszą wersję formularza HTML/CSS/JS bez zewnętrznych bibliotek. Formularz został zaprojektowany tak, aby zachowywał czytelność, ale jednocześnie nie zajmował zbyt dużo miejsca w osadzeniu iframe.
Dostosowano układ do dwóch kolumn na większych ekranach i zwartego widoku mobilnego. Zadbaliśmy również o brak zbędnych marginesów zewnętrznych, brak poziomego scrolla i poprawne działanie całej strony wewnątrz iframe.
Logika formularza i walidacja
Zachowaliśmy wymagane pola formularza, w tym dane kontaktowe, informacje o zatrudnieniu, dochodzie, aktywnych kredytach, celu finansowania i pilności decyzji. Dodano również wybór preferowanych kanałów kontaktu w formie bardziej zwartego interfejsu.
Wdrożono walidację pól obowiązkowych, ochronę honeypot przed prostym spamem oraz logikę warunkową: jeśli użytkownik wybiera kontakt przez e-mail, pole e-mail musi być uzupełnione.
Śledzenie źródła leada
Istotnym elementem było poprawne przypisanie leada do konkretnego artykułu. Sam referrer przeglądarki nie zawsze wystarczał, dlatego formularz został przygotowany tak, aby potrafił przyjmować dokładny URL artykułu przez parametr iframe i przekazywać go dalej do webhooka.
Dzięki temu możliwa jest identyfikacja nie tylko samego portalu, ale dokładnego źródła publikacji. Dodatkowo zbierane są dane UTM, gclid, fbclid, adres strony, tytuł strony oraz znacznik czasu wysłania formularza.
Automatyzacja w n8n
Po stronie n8n przygotowaliśmy workflow obsługujący leady przychodzące z formularza. Workflow normalizuje dane, buduje identyfikator leada, przygotowuje uproszczoną logikę priorytetu i rozdziela dane do odpowiednich kanałów.
Lead nie trafia tylko do jednego odbiorcy. Został przygotowany pod równoległą obsługę operacyjną i marketingową.
Telegram dla klienta i Telegram wewnętrzny
Zaprojektowaliśmy dwa osobne typy powiadomień Telegram:
- wiadomość dla klienta z pełnymi danymi kontaktowymi i kontekstem zgłoszenia,
- wiadomość wewnętrzną dla zespołu agencji, z naciskiem na źródło leada, artykuł, kontekst kampanii i podstawowe dane marketingowe.
W obu przypadkach przygotowano teksty w sposób bezpieczny dla Telegrama, z poprawnym formatowaniem HTML i kontrolą linków. Link do artykułu jest prezentowany jako opisowy odnośnik do portalu 4881.pl, natomiast link do tabeli pozostaje widoczny jako pełny URL, co ułatwia szybkie otwieranie po stronie klienta.
Zapis do dwóch Arkuszy Google
Workflow został przygotowany tak, aby równolegle zapisywać dane do dwóch osobnych arkuszy:
- arkusza klienta, który zawiera pełne dane potrzebne do obsługi leada,
- wewnętrznego arkusza agencji, który służy do prostego raportowania liczby leadów, źródła i kontekstu kampanii.
Dane w arkuszu wewnętrznym zostały ograniczone do informacji faktycznie potrzebnych do raportowania i identyfikacji wyników, bez nadmiaru szczegółów.
Obsługa błędów
Dodatkowo przygotowaliśmy osobny workflow error handling w n8n. Jeżeli którykolwiek etap procesu zawiedzie, zespół otrzymuje o tym informację w Telegramie wraz z nazwą workflow, nazwą węzła, komunikatem błędu i linkiem do execution.
To ważne, bo przy systemach leadowych liczy się nie tylko samo uruchomienie procesu, ale też szybkie wykrywanie awarii.
Co było szczególnie ważne
Największa wartość tego projektu polegała na połączeniu prostoty po stronie użytkownika z uporządkowaną logiką po stronie operacyjnej.
Użytkownik widzi jedynie krótki, czytelny formularz osadzony w artykule. W tle działa jednak pełny proces: walidacja, śledzenie źródła, zapis do dwóch arkuszy, dwa niezależne powiadomienia Telegram oraz monitoring błędów.
W takich projektach problem rzadko leży w samym HTML-u. Najwięcej pracy wymaga połączenie wszystkich elementów tak, by działały jako jeden przewidywalny system.
Rezultat
W efekcie powstał kompaktowy system pozyskiwania leadów z artykułu sponsorowanego na portalu 4881.pl, który działa jako osobna embed-forma w iframe, a jednocześnie zasila od razu operacyjną i marketingową część procesu.
Klient otrzymuje lead natychmiast w Telegramie i w swoim arkuszu. Agencja ma równolegle własny zapis źródła, kontekstu kampanii i artykułu. Dodatkowo system sygnalizuje ewentualne błędy techniczne.
To rozwiązanie można w prosty sposób skalować na kolejne artykuły, kolejne formularze i kolejne kampanie bez budowania wszystkiego od nowa.
Co klient otrzymał na końcu
Na końcu klient otrzymał nie tylko działający formularz, ale kompletny, uporządkowany mechanizm obsługi leadów z publikacji sponsorowanej:
- kompaktowy formularz osadzony przez iframe,
- poprawne śledzenie źródła leada,
- automatyczny zapis do Arkusza Google klienta,
- natychmiastowe powiadomienie Telegram dla klienta,
- osobny zapis i powiadomienie wewnętrzne dla agencji,
- workflow obsługi błędów w n8n.
W praktyce oznacza to mniej ręcznej pracy, lepszą kontrolę nad źródłem leadów i szybszą reakcję na zgłoszenia.