Заказчик продавал услугу через объявления и вёл трафик на страницу с одной формой.
Форма просила имя и телефон прямо на первом экране, до неё доходили единицы, остальные закрывали вкладку.
Что человеку вообще нужно, менеджер выяснял уже на звонке, и часть разговоров заканчивалась на несовпадении по бюджету.
Переделать просили так, чтобы посетитель сначала отвечал на вопросы про свою задачу и только в конце оставлял телефон, когда уже потратил на страницу минуту.
Вторым пунктом шла аналитика - хотели видеть, на каком именно шаге люди уходят.
Страницу сделал с нуля, без конструктора: первый экран, короткий блок про услугу, примеры работ, квиз и форма контакта.
Вёрстка мобильная в первую очередь - с объявлений почти весь заход с телефона.
Квиз на пять шагов, по одному вопросу на экран, сверху полоса прогресса и подпись сколько осталось.
Ответы сохраняются в localStorage, можно закрыть вкладку и вернуться на тот же шаг.
На последнем шаге по ответам считается вилка стоимости, и только после неё страница просит контакт.
Телефон с маской и проверкой, пустое кнопка не отправляет.
Заявка уходит сообщением в Telegram-чат отдела продаж и так-же строкой в Google Таблицу, вместе со всеми ответами и utm-метками со страницы.
Дубли по номеру за сутки склеиваются, чтобы одному человеку не звонили два менеджера.
На каждый шаг квиза повешено событие в Метрике, в отчёте видно на каком вопросе отваливаются.
Собрано на HTML, CSS и JS без фреймворка, бекенд на Python и FastAPI, VPS с nginx и сертификатом.
Заявка сначала пишется в свою базу и только потом уходит в Telegram и таблицу - если мессенджер недоступен, отправка повторяется по кругу, пока не пройдёт.
Спам отсекается скрытым полем и лимитом отправок с одного адреса.
До формы контакта теперь доходит примерно каждый пятый из начавших квиз, при том что старую форму на первом экране пропускали почти все.
Менеджер открывает заявку и уже знает объём, сроки и бюджет, звонок начинается сразу с предложения.
Ответы копятся в таблице, по ним видно какие запросы приходят чаще и что стоит вынести на саму страницу.
Заказчик получил исходники, свою таблицу с заявками и короткий разбор, как править вопросы и варианты ответов.
После запуска переписал третий вопрос - на нём был самый заметный отвал, и сделал второй вариант первого экрана под тест.
