---
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 — Контакти]]
