Идеальная форма обратной связи на сайте: о чём мы думали
Форма обратной связи на сайте — самое чувствительное место: потеря одной заявки стоит нам около 20 тысяч рублей. На 5 полей ушло несколько часов работы с дизайнером. Рассказываю про 10 решений: отказ от капчи и ajax-отправки, совет Baymard об ошибках, выбор способа связи и обработку через n8n и amoCRM.
Всего-то 5 полей, а ушло несколько часов совместной работы с нашим дизайнером Даней. О чём нужно было подумать:
Что важно в форме заявки
1. Формы заявки — самое чувствительное место. Потеря 1 заявки для нас, потеря ~20 тыс рублей
2. Если можно не делать что-то, что усложняет логику, но это не увеличивает конверсию, то отказываемся. Например кастомные ошибки, ajax-отправка и т.п.
3. При этом Baymard даёт классный совет, что ошибки могут быть не просто «вы не заполнили почту», а «а вы пропустили точку в ivan@gmailcom», но откажемся в пользу стабильности.
Капча на сайте и необязательные поля
4. Каптчи — нафиг. Тут писал алгоритм, как мы отказались.
5. Есть заявки у которых нет почты, сейчас она необязательна. Посчитали таких 10%. Помню в 2008 году встречал, что у людей просто почты нет, потому что не знают что это. Сейчас все знают, но некоторые отказались. Решили оставить, так как там часто домен компании — важная информация на этапе заявки, если не запрашивать компанию.
6. Телефон необязательно, но визуально предыдущие два поля обязательные, а тут на этом месте выбор связи.
Выбор способа связи в форме обратной связи
7. Устали от того, что кто-то в поле телефона хочет вставить телеграм, но не догадывается. Решили сделать возможность выбора как связаться. Для некоторых звонки внезапные — дурной тон.
8. Сразу в тексте формы подсказка. как можно связаться проактивно. Почта или телеграм. Телефон решили убрать, хотя в том году несколько продаж с телефона было, но кмк отмирает.
9. Форма покрывает только часть заявок, причем меньшая — большая это личный контакт по телефону или телеграму. И в таком кейсе сайт нужен как промежуточная точка контакта.
Как защитить форму от повторной отправки
10. Обработка у нас идёт долго, так как отправляется на почту, в n8n, и amoCrm. Можно было бы сделать очереди, но опять таки технически делаем топорно, чтобы меньше багов было. Поэтому после клика — кнопка пропадает и анимация, чтобы не нажимали повторно.
Еще не опубликовали, но скриншот в посте. Дальше — автоматизация обработки данных от пользователя. Какие страницы посещал, если есть сайт, то просканировать весь сайт, чтобы найти ИНН, дополнительную информацию о компании.
Сохраняйте себе, на случай, если тоже будете переделывать форму на сайте
Какие поля нужны в форме заявки
Каждое лишнее поле снижает конверсию. Исследования Baymard Institute по оформлению заказа показывают, что типичную форму checkout можно сократить на 20–60% без потери нужных данных. Для B2B-заявки логика та же: спрашиваю только то, без чего менеджер не сможет ответить.
Минимальный набор — имя, способ связи и суть задачи. Почта даёт домен компании, по которому можно узнать многое без лишних вопросов, а название компании, бюджет и сроки лучше выяснять в первом разговоре, а не в форме.
| Поле | Обязательное | Зачем |
|---|---|---|
| Имя | Да | Обратиться к человеку |
| Почта | Нет | Домен компании, письменный ответ |
| Способ связи | Да | Телеграм или почта, как удобнее клиенту |
| Описание задачи | Да | Подготовиться к первому разговору |
| Согласие на обработку данных | Да | Требование 152-ФЗ |
Ошибки валидации: где граница между заботой и сложностью
Подсказка вроде «вы пропустили точку в адресе» действительно помогает. Но каждая такая проверка — ещё код, который может сломаться на нестандартном адресе. Я выбрал стабильность.
Минимум нужен всегда — проверить, что обязательные поля заполнены, и не стирать введённое при ошибке, потому что если человек нажал «Отправить», а форма очистилась, второй попытки уже не будет.
Встроенная валидация браузера через атрибуты required и type="email" закрывает большую часть случаев без единой строки JavaScript.
Капча на сайте и чем её заменить
Капча защищает от ботов, но и живые люди на ней спотыкаются. Особенно на телефоне.
Альтернативы без лишних действий для пользователя: скрытое поле-ловушка (honeypot), которое человек не видит, а бот заполняет; проверка времени заполнения, потому что бот отправляет форму за доли секунды; ограничение числа отправок с одного IP. Если нужна сервисная защита, есть невидимые варианты вроде Yandex SmartCaptcha в фоновом режиме.
Способ связи вместо обязательного телефона
Обязательный телефон отпугивает. Многие не хотят внезапного звонка от незнакомого менеджера, а в B2B-среде звонок без договорённости многие считают дурным тоном.
Выбор «как с вами связаться» решает две задачи. Человек сам выбирает канал, а менеджер сразу пишет туда, где ответят. Для телеграма достаточно ника, для почты — адреса.
Форма обратной связи и согласие на обработку данных
Любая форма, которая собирает имя и контакты, подпадает под 152-ФЗ «О персональных данных». Нужна ссылка на политику обработки и согласие, причём с 1 сентября 2025 года согласие должно оформляться отдельным документом, а не строчкой где-то в пользовательском соглашении.
Чекбокс не должен стоять заранее. Штрафы за нарушения в этой области выросли, поэтому экономить на одной строке текста не стоит.
Что происходит после нажатия кнопки
Заявка уходит сразу в три места — на почту, в n8n и в amoCRM, — и, поскольку цепочка надёжная, но небыстрая, пользователь в это время видит анимацию вместо кнопки.
После отправки нужен понятный экран: заявка принята, кто и когда ответит, куда написать, если срочно, иначе часть людей отправляет форму повторно или уходит с ощущением, что ничего не сработало.
Следующий этап — обогащение данных. По домену почты можно найти сайт компании, а на нём ИНН и реквизиты. Менеджер получает заявку уже с контекстом и не тратит первые 10 минут разговора на вопросы, ответы на которые лежат в открытом доступе.
Как проверить форму заявки перед запуском
- Отправить заявку с телефона, планшета и компьютера, в Safari и Chrome.
- Убедиться, что письмо пришло, сделка создалась в CRM, а сценарий в n8n отработал.
- Отправить форму с пустыми полями и с ошибкой в адресе почты.
- Нажать кнопку дважды подряд и проверить, что заявка не задвоилась.
- Раз в неделю отправлять тестовую заявку, чтобы заметить, если интеграция тихо сломалась.
- Проверить, что после отправки показан экран с понятным следующим шагом.
Вопросы и ответы
Нужна ли капча на сайте в форме заявки?
Мы от капчи отказались. Для нас форма — самое чувствительное место, и всё, что не увеличивает конверсию, но усложняет логику, убираем.
Какие поля делать обязательными в форме обратной связи?
Почта у нас необязательна: без неё около 10% заявок. Телефон тоже необязателен, вместо него человек выбирает, как с ним связаться: почта или телеграм.
Как избежать повторной отправки формы заявки?
После клика кнопка пропадает и показывается анимация, чтобы не нажимали повторно.