Форми на сайті: чому їх не заповнюють і що це коштує
Кількість полів, валідація, помилки, мобільна клавіатура, момент показу. Розбір рішень, які помітно змінюють частку заповнених форм, з цифрами з наших проєктів.
Форма — останній крок перед заявкою і водночас найдешевше місце для покращень на всьому сайті. Змінити її можна за годину, а ефект видно вже за тиждень, на відміну від SEO чи редизайну. При цьому саме форму найчастіше роблять за замовчуванням: беруть шаблон, додають поля «про всяк випадок» і більше не повертаються. Далі — що конкретно в ній зупиняє людей, з цифрами, які ми бачили на реальних проєктах.
−10%
заповнень за кожне зайве поле
3–4
поля в оптимальній формі заявки
2×
різниця між поганою й нормальною формою
70%
заповнень з мобільного
Кількість полів вирішує більше за все інше
Кожне додаткове поле знижує частку заповнень приблизно на десяту частину, і це найстабільніша закономірність у роботі з формами. При цьому поля майже завжди додаються не тому, що дані потрібні, а тому, що «нехай будуть». Класичний приклад — поле «Назва компанії» у формі, після якої менеджер усе одно телефонує й питає все наново.
| Поле | Коли потрібне | Коли шкодить |
|---|---|---|
| Ім’я | Майже завжди | Ніколи — це найдешевше поле |
| Телефон або email | Одне з двох обов’язкове | Коли вимагають обидва |
| Опис задачі | Складна послуга з різними сценаріями | Проста заявка «передзвоніть» |
| Назва компанії | Явний B2B із перевіркою | Усе інше |
| Бюджет | Дуже рідко | Майже завжди — відлякує на першому кроці |
| Як ви про нас дізналися | Ніколи у формі | Завжди — питайте в розмові |
Валідація: місце, де втрачають уже зацікавлених
Людина, що почала заповнювати форму, вже прийняла рішення. Втратити її на цьому етапі — найприкріше, що може статися, і найчастіше винна валідація. Типова картина: користувач вводить телефон у звичному для себе форматі, отримує червоне «невірний формат» без пояснення, пробує ще раз, після другої невдачі закриває вкладку.
- 1Приймайте телефон у будь-якому форматі. Пробіли, дужки, дефіси й префікс країни треба чистити на боці коду, а не вимагати від людини.
- 2Показуйте помилку біля поля, а не списком угорі. І тільки після того, як людина залишила поле, а не під час набору.
- 3Пояснюйте, що саме не так. «Невірний формат» не допомагає. «Схоже, у номері не вистачає цифри» — допомагає.
- 4Не скидайте введене. Форма, що очистилася після помилки, гарантовано втрачає людину.
- 5Не блокуйте кнопку. Неактивна кнопка без пояснення виглядає як поломка сайту.
Мобільні: сім із десяти заявок
Більшість форм заповнюють із телефона, але проєктують їх на моніторі. Через це виникають помилки, яких на десктопі просто не видно: поле телефону відкриває буквену клавіатуру, кнопка ховається під клавіатурою, поля надто малі для пальця, а автозаповнення не працює, бо в полів немає правильних атрибутів.
Мобільний чекліст форми
- Поле телефону відкриває цифрову клавіатуру, поле email — клавіатуру з символом @
- Увімкнене автозаповнення для імені, телефону й пошти
- Висота полів і кнопки достатня, щоб влучити пальцем без збільшення
- Кнопка відправки видима, коли відкрита клавіатура
- Форма не з’їжджає й не потребує горизонтального прокручування
- Після відправки видно зрозуміле підтвердження, а не мовчазне перезавантаження
Ці ж принципи стосуються всієї сторінки, а не лише форми — детальніше про мобільний підхід ми писали в матеріалі про mobile-first.
Де і коли показувати форму
Форма вгорі сторінки працює для тих, хто вже готовий, і ігнорується рештою. Форма лише внизу втрачає готових. Найнадійніше рішення — форма у двох місцях: коротка вгорі й розгорнута після блоку, що знімає заперечення, тобто після цін або кейсів. Що саме варто показати перед формою, розібрано в матеріалі про відгуки й кейси.
Що відбувається після натискання
Найдорожча помилка форми — не в самій формі, а після неї. Заявка, яка приходить на пошту й губиться серед розсилок, коштує рівно стільки ж, скільки незаповнена форма. Мінімум: миттєве підтвердження для користувача, миттєве сповіщення для вас у канал, який ви справді читаєте, і запис у CRM або таблицю. Як зробити ці сповіщення надійними, ми розписали в матеріалі про автоматичні звіти й алерти.
Часті питання про форми на сайті
Скільки полів має бути у формі заявки?
Оптимально три-чотири: ім’я, один контакт на вибір і коротке поле для опису задачі. Кожне додаткове поле знижує частку заповнених форм приблизно на десять відсотків, тому поля, дані з яких менеджер усе одно уточнить у розмові, краще прибрати.
Чи потрібно вимагати і телефон, і email?
Ні. Достатньо дати вибір: одне поле контакту з можливістю ввести або телефон, або пошту. Вимога заповнити обидва суттєво знижує кількість заявок, бо частина людей не готова давати телефон на першому кроці, а частина не користується поштою регулярно.
Чому люди кидають форму на середині?
Три основні причини: зайві поля, які виглядають як допит, помилки валідації без зрозумілого пояснення, і незручність на мобільному — буквена клавіатура в полі телефону або кнопка, схована під клавіатурою. Усі три виправляються без редизайну сайту.
Де краще розміщувати форму на сторінці?
У двох місцях: коротка форма у верхній частині для тих, хто вже готовий звернутися, і розгорнута після блоку, що знімає заперечення — цін, кейсів або відповідей на часті питання. Форма лише внизу сторінки втрачає готових відвідувачів, а лише вгорі — тих, кому потрібні аргументи.
Чи допомагають спливаючі вікна збільшити кількість заявок?
Вони дають короткочасний приріст, але знижують кількість повернень на сайт, якщо з’являються за таймером до того, як людина щось прочитала. Якщо використовувати попап, його варто прив’язувати до наміру закрити сторінку або до глибини прокручування, а не до кількох секунд після відкриття.
Коротко
- Кожне зайве поле коштує приблизно 10% заповнень; оптимум — три-чотири поля.
- Не вимагайте телефон і email одночасно — дайте вибір одного контакту.
- Приймайте телефон у будь-якому форматі й ніколи не очищайте форму після помилки.
- Сім із десяти заповнень — з мобільного: перевірте тип клавіатури, автозаповнення й видимість кнопки.
- Ставте форму у двох місцях: коротку вгорі та розгорнуту після цін або кейсів.
- Заявка, що загубилася в пошті, коштує стільки ж, скільки незаповнена форма — потрібне надійне сповіщення.
Схожі матеріали
Конверсія лендінга: 18 елементів, що вирішують результат
Лендінг із конверсією 1% і 6% часто відрізняються не дизайном, а вісімнадцятьма деталями.
CRO: як підняти конверсію сайту без збільшення трафіку
Подвоїти трафік дорого. Подвоїти конверсію — часто дешевше й швидше.
Mobile-first дизайн: чому 70% трафіку вирішує все
Більшість ваших відвідувачів — з телефона. Але більшість сайтів досі проєктують на 27-дюймовому моніторі.