Форма обратной связи на сайте: что это, виды, примеры и как сделать

Форма обратной связи – это блок на сайте с полями и кнопкой, через который посетитель оставляет заявку, просит перезвонить, подписывается на рассылку или пишет отзыв. Ее еще называют формой ОС, формой заявки или контактной формой сайта. Обычно в ней просят имя, телефон или email, оставляют место для вопроса и добавляют галочку согласия на обработку персональных данных.

Размещают форму на главной, на страницах услуг и в контактах. Собрать такой блок можно в конструкторе вроде Tilda, плагином для WordPress, модулем для 1С-Битрикс, в Яндекс Формах или в CRM. CRM – программа, где менеджеры ведут клиентов и сразу получают обращения.

В статье разобраны вопросы:

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

[vue:start]{"text":"Спроектируем формы, которые приносят заявки","link":"https://serptop.ru/services/ux-ui/design/"}[vue:end]

Что такое форма обратной связи и зачем она сайту

Не каждый посетитель готов сразу купить или позвонить. Часто ему нужно уточнить детали, задать вопрос или оставить контакт, чтобы с ним связались позже. Для этого и нужен блок обратной связи. Что он делает:

• собирает обращения от тех, кто не хочет звонить или писать в чат;
• дает менеджеру контакт, чтобы связаться с человеком;
• принимает вопросы, отзывы и жалобы в одном месте;
• помогает менеджеру сразу понять запрос, если посетитель выбрал услугу из списка;
• позволяет увидеть в Яндекс Метрике, сколько обращений приносит сайт, если настроена цель.

Что значит форма обратной связи для посетителя? Это способ связаться без звонка в любое время суток. Звонят по срочному делу, в чат пишут с коротким вопросом, а контакты оставляют, когда хотят получить ответ или расчет без спешки. При заказе услуг, в продажах другим компаниям (B2B) и при дорогих покупках решение редко принимают за минуту, поэтому в этих случаях форма особенно нужна.

Виды форм обратной связи

Формы сбора обратной связи различаются по задаче и по тому, как они появляются на странице.

По задаче

• Заявка. Имя, телефон и вопрос, иногда выбор услуги. Ее место – на страницах услуг и в контактах.
• Обратный звонок. Форма заказа обратного звонка – одно поле для номера и кнопка «Перезвоните мне». Подходит, когда клиент готов говорить и важна скорость.
• Подписка. Адрес email и кнопка. Ее размещают в блоге и в интернет-магазинах, а на странице – в подвале, самом нижнем блоке.
• Отзыв или жалоба. Текст и иногда оценка. Прятать этот блок не стоит – если на сайте негде пожаловаться, недовольный клиент напишет отзыв на картах или в отзовиках. Если отзыв будут публиковать с именем автора, нужно отдельное согласие на распространение персональных данных (ст. 10.1 закона № 152-ФЗ).
• Регистрация. Имя, email или номер телефона, иногда формат участия – очно или онлайн. Ее используют для записи на вебинар или мероприятие: после отправки участник сразу получает подтверждение.
• Расчет стоимости. Калькулятор, который считает цену по параметрам и предлагает записаться. Подходит, если цена складывается по понятной формуле.
• Квиз. Несколько вопросов с вариантами ответа, контакты в конце. Помогает подобрать товар или услугу. Подробнее – в статье о квизе на сайте.

Если контакты просят в обмен на скидку, чек-лист или подборку материалов, это форма захвата. Сам подарок называют лид-магнитом. Подробно о ней – в статье о форме захвата.

По тому, как появляется на странице

• Классическая. Блок с полями внизу страницы или в разделе контактов. Посетители к ней привыкли, но ее пропустит тот, кто не долистал до конца.
• Всплывающая (окно обратной связи). Появляется поверх текста через некоторое время или при попытке закрыть вкладку. Работает, если показывать ее каждому посетителю один раз и не в первые секунды визита. Иначе окно раздражает, и его закрывают, не читая.
• Закрепленная. Кнопка «Оставить заявку» или мини-форма остается на экране при прокрутке. Удобна на длинных страницах и в мобильной версии.
• Многошаговая. Сначала простые вопросы, потом контакты. Подходит, когда для ответа требуется много сведений.
• Мини-форма внутри текста. Стоит в статье рядом с упоминанием услуги или в карточке товара, и заявку можно оставить, не уходя со страницы.

Где разместить форму на странице

Форму ставят там, где посетитель решает, обращаться ли к вам. На главной – на первом экране или сразу после блока услуг. На странице услуги – после цен. В конце лендинга – после отзывов и ответов на вопросы. В контактах ее держат всегда, потому что туда заходят, когда уже решили написать.

