Обратная связь на сайте: как перестать терять заявки

Заявки с сайта теряются не в одном месте, а в четырёх. Человек не дошёл до формы. Начал заполнять и бросил. Отправил, но данные не ушли. Данные ушли, но письмо утонуло в почте. Оптимизировать при этом обычно берутся только второе — и получают прирост, который съедается на четвёртом шаге.

Форма, мессенджер или почта

Обратная связь на сайте — это не обязательно форма, и часто форма не лучший канал. У каждого варианта своя цена для посетителя.

• Форма на странице. Ничего не нужно открывать, работает у всех, данные приходят структурированно. Минус: человек не видит, что было дальше, и не может дописать вдогонку.
• Кнопка мессенджера (WhatsApp, Telegram, MAX). Переписка остаётся у человека, он видит, прочитали ли его. Минус: надо выйти с сайта в приложение, и часть людей на этом теряется.
• Живой чат. Хорош, когда за ним правда кто-то сидит в рабочее время. Чат, который отвечает «мы получили сообщение» и молчит два дня, хуже формы: он пообещал разговор, который не состоялся.
• Адрес почты текстом. Самый недооценённый вариант: ничего не ломается, работает без JavaScript, у человека остаётся копия письма. Минус: адрес собирают спам-боты.

Разумный набор для сайта малого бизнеса — форма плюс явные почта и телефон рядом с ней. Форма закрывает большинство, а почта и телефон дают выход тем, кто формам не доверяет; таких заметно больше, чем кажется.

Сколько полей оставить

Каждое поле стоит части заявок, но универсального «чем меньше, тем лучше» не существует. Короткая форма даёт больше обращений и хуже их качество; длинная отсекает случайных и оставляет тех, кто действительно готов разговаривать.

Выбор зависит от того, что дороже: пропущенный клиент или час работы менеджера. В массовых услугах со средним чеком в несколько тысяч рублей выигрывает короткая форма. В сложных продажах, где после заявки идёт часовая встреча, три дополнительных вопроса окупаются — они отсеивают тех, кому продукт не подходит.

Отдельно стоит вопрос обязательности. Поле «Комментарий», помеченное звёздочкой, гарантированно получит «...» или «надо». Спрашивать стоит только то, без чего первый ответ невозможен.

Поля и мобильная клавиатура

Значительная часть заявок, а на многих сайтах и большая часть, приходит с телефона. Там цена неверного типа поля выше: вместо цифровой клавиатуры человек получает буквенную и вводит номер через раз. Чинится это атрибутами разметки, а не JavaScript.

<input type="email" name="email" autocomplete="email" inputmode="email">
<input type="tel"   name="phone" autocomplete="tel"   inputmode="tel">
<input type="text"  name="name"  autocomplete="name">

Атрибут autocomplete разрешает браузеру подставить сохранённые данные: человек экономит полминуты и не делает опечаток. Маску телефона делайте мягкой. Если она не даёт ввести номер без +7 или вставить его из буфера, она вредит больше, чем помогает.

Размер элементов важен по той же причине. Поле высотой меньше 44 пикселей и чекбокс согласия размером со спичечную головку на телефоне промахиваются, и человек нажимает трижды.

Валидация

Почти все жалобы закрывают три правила. Показывайте ошибку после того, как человек ушёл из поля, а не на каждом символе: иначе форма ругается, пока он дописывает адрес. Никогда не стирайте введённое. И пишите, что именно не так.

«Проверьте правильность заполнения» не помогает ничем. «Похоже, в адресе пропущен символ @» — помогает. Текст ошибки располагается у поля, а не общим блоком наверху, иначе на длинной форме его просто не увидят.

Красный текст ошибки на светлом фоне часто не проходит по контрасту, и на солнце его не видно. Быстрая проверка пары цветов — в проверке контрастности по WCAG.

После нажатия «Отправить» кнопку стоит блокировать и менять подпись: иначе при медленном соединении человек нажмёт её четыре раза, и менеджер получит четыре одинаковые заявки.

Согласие на обработку персональных данных

Имя, телефон и почта — персональные данные, и отправка формы должна сопровождаться согласием. Практическая часть сводится к нескольким вещам, которые проверяются за пять минут.

• Чекбокс не отмечен заранее — согласие должно быть действием человека, а не состоянием по умолчанию.
• Рядом ссылка на политику обработки персональных данных, которая открывается и действительно существует.
• Согласие на обработку и согласие на рекламную рассылку — разные вещи. Смешивать их в одном чекбоксе не следует.
• Факт согласия фиксируется вместе с заявкой: дата, время, версия текста политики.
• Отказ объясняется у самого чекбокса. Если человек нажал «Отправить» без галочки, сообщение появляется рядом с ней, а не под кнопкой.

Формулировка «Нажимая кнопку, вы соглашаетесь» встречается часто, но отдельный чекбокс надёжнее: он даёт проверяемый след, который можно показать при проверке.

Минимальная рабочая форма

Вот из чего форма состоит, если убрать всё необязательное. Обратите внимание на label for, на абзац для ошибки, связанный с полем через aria-describedby, и на область с role="status" для результата отправки: это не украшения, а то, из-за чего форма работает с клавиатурой и со скринридером.

