ДЕМОЛЕНДІНГ
Лендінг з формою в Telegram і CRM.
Шаблон лендінгу на Nuxt: форма з валідацією, заявки в Telegram-бот і CRM.
Це демо-проєкт: ми зібрали його самі як шаблон для рекламних лендінгів. Клієнта немає — метрики виміряні на тестовому розгортанні.
- ТИП
- ДЕМО
- ТЕРМІН
- 1 тиждень
- КОМАНДА
- Розробник, дизайнер, QA
- ПОСЛУГА
- Розробка сайтів
01
Задача
Показати, як швидко можна зібрати лендінг під рекламу з формою, яка одразу шле заявки в Telegram і CRM. Типова біль малого бізнесу: заявки з форми падають на пошту, їх бачать через пів дня, а частина губиться в спамі.
02
Обмеження
- [WARN]Запуск за тиждень — як під реальну рекламну кампанію
- [WARN]Без платних конструкторів і сторонніх віджетів форми
- [WARN]Заявка не має губитися, навіть якщо CRM тимчасово недоступна
- [WARN]Захист від спаму без капчі, яка знижує конверсію
03
Рішення
Зібрали статичний лендінг на Nuxt і один серверний роут для форми. Ті самі правила валідації працюють у браузері й на сервері, заявка паралельно йде в Telegram-бот і CRM — збій одного каналу не блокує інший.
Статичний лендінгСторінка генерується під час збірки — перший екран без очікування сервера.
Одна схема валідаціїZod-схема спільна для браузера і сервера: помилки біля кожного поля.
Заявка за секундиПовідомлення в Telegram з контактом, текстом і UTM-мітками джерела.
Антиспам без капчіHoneypot-поле, time-trap і ліміт запитів з однієї IP-адреси.
04
Стек
NuxtSSG-лендінгNitroсерверний роут формиZodвалідація на клієнті й серверіTelegram Bot APIсповіщенняCRM APIзапис лідаVercelхостинг
05
Результат у цифрах
ACCESSIBILITY100[PASS] ціль 95+
LCP0,9 с[PASS] норма 2,5 с
Замір: Lighthouse, мобільний профіль, тестове розгортання на Vercel.
06
Що зробили б інакше
01Одразу закладали б відправку в CRM через чергу з повторами, а не прямим запитом із форми.
02Додали б резервний канал (email) із першого дня — Telegram-бот теж буває недоступним.
03Підключали б аналітику подій форми до запуску реклами, а не після перших заявок.
НАСТУПНИЙ КЕЙСІнтернет-магазин на Laravel + Nuxt
ДЕМО