Какую форму выбрать под задачу

Формат подбирают по тому, насколько клиент готов купить. Тому, кто только знакомится с компанией, подойдет подписка или поле для вопроса, тому, кто сравнивает цены, – расчет, а тому, кто уже решил купить, – заявка или звонок.

Часто лучше всего работает пара – классический блок внизу и закрепленная кнопка или окно при уходе. Кнопку или окно увидят и те, кто не долистал до конца страницы. Когда блоков с заявкой много, их перестают замечать, так что одного-двух на странице обычно хватает.

Из чего состоит форма и какие поля нужны

В форме шесть элементов:

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

Лишние поля усложняют заполнение. Обязательными оставляйте только те, без которых нельзя сделать обещанное в заголовке.

Интернет-магазины при оформлении заказа в среднем просят заполнить 11,3 поля, хотя большинству магазинов хватило бы 8. Это данные Baymard Institute за 2024 год. Для простой заявки достаточно имени и телефона, остальное менеджер выяснит в разговоре.

Для обратного звонка достаточно телефона, для ответа письмом нужна почта. Не требуйте оба контакта без причины.

Номер удобнее вводить с маской – шаблоном +7 (___) ___-__-__, который сам расставляет скобки и дефисы. Так все номера приходят в одном виде. В адресе email проверяют знак @ и домен – часть адреса после @. Обязательные поля отмечают звездочкой, а ошибку показывают сразу под тем полем, где ее допустили. Поля располагают в одну колонку, так удобнее заполнять со смартфона.

Дизайн формы обратной связи выдерживают в фирменном стиле, но блок выделяют на странице – кнопку делают контрастной, а поля крупными. Подписи к полям ставят над ними.

Что написать в форме обратной связи

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

• заявка – заголовок «Рассчитаем стоимость ремонта за день», кнопка «Получить расчет»;
• обратный звонок – заголовок «Перезвоним в течение 15 минут в рабочее время», кнопка «Жду звонка»;
• подписка – заголовок «Раз в месяц присылаем разборы кейсов», кнопка «Подписаться»;
• подпись над полем – «Телефон», а внутри поля серым – образец номера, например «+7 900 000-00-00». Образец исчезает с первым введенным символом, поэтому подпись над полем все равно нужна;
• сообщение после отправки – «Спасибо! Расчет пришлем в течение рабочего дня. Если вопрос срочный, звоните по номеру ниже».

Обещание в заголовке должно быть правдой. Если написали «перезвоним в течение 15 минут», менеджер действительно перезванивает за 15 минут.

Как сделать форму обратной связи на сайте

Создать форму обратной связи для сайта можно тремя путями. В конструкторе ее добавляют готовым блоком, в системе управления сайтом (CMS) – плагином, а онлайн – через сервис обратной связи для сайта, например Яндекс Формы или CRM, где получают код для вставки на страницу. Если готовые решения не подходят, форму отправки заявки разрабатывают под задачу.

В конструкторах и сервисах форм есть готовые шаблоны формы обратной связи с клиентом – заявка, обратный звонок, отзыв. Остается поменять в шаблоне поля под свою задачу. Ниже разобрано создание формы обратной связи на популярных платформах.

Как сделать форму в Tilda и других конструкторах

Форма обратной связи на Тильде (Tilda), в Taptop и в других конструкторах – это готовый блок, поэтому лендинг с формой на Tilda собирается быстро. В Tilda форму подключают так:

1. Добавьте на страницу блок из категории «Форма».
2. В разделе «Контент» блока настройте поля под свою задачу, впишите текст кнопки и сообщение после отправки.
3. В настройках сайта откройте «Формы» и подключите получателя – почту, Telegram, мессенджер MAX, amoCRM, Битрикс24 или другой сервис.
4. Откройте настройки блока и отметьте этого получателя.
5. Сохраните изменения и опубликуйте страницу.
6. Отправьте тестовые данные и проверьте, что они дошли до получателя.

Даже если внешний получатель не подключен, отправленные данные по умолчанию хранятся во вкладке «Заявки», но только месяц. В общих настройках форм срок можно изменить или совсем отключить сохранение. Если данные нужны надолго, надежнее почта или CRM.

Чтобы форма обратной связи отправляла заявки в Телеграм, в настройках сайта в том же разделе «Формы» выбирают этот мессенджер и подтверждают подключение в боте Тильды. Пересылать данные на почту, в Telegram или CRM можно только на платном тарифе – по справке Tilda, сервисы приема данных работают при активной подписке.

