У цьому проєкті завданням було не просто створити контактну форму. Потрібно було побудувати повноцінний, легкий і стабільний механізм збору лідів зі спонсорської статті на порталі 4881.pl, а потім передати ці ліди клієнту та паралельно зафіксувати їх у внутрішній системі звітності агенції.
Це означало об’єднати кілька елементів в одну робочу систему: форму, вбудовану через iframe, валідацію та трекінг джерела, production webhook у n8n, два Telegram-повідомлення та запис у дві окремі Google Sheets.
Контекст
Форма мала бути вбудована в статтю на порталі 4881.pl, присвячену кредиту готівковому для громадян України в Польщі. Технічне обмеження було конкретним: CMS статті дозволяла вставляти лише iframe. Це означало, що вся форма мала працювати як окрема самодостатня сторінка, вбудована в рамку.
Одночасно форма не могла виглядати як окремий великий landing page. Вона мала бути максимально компактною, візуально спокійною, адаптивною та зручною на смартфоні, планшеті й desktop. Усе рішення мало пасувати до міського порталу й не “рвати” статтю.
Що потрібно було вирішити
У проєкті виникло кілька паралельних завдань:
- підготувати компактну версію форми, яка добре працює в iframe без підтримки стилів із самої статті,
- зберегти всю бізнес-логіку форми та необхідний набір полів,
- правильно збирати tracking-дані: UTM, gclid, fbclid, URL статті та джерело переходу,
- передавати ліди у production webhook n8n,
- надсилати повідомлення клієнту й окремо внутрішній команді агенції,
- записувати дані у дві різні Google Sheets,
- підготувати обробку помилок, щоб технічні збої теж фіксувалися в Telegram.
Тобто це був не просто запуск форми, а побудова компактної lead-інфраструктури під конкретний редакційний рекламний формат.
Що було зроблено
Компактна форма для iframe
Було підготовлено нову, щільнішу та простішу версію форми на чистому HTML/CSS/JS без зовнішніх бібліотек. Форму адаптовано так, щоб вона залишалась читабельною, але водночас не займала зайвої висоти в iframe.
Було передбачено двоколонкову структуру на більших екранах, компактний мобільний вигляд, відсутність зайвих зовнішніх відступів, горизонтального скролу та проблем із відображенням усередині iframe.
Логіка форми та валідація
Збережено потрібні поля форми, включно з контактними даними, інформацією про зайнятість, дохід, чинні кредити, мету фінансування та терміновість рішення. Також додано вибір зручних каналів зв’язку в більш компактному форматі.
Реалізовано валідацію обов’язкових полів, honeypot-захист від простого спаму та умовну логіку: якщо користувач обирає контакт через e-mail, поле e-mail стає обов’язковим.
Визначення джерела ліда
Окремо було важливо правильно прив’язати лід до конкретної статті. Один лише referrer браузера не завжди дає точний шлях, тому форму підготували так, щоб вона могла приймати точний URL статті через параметр iframe і передавати його у webhook.
Завдяки цьому можна ідентифікувати не лише сам портал, а й конкретну публікацію. Додатково збираються UTM-мітки, gclid, fbclid, адреса сторінки, заголовок сторінки та час відправки форми.
Автоматизація в n8n
По стороні n8n було побудовано workflow для обробки лідів із форми. Він нормалізує дані, формує ідентифікатор ліда, визначає базовий пріоритет та готує дані для подальших каналів доставки.
Лід не потрапляє лише в один канал. Система одразу підтримує як операційну обробку клієнтом, так і внутрішній маркетинговий облік.
Telegram для клієнта та внутрішній Telegram
Було спроєктовано два окремі типи Telegram-повідомлень:
- повідомлення для клієнта з повними даними ліда для швидкого контакту,
- повідомлення для внутрішньої групи агенції з акцентом на джерело, статтю, UTM і контекст кампанії.
Тексти для Telegram підготовлено з урахуванням коректного HTML-форматування та безпечної обробки посилань. Посилання на статтю показується як текстовий лінк Стаття на порталі 4881.pl, а посилання на таблицю лишається відкритим URL окремим рядком — так це зручніше для клієнта.
Запис у дві Google Sheets
Workflow налаштовано так, щоб паралельно записувати дані в два окремі аркуші:
- клієнтський аркуш із повними даними для опрацювання ліда,
- внутрішній аркуш агенції для базової звітності, атрибуції та контролю результату.
Внутрішня таблиця містить тільки ті дані, які реально потрібні для швидкого розуміння, коли прийшов лід, з якого джерела, з якої статті та в якому контексті.
Обробка помилок
Окремо підготовлено workflow обробки помилок у n8n. Якщо будь-який етап ланцюжка дає збій, внутрішня команда отримує повідомлення в Telegram із назвою workflow, назвою вузла, текстом помилки та посиланням на execution.
Це важливо, оскільки для lead-систем критичним є не лише запуск, а й швидке виявлення збоїв.
Що було особливо важливо
Найбільша цінність цього проєкту — у поєднанні простоти для користувача з логічною й контрольованою структурою в бекенді.
Користувач бачить лише коротку й зрозумілу форму в статті. У той же час у фоні працює повний процес: валідація, збір джерела, запис у дві таблиці, два різні Telegram-повідомлення та окремий канал повідомлення про помилки.
У таких проєктах складність рідко лежить тільки в HTML. Основна робота — побудувати систему так, щоб усі елементи працювали як єдиний передбачуваний процес.
Результат
У результаті було створено компактну систему збору лідів зі спонсорської статті на порталі 4881.pl, яка працює як embed-форма в iframe і водночас одразу передає дані в операційну та маркетингову частину процесу.
Клієнт отримує лід у Telegram і у своїй таблиці. Агенція паралельно бачить внутрішній запис із джерелом, контекстом кампанії та конкретною статтею. У разі технічної помилки система окремо сигналізує про це в Telegram.
Таке рішення легко масштабувати на інші статті, інші форми та інші рекламні кампанії без побудови всього процесу з нуля.
Що клієнт отримав у підсумку
У фіналі клієнт отримав не просто працюючу форму, а готовий механізм обробки лідів із редакційного рекламного розміщення:
- компактну форму, вбудовану через iframe,
- точне визначення джерела ліда,
- автоматичний запис у Google Sheets клієнта,
- миттєве повідомлення для клієнта в Telegram,
- окремий внутрішній запис і Telegram-повідомлення для агенції,
- workflow обробки помилок у n8n.
На практиці це означає менше ручної роботи, кращий контроль за джерелами лідів і швидшу реакцію на звернення.
