Як зробити форму на сайті, яка приносить заявки — а не відлякує клієнтів
Коротко
- → Кожне додаткове поле у формі знижує конверсію на 5–10%. Для першого контакту достатньо імені, телефону і одного рядка «Що вас цікавить?»
- → Кнопка «Відправити» — найслабший варіант. «Отримати консультацію» або «Дізнатись ціну» конвертують краще, бо обіцяють конкретний результат
- → Форма, яка не працює на мобільному — це не просто незручність. Це 60–70% втраченого трафіку, який ніколи не стане клієнтами
- → Після відправки форми клієнт повинен зрозуміти три речі: заявка прийнята, коли чекати відповідь і що робити далі
Сайт приводить трафік. Контент переконує. А далі все залежить від одного елемента — форми зворотного зв'язку. Це останній крок між «мені цікаво» і «ось моя заявка». І саме на цьому кроці більшість сайтів втрачає клієнтів. Не через поганий дизайн або слабке SEO — а через форму, яку незручно заповнювати, незрозуміло навіщо, або яка взагалі не працює.
Я переробляв форми десятків сайтів. І бачив, як зміна трьох речей — кількості полів, тексту кнопки і повідомлення після відправки — збільшувала конверсію вдвічі без жодних змін у трафіку. Ця стаття — про конкретні речі, які можна змінити у формі вже сьогодні.
Менше полів — більше заявок
Це найпростіше і найефективніше правило. Дослідження HubSpot і ConversionXL показують одне й те саме: кожне додаткове поле знижує ймовірність заповнення на 5–10%. Форма з 3 полями конвертує вдвічі краще за форму з 7 полями.
Мінімальний набір для першого контакту: ім'я, телефон або email, і одне необов'язкове поле «Опишіть вашу задачу». Все. Адресу, бюджет, терміни, назву компанії — це ви з'ясуєте під час дзвінка. Завдання форми — не зібрати анкету, а отримати контакт. Кожне поле, яке ви додаєте, повинно відповідати на питання: «Без цієї інформації я не зможу передзвонити?» Якщо зможете — поле зайве.
Виняток — форми, де фільтрація потрібна навмисно. Якщо ви отримуєте 50 заявок на день і 40 з них нецільові — додаткове поле «Ваш бюджет» відсіче нерелевантні звернення. Але це рішення для сайтів із великим трафіком. Для більшості бізнес-сайтів кожна заявка на вагу золота.
Підписи до полів: що писати і де
Підпис (label) — це текст над або біля поля. «Ваше ім'я», «Номер телефону», «Повідомлення». Здається очевидним, але я регулярно бачу форми, де підписи тільки всередині полів (placeholder). Проблема: коли користувач починає друкувати, підпис зникає, і він уже не пам'ятає, що саме потрібно ввести.
Правило: підписи — над полем, завжди видимі. Placeholder — для прикладу формату: «+380 XX XXX XX XX» або «Напишіть, який сайт вам потрібен». Placeholder доповнює підпис, але не замінює його. Поля без підписів — одна з типових помилок, яка коштує конверсії.
Якщо поле необов'язкове — позначте це явно: «(необов'язково)» після підпису. Люди не люблять заповнювати те, що здається обов'язковим, але насправді не є. Краще 3 поля без жодного «необов'язково», ніж 5 полів із двома «необов'язково».
Потрібна консультація?
Безкоштовно розберу ваш проєкт і дам рекомендації
Що показати після натискання кнопки
Клієнт заповнив форму і натиснув кнопку. Що далі? На більшості сайтів — коротке «Дякуємо, ваш запит відправлено». Це мінімум, але не ідеал. Хороше повідомлення після відправки відповідає на три питання: чи заявка прийнята (так, все ок), коли чекати відповідь (протягом 2 годин, завтра до 12:00, у робочий час), і що робити далі (перевірте пошту, чекайте дзвінок).
Варіант, який працює ще краще — окрема сторінка подяки (thank you page). Клієнт потрапляє на нову сторінку з підтвердженням і додатковою цінністю: посиланням на портфоліо, гайдом по підготовці до дзвінка, або калькулятором вартості. Бонус: окрема сторінка дозволяє точно відстежувати конверсії в Google Analytics (подія = перехід на /thank-you).
Найгірший варіант — нічого. Кнопка натиснута, форма очистилась, і клієнт не розуміє: заявка пішла чи щось зламалось? Він натискає ще раз, отримує дубль, дратується — і йде до конкурента.
Форма на мобільному — окрема історія
60–70% відвідувачів бізнес-сайтів в Україні — з мобільних. Якщо ваша форма зручна на десктопі, але незручна на телефоні — ви втрачаєте більшість потенційних клієнтів. Мобільна форма — це не зменшена копія десктопної. Це окремий досвід, який потрібно проєктувати окремо.
Конкретні правила: поля повинні бути достатньо високими (мінімум 44px), щоб потрапити пальцем. Кнопка — на всю ширину екрану, не маленька і не збоку. Між полями — достатній відступ, щоб не натиснути не туди. Для поля телефону — вказати type="tel", щоб телефон показав цифрову клавіатуру замість звичайної. Для email — type="email". Це дрібниці, які суттєво впливають на мобільний досвід.
Окремий біль — клавіатура, яка закриває кнопку «Відправити». Користувач заповнив останнє поле, хоче натиснути кнопку — а її не видно. Потрібно закрити клавіатуру, прокрутити вниз, знайти кнопку. Кожен такий момент тертя — це втрачена заявка. Рішення: кнопка повинна бути видимою після заповнення останнього поля без додаткових дій.
Валідація: як повідомляти про помилки
Клієнт заповнив форму, натиснув кнопку — і нічого. Або з'явився червоний текст десь нагорі: «Заповніть обов'язкові поля». Яке поле? Що не так? Що виправити? Невдала валідація — причина, через яку 10–20% потенційних заявок не доходять до відправки.
Правильна валідація — інлайнова: помилка показується одразу біля поля, яке заповнене некоректно. Текст помилки — конкретний: не «Невірний формат», а «Введіть номер у форматі +380XXXXXXXXX». Поле з помилкою виділяється кольором (червона рамка). Коли користувач виправляє помилку — індикатор зникає одразу, не після повторного натискання кнопки.
І ще: не перестарайтесь із валідацією. Я бачив форми, які вимагали конкретний формат номера телефону, не приймали +38, не приймали пробіли, не приймали дужки. Клієнт пише свій номер — і форма каже «неправильно». Валідуйте мінімально: чи є символи в полі імені, чи є цифри в телефоні, чи є @ в email. Все інше — зайве тертя.
Де розмістити форму на сторінці
На лендінгу форма повинна бути в двох місцях: у верхній частині (для тих, хто вже готовий) і внизу (для тих, хто прочитав усю сторінку і переконався). На корпоративному сайті форма зазвичай живе на окремій сторінці «Контакти», але кнопка або коротка форма в шапці чи sticky-панелі значно підвищує конверсію.
Поширена помилка — ховати форму. Клієнт повинен натиснути «Контакти» в меню, прогортати до форми, заповнити. Три кліки — і на кожному хтось відпадає. Чим ближче форма до контенту, який переконує — тим вище конверсія. Після блоку з перевагами, після відгуків, після кейсів — саме тут людина найбільш мотивована, і саме тут повинна бути форма або кнопка, яка до неї веде.
Для блогу: якщо стаття приводить трафік, але не конвертує — додайте форму або CTA-блок після основного контенту. Людина прочитала корисний матеріал, ви вже заслужили довіру — тепер запропонуйте наступний крок. Чому сайт не приносить клієнтів — часто саме тому, що немає чіткого шляху від контенту до заявки.
Часті запитання
Для першого контакту — 3 поля: ім'я, телефон/email, коментар (необов'язковий). Для розрахунку вартості чи спеціалізованої заявки — до 5 полів. Більше 5 — тільки якщо ви свідомо фільтруєте заявки і у вас достатній трафік, щоб це дозволити.
Той, який обіцяє конкретний результат: «Дізнатись вартість», «Отримати пропозицію», «Замовити консультацію». Уникайте абстрактного «Відправити» і надто зобов'язуючого «Купити зараз» (якщо це перший контакт, а не оформлення замовлення).
Видима капча (типу «виберіть картинки з автобусами») знижує конверсію на 10–15%. Використовуйте невидимий reCAPTCHA v3 — він працює у фоновому режимі і не заважає користувачам. Якщо спаму мало — honeypot-поле (приховане поле, яке бачать тільки боти) вирішує проблему без будь-яких капч.
Обидва. Ідеальний варіант — форма на сайті плюс кнопки месенджерів (Telegram, Viber, WhatsApp) поруч. Частина клієнтів звикла до форм, частина хоче написати в месенджер. Не змушуйте обирати — дайте обидва канали. Форма має перевагу: вона відправляє заявку з контекстом (зі сторінки послуги, з калькулятора) — ви відразу знаєте, що цікавить клієнта.
Рекомендую. Вона вирішує три задачі: чітко підтверджує заявку (клієнт бачить нову сторінку — значить все спрацювало), дозволяє точно відстежувати конверсії в Google Analytics і Google Ads, і дає можливість запропонувати наступний крок (подивитись портфоліо, почитати кейси).
Надішліть тестову заявку прямо зараз — і з десктопу, і з телефону. Перевірте: чи прийшов лист на вашу пошту, чи правильно відображаються дані, чи з'явилось повідомлення після відправки. Робіть це раз на 2 тижні — форми ламаються частіше, ніж здається.
Так, але менше, ніж кількість полів і текст кнопки. Чистий, простий дизайн із достатніми відступами працює краще за «красиві» форми з тінями, градієнтами і анімаціями. Головне — поля добре читаються, кнопка помітна, і на мобільному нічого не їде.
Не знайшли відповідь?
Висновок: форма — це останній метр до продажу
Менше полів. Конкретний текст кнопки. Зрозуміле повідомлення після відправки. Зручність на мобільному. Інлайнова валідація. Видиме розміщення. Шість речей, які можна перевірити і виправити за один день — і побачити результат у перших заявках.
Перший крок — перевірте, чи працює ваша форма взагалі. Потім — пройдіться по цьому чеклісту і запишіть, що потрібно змінити. А якщо хочете системно підвищити конверсію сайту — форма лише один з елементів, і я можу допомогти з рештою.