В WordPress

Форму в WordPress добавляют плагином. Один из самых распространенных бесплатных плагинов для формы обратной связи в WordPress – Contact Form 7. Он пересылает данные на почту, но сам их не хранит, и если письмо пропало, клиент упущен. Чтобы копия оставалась в панели управления сайтом, ставят дополнение Flamingo.

В WPForms блок собирают, перетаскивая готовые элементы. Многошаговый режим есть в платной версии. Для обоих плагинов есть дополнения – маска номера, капча и другая защита от спама, передача данных в CRM.

В 1С-Битрикс и через CRM-формы Битрикс24

В 1С-Битрикс есть модуль веб-форм. Ответы посетителей хранятся в административной панели и дублируются на почту. Если компания ведет клиентов в Битрикс24, удобнее CRM-формы. Их собирают в самом Битрикс24, копируют готовый код и вставляют на страницу. С этим справится администратор сайта или подрядчик, который его поддерживает.

В Битрикс24 каждое обращение сразу становится карточкой будущего клиента, и за ней закрепляется ответственный менеджер. После публикации отправьте тестовые данные и проверьте, что карточка появилась.

Через Яндекс Формы

Создать форму обратной связи в Яндекс Формах и вставить ее на сайт можно бесплатно. Для этого ее публикуют в сервисе, копируют код и вставляют его в HTML-блок конструктора или редактора. Ответы видны в сервисе, их можно скачать таблицей, а письма приходят, если включить уведомления.

Есть и минусы. Оформление ограничено готовыми шаблонами. В личной версии сервиса ответы видит только владелец, а в Яндекс Формах для бизнеса доступ можно дать сотрудникам. Передачу данных во внешнюю систему подключают отдельно, через интеграцию.

Гугл-форма обратной связи собирается так же просто, но Google хранит ответы на зарубежных серверах. Поэтому для имен и телефонов россиян она не подходит. Что требует закон, рассказано в разделе о согласии.

Своя разработка

Если нужна нестандартная логика или дизайн, код пишут с нуля. Разработчик делает внешний вид и добавляет проверку в браузере – пустое поле или адрес с ошибкой отправить не получится.

Чтобы сделать простейшую форму обратной связи для сайта на HTML с отправкой на почту, нужен код из тегов form, label, input и button и обработчик на сервере – без него обращение не сохранится и не дойдет до менеджера. HTML задает поля и способ отправки. В атрибуте action указывают адрес, который примет данные, а без него браузер отправит их на текущую страницу.

<form action="/send.php" method="post">
  <label for="phone">Телефон</label>
  <input id="phone" name="phone" type="tel" autocomplete="tel" required>
  <label><input type="checkbox" name="consent" required> Даю <a href="/soglasie/">согласие на обработку персональных данных</a></label>
  <button type="submit">Жду звонка</button>
</form>

Адрес /soglasie/ в примере замените адресом своей страницы с текстом согласия, а /send.php – адресом своего обработчика.

Обработчик – это и есть скрипт формы обратной связи. Он принимает данные, еще раз проверяет их и отсеивает спам, а затем сам или через отдельный модуль отправляет письмо, сообщение в мессенджер или передает данные в CRM.

Писать форму с нуля приходится и тогда, когда сайт сделан без конструктора и CMS. Зато такая форма делает то, что нужно бизнесу, например передает обращение во внутреннюю учетную систему. Доработки удобно поручить команде, которая поддерживает сайт.

Куда приходят заявки

Обращение ценно, только если его быстро увидели. Компании, которые связывались с клиентом в течение часа, почти в 7 раз чаще выходили на разговор с тем, кто принимает решение, чем те, кто отвечал позже (исследование Harvard Business Review, США, 2011).

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

Маленькой команде удобен Telegram – уведомление сразу приходит на смартфон. Но это зарубежный сервис, поэтому имя и телефон в него лучше не передавать. Пусть бот сообщает о новой заявке, а данные остаются в почте или CRM. В amoCRM или Битрикс24 обращение не теряется – видно, кто его взял и чем закончился разговор. А в отчетах CRM можно посмотреть, сколько клиентов приносит каждый источник рекламы.

Не делайте Telegram единственным каналом доставки. Надежнее отправлять копию каждого обращения еще и в CRM, на почту или в раздел заявок конструктора. Если уведомление в мессенджере не придет, данные найдут по копии. Как выстроить работу с обращениями и не терять их, рассказали в статье о системе работы с заявками.

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

