gb-investigation/funnels/04 — Посадочна samples.md

tags, created

tags	created
воронки посадочна конверсія samples зразки	2026-02-18

Посадочна «Замовити зразок» — /samples

Чому це критично

Кожна CTA на сайті веде до «Замовити зразок», але зараз немає цільової сторінки. Зразок — головний конвертер: клієнт, що потримав матеріал, конвертується в 3-5 разів краще за клієнта, що лише подивився на сайті.

Ця сторінка — єдина конверсійна точка всіх воронок.

Структура сторінки

1. Hero-блок

Заголовок: «Замовте безкоштовний зразок — потрогайте різницю» Підзаголовок: «Отримайте 4-6 зразків різних текстур і кольорів. Доставка 3-7 днів по Україні.»

2. Що отримаєте (3 картки)

• 4-6 зразків різних текстур, формат NF
• Картка характеристик — назва, F300, склад
• Інформація про бренд — історія + відмінності + прайс + контакти

3. Форма заявки

Поле	Тип	Обов'язкове
Ім'я	text	Так
Телефон	tel	Так
Місто	text	Так
Які кольори цікавлять?	multiselect (з каталогу)	Ні
Хто ви?	select: Домовласник / Архітектор / Будівельник / Дилер	Ні
Коментар	textarea	Ні

Обов'язкові лише 3 поля. Без email. Мінімум тертя.

4. Trust-signals (під формою)

• Фото зразків в упаковці
• «F300 — 300 циклів заморозки»
• «Виробництво в Одесі»
• «Доставка 3-7 днів»
• «Зразки безкоштовно для архітекторів»

5. Після надсилання

• Текст: «Дякуємо! Ми зателефонуємо протягом 24 годин»
• Посилання на Telegram для швидких питань
• Конверсійна подія: PostHog.capture('sample_requested') + gtag('event', 'generate_lead')

Бекенд

Використовувати ту саму сутність ContactForm, що і для /contacts:

POST /api/contact-form
{
  name: string (required)
  phone: string (required)
  city: string
  message: string
  type: "Sample" | "Contact" | "Callback"
  colors: string[] (optional — slugs із каталогу)
  role: string (optional)
}

Сутність ContactForm в БД:

Id              int (PK, auto)
Name            string (required)
Phone           string (required)
City            string (nullable)
Message         string (nullable)
Type            enum (Sample, Contact, Callback)
Colors          string (nullable, JSON array)
Role            string (nullable)
SubmittedAt     DateTime (UTC)
IsProcessed     bool (default false)

Пізніше — інтеграція з KeyCRM через webhook або API.

Куди вести CTA з інших сторінок

Сторінка	CTA-текст	Link
Homepage Hero	«Замовити безкоштовний зразок»	/samples
Картка товару	«Замовити зразок цього кольору»	/samples?color={slug}
Калькулятор (після результату)	«Замовити зразок для точного розрахунку»	/samples
/architects	«Замовити зразки для проєкту»	/samples?role=architect
FAQ (кілька місць)	«Замовте зразок — потрогайте різницю»	/samples
Footer (весь сайт)	«Безкоштовний зразок»	/samples

SEO

• Title: «Замовити безкоштовний зразок фасадної плитки — GoodBrick»
• Description: «Отримайте 4-6 зразків фасадної плитки ручної формовки. Доставка 3-7 днів по Україні. Безкоштовно для архітекторів.»
• Schema: LeadAction або ContactAction

Google Ads

Окрема кампанія з ключами:

• замовити зразки фасадної плитки
• безкоштовний зразок плитки
• зразки облицювального кирпича

Очікуваний CR: 8-15% (клієнт вже вирішив замовити — він шукає саме зразок).

Фронтенд — файли для створення

frontend/src/
  app/(site)/samples/
    page.tsx              — серверний компонент, metadata
  components/
    forms/
      sample-form.tsx     — react-hook-form + zod, multiselect кольорів
    samples/
      sample-hero.tsx     — hero-блок
      sample-benefits.tsx — 3 картки «що отримаєте»
      sample-trust.tsx    — trust-signals
      sample-success.tsx  — стан після відправки

Query-параметри

Форма підтримує prefill через URL:

• ?color=sahara — попередньо обрано колір Sahara
• ?role=architect — попередньо обрано «Архітектор»
• ?colors=sahara,ivory,graphite — кілька кольорів

Це дозволяє кожній CTA передавати контекст у форму.

---

Пов'язані документи: 01 — Шляхи клієнтів і воронки, 00 — Обзор воронок, ../site-v2/02 — Контакти