<form id="cf" novalidate>
  <p>
    <label for="cf-name">Имя</label>
    <input id="cf-name" name="name" type="text" autocomplete="name"
           required aria-describedby="cf-name-err">
    <span class="err" id="cf-name-err"></span>
  </p>
  <p>
    <label for="cf-email">E-mail</label>
    <input id="cf-email" name="email" type="email" inputmode="email"
           autocomplete="email" required aria-describedby="cf-email-err">
    <span class="err" id="cf-email-err"></span>
  </p>
  <p>
    <label for="cf-msg">Сообщение</label>
    <textarea id="cf-msg" name="message" rows="5"
              required aria-describedby="cf-msg-err"></textarea>
    <span class="err" id="cf-msg-err"></span>
  </p>

  <!-- Ловушка для ботов: люди этого поля не видят -->
  <p class="hp" aria-hidden="true">
    <label for="cf-hp">Не заполняйте это поле</label>
    <input id="cf-hp" name="cf_hp" type="text" tabindex="-1" autocomplete="off">
  </p>

  <p>
    <label for="cf-consent">
      <input id="cf-consent" name="consent" type="checkbox" required>
      <span>Я даю согласие ООО «Ромашка» на обработку моих персональных
      данных, указанных в этой форме, для ответа на обращение.
      <a href="/privacy">Политика обработки персональных данных</a></span>
    </label>
  </p>

  <button type="submit">Отправить</button>
  <p id="cf-status" role="status" aria-live="polite"></p>
</form>

Ловушку для ботов прячут через position: absolute; left: -9999px, а не display: none: часть ботов пропускает поля со display: none. Обработчику остаётся правило в одну строку — поле не пустое, значит, молча выбросить. Этого хватает для обычного трафика, и капча до этого момента только снижает число обращений.

Скрипт проверки, стили и вариант отправки к этому прилагаются, и переписывать их руками не обязательно: генератор формы обратной связи собирает всё под выбранные поля и способ отправки, показывает форму живьём и отдаёт готовые HTML, CSS и JS без зависимостей — вместе с текстом согласия по 152-ФЗ. Если форму нужно показать не на странице, а поверх неё, тот же набор для модального окна даёт генератор всплывающего окна: там же настраиваются триггер и ограничение частоты показа.

Что показать после отправки

«Спасибо, ваша заявка отправлена» — самый частый и самый пустой экран после отправки. Он не отвечает ни на один вопрос, который в этот момент есть у человека: когда ответят, кто ответит и что делать, если не ответят.

Рабочий вариант отвечает на четыре вопроса. Заявка принята. Ответим в рабочие часы, обычно в течение двух. Позвоним на указанный номер. Не дождались — напишите на адрес или в мессенджер. Номер обращения полезен, только если он правда помогает найти заявку в вашей системе.

Письмо-подтверждение решает ту же задачу и заодно проверяет адрес. Если через минуту письма нет, человек ещё на сайте и может исправить опечатку — а вы не узнаете о проблеме через три дня.

Доставка: где заявки пропадают физически

Самая обидная потеря — когда форма показала «Спасибо», а данные никуда не дошли. Причины повторяются из раза в раз. Почта уходит с домена без настроенных записей и попадает в спам. Получатель уволился, а адрес остался в настройках. Интеграция с CRM отвалилась после смены токена и молча возвращает ошибку.

Дешёвая страховка — дублирование в два независимых канала: запись в базу или таблицу плюс уведомление в рабочий чат. И ежемесячная тестовая заявка от себя, которая проверяет весь путь целиком, до строчки в CRM.

Как измерять доходимость

Одной конверсии «визит → заявка» мало: она показывает результат, но не место потери. Минимальный набор событий — четыре.

• Форма показана в области экрана (а не просто есть на странице).
• Начато заполнение — первое изменение любого поля.
• Ошибка валидации, с указанием поля. Это самое полезное событие из всех.
• Успешная отправка, подтверждённая ответом сервера, а не фактом нажатия.

Разница между вторым и четвёртым событием и есть доходимость формы. Событие с ошибкой по полям сразу показывает виновника: если 30 % ошибок приходится на телефон, проблема в маске, а не в людях. Посчитать потери по шагам и найти главную утечку помогает калькулятор воронки конверсии, а связать заявки с источниками — генератор UTM-меток.

Оценивать изменения формы на глаз не стоит: недельные колебания конверсии на небольшом трафике легко принять за эффект. Если форма приносит десяток заявок в день, надёжного вывода по двум дням не будет.

Где короткая форма проигрывает

В двух случаях сокращение полей ухудшает бизнес-результат. Первый — когда без квалификации заявка бесполезна: подрядчику по ремонту нужен хотя бы город и объём, иначе звонок ничего не даст. Второй — когда поток заявок уже превышает возможности обработки; тогда задача не собрать больше, а собрать лучше.

И отдельный случай: форма обратной связи не всегда нужна как форма. Если нужна оценка услуги или один короткий отзыв, точнее работает всплывающий вопрос в один клик. Его можно поставить на страницу без разработчика, а длинную форму оставить для настоящих заявок.

И отдельная проверка, которая занимает минуту: прочитайте пять последних обращений. Если три из них — вопросы, ответ на которые должен был быть на сайте, форма не сломана, сломан сайт, и улучшать надо не её.