147 lines
5.9 KiB
Markdown
147 lines
5.9 KiB
Markdown
---
|
||
tags:
|
||
- воронки
|
||
- посадочна
|
||
- конверсія
|
||
- samples
|
||
- зразки
|
||
created: 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 — Контакти]]
|