Имя, телефон и почта – персональные данные, поэтому на сайте публикуют политику их обработки, а у посетителя просят согласия. С 1 сентября 2025 года согласие оформляют отдельно от других документов, которые посетитель принимает (ч. 1 ст. 9 закона № 152-ФЗ в редакции закона № 156-ФЗ). Что нужно учесть:

• нужна отдельная галочка со ссылкой на текст согласия;
• галочку не ставят заранее, посетитель отмечает ее сам – по закону согласие должно быть конкретным, предметным, информированным, сознательным и однозначным;
• согласие на рекламную рассылку – своя галочка, потому что закон «О рекламе» разрешает рассылку только с предварительного согласия получателя (ч. 1 ст. 18);
• персональные данные граждан России, собранные через сайт, записывают, систематизируют, накапливают, хранят и обновляют в базах на территории России (ч. 5 ст. 18 закона № 152-ФЗ) – проверьте, куда выбранная форма сохраняет данные;
• если заявки уходят в CRM, конструктор или облачный сервис, этот сервис обрабатывает данные по поручению владельца сайта. С ним нужен договор с таким поручением (ч. 3 ст. 6 закона № 152-ФЗ), а в согласии стоит упомянуть эту передачу;
• до начала сбора компания подает в Роскомнадзор уведомление об обработке персональных данных (ст. 22 закона № 152-ФЗ). Подать его можно бесплатно на портале pd.rkn.gov.ru.

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

Как проверить форму перед запуском

Обращения часто теряются из-за мелочей – письмо ушло в спам, поле не принимает номер, кнопку не видно на смартфоне. Перед запуском отправьте тестовые данные с каждой страницы и проверьте:

• обязательные поля – только необходимые;
• номер приходит в едином виде благодаря маске;
• при ошибке поля не очищаются, а рядом текстом, не только цветом, написано, что исправить, например «Проверьте номер телефона – не хватает цифр»;
• при сбое отправки показан текст «Не удалось отправить заявку. Попробуйте еще раз или позвоните нам»;
• кнопка на время отправки не нажимается повторно;
• поля можно пройти клавишей Tab, и видно, на каком поле курсор;
• после отправки появляется сообщение об успехе или страница «Спасибо». Оно означает только, что сайт принял данные, а дошли ли они до получателя, проверяют отдельно – в Tilda сбои доставки видны в «Журнале ошибок» раздела «Заявки»;
• заявка дошла до почты, мессенджера или CRM и не попала в спам;
• на смартфоне поля не мелкие, кнопка видна;
• при вводе номера открывается цифровая клавиатура, для email – раскладка со знаком @;
• сайт открывается по https, иначе браузер предупредит, что соединение не защищено;
• защита от спама работает;
• цель в Яндекс Метрике срабатывает.

Спам-боты быстро находят формы на сайтах. Простая защита – капча, то есть проверка «человек или робот». Например, Яндекс SmartCaptcha в невидимом режиме просит решить задание только при подозрении на бота. Еще один прием – невидимое для людей поле-ловушка, которое заполняет робот. Подробнее о видах защиты – в статье о капче для сайта.

Как понять, что форма работает

В Яндекс Метрике настройте цель на отправку формы. Тогда видно, сколько отправок зафиксировал счетчик, на каких страницах их сделали и из каких источников пришли люди.

Конверсия в отправку формы – доля визитов, в которых ее успешно отправили. Число таких визитов делят на все визиты за тот же период и умножают на 100%. Если считают конверсию одной страницы, делят только на визиты, в которых ее открывали.

Число отправок – отдельный показатель, потому что один человек может отправить заявку дважды. Цель на отправку может сработать и при неудачной попытке. Для точного учета ее настраивают так, чтобы она срабатывала, только когда сервер принял данные, а цифры сверяют с CRM.

Метрика сама считает клики по номеру и переходы в мессенджеры, если включены автоматические цели. Клик еще не звонок, поэтому такие цели лучше считать отдельно от целей на отправку.

Если реклама в Директе оплачивается за конверсии, заявки-пустышки тоже попадают в счет. Антифрод (защита Директа от недействительных кликов) возвращает деньги за ботов, но не за повторные отправки и мусор в полях. Поэтому цель, по которой Директ оптимизирует показы и списывает оплату, лучше ставить на обращение, которое проверил менеджер.

Отчет «Аналитика форм» в Метрике показывает, сколько людей начали вводить данные и на каком поле бросили. Его включают в настройках счетчика вместе с Вебвизором.

Если многие останавливаются на одном и том же поле, его стоит упростить или убрать. Если заполнять почти не начинают, значит, блок не замечают или не понимают, что получат. Тогда поднимите его выше, добавьте закрепленную кнопку и перепишите заголовок.

Если в Метрике отправок много, а у менеджеров обращений мало, проверьте получателей и папку «Спам». Повторяйте пробную отправку после каждой правки сайта и смены подрядчика. Регулярную проверку можно включить в техническую поддержку сайта.

Примеры форм обратной связи

Ниже примеры из проектов команды SerpTop. Рост заявок в кейсах – результат работы над проектом целиком, форма – лишь одна из частей этой работы.

Онланта: консультация эксперта с выбором времени звонка

Форма на сайте ИТ-компании просит имя, телефон, почту, название организации и вопрос. К ней можно приложить файл с техническим заданием и выбрать удобное время звонка. Согласия на обработку данных и на рассылку – две отдельные галочки. Полей здесь больше, чем советует таблица выше, и кнопка названа просто «Отправить», но для сложного B2B-запроса подробная форма оправдана – менеджер сразу получает все для первого разговора. Кейс Онланты.

Kolorika: калькулятор, который ведет к записи

Калькулятор детейлинг-центра считает стоимость покраски дисков по диаметру, типу диска и способу окраски и сразу предлагает записаться. Клиент видит ориентир по цене до звонка, а менеджер получает обращение с параметрами. По данным кейса SerpTop, за шесть месяцев онлайн-заявки выросли на 35%. Кейс Kolorika.

Тойота и Лексус Алтуфьево: короткая форма рядом с рейтингом на Картах

Автосервис предлагает записаться на диагностику и просит для этого только телефон. Рядом – кнопки калькулятора техобслуживания и рейтинг 5,0 из Яндекс Карт, который помогает решиться тем, кто еще сомневается. В кейсе SerpTop указан рост онлайн-записей на 60%. Кейс Тойота и Лексус Алтуфьево.

Квизы и пошаговый подбор вместо длинной анкеты

Страховой расчетный центр предлагает подобрать полис за три шага. Сначала клиент отвечает на вопросы, а контакты оставляет только в конце. Кейс Страхового расчетного центра.

Похожий многошаговый подбор у компании Tibra. Чтобы выбрать холодильную камеру, клиент отвечает на четыре вопроса и видит рядом фото ведущего инженера, а в ответ получает смету и рекомендации по оборудованию. Кейс Tibra.

Если нужно спроектировать интерфейс, в котором легко оставить заявку, посмотрите, как устроена разработка дизайна сайта в SerpTop.

[vue:start]{"component":"BannerBlog2","topText":"Проверим, где ваш сайт теряет обращения, и спроектируем формы под ваших клиентов."}[vue:end]

Вопросы о форме обратной связи

Какие поля обязательно нужны в форме обратной связи?

Минимум – телефон или email и галочка согласия. В заявке обычно просят еще имя, а для обратного звонка хватает телефона. Все остальное добавляют, только если без этого нельзя ответить, например файл с техническим заданием в B2B.

Что написать в форме обратной связи, чтобы ее заполнили?

В заголовке – что человек получит и когда, например «Рассчитаем стоимость за день». На кнопке – действие вместо слова «Отправить», а в сообщении после нажатия – что будет дальше.

Нужна ли галочка согласия на обработку персональных данных?

Да. Это отдельная галочка, которую посетитель отмечает сам, со ссылкой на текст согласия.

Можно ли получать заявки с формы в Telegram или CRM?

Да, конструкторы и плагины умеют пересылать их в Telegram, amoCRM и Битрикс24. Но Telegram не стоит делать единственным каналом – копию держите еще и в CRM или на почте.

Почему заявки с формы не приходят на почту?

Чаще всего письма уходят в спам, адрес получателя указан с ошибкой или на хостинге не настроена отправка писем. Загляните в «Спам», сверьте адрес в настройках и отправьте тестовые данные.

Как защитить форму от спама?

Обычно хватает невидимой капчи вроде SmartCaptcha и скрытого поля-ловушки. Капчу с заданием для всех подряд лучше не включать, потому что она раздражает людей.

Можно ли бесплатно сделать форму в Яндекс Формах и вставить на сайт?

Да. Но оформление будет ограничено шаблонами Яндекса, а в CRM ответы без отдельной интеграции не попадут. Для опроса клиентов Яндекс Форм хватит, а заявки с рекламы и поиска удобнее принимать собственной формой – с передачей в CRM и целью в Метрике.