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

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

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

• Имя — чтобы обратиться к человеку. Его можно сделать необязательным.
• Контакт — телефон или email. Одного обязательного контакта достаточно.
• Сообщение — свободное поле для вопроса. В форме «Перезвоните мне» его можно убрать.
• Скрытые поля — страница, UTM-метки, название формы. Посетитель их не видит, а вам они подскажут, откуда пришла заявка.

Телефон или email — зависит от того, как вы отвечаете. Если менеджер перезванивает в течение часа, спрашивайте телефон: для услуг и срочных задач это самый быстрый канал. Если ответ требует расчёта, файла или коммерческого предложения, удобнее email. Когда клиенты разные, дайте выбор: одно поле «Телефон или email» или переключатель «Как с вами связаться» — и обязательным сделайте только один контакт.

Для телефона используйте type="tel": на смартфоне откроется цифровая клавиатура. Маска ввода помогает, но не должна мешать вводить номер с кодом другой страны или с восьмёрки. Для почты подойдёт type="email", а атрибут autocomplete позволит браузеру подставить данные автоматически.

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

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

Имя, телефон и email — персональные данные, поэтому форма обратной связи подпадает под 152-ФЗ «О персональных данных». Владелец сайта становится оператором: он должен получить согласие посетителя на обработку и опубликовать политику обработки персональных данных.

С 1 сентября 2025 года согласие на обработку персональных данных оформляется отдельно от других документов. Фраза «нажимая кнопку, вы соглашаетесь с политикой конфиденциальности» больше не подходит: согласие не может быть частью политики или пользовательского соглашения.

• Отдельный документ «Согласие на обработку персональных данных»: кто оператор, какие данные, для каких целей, какие действия с ними совершаются, срок действия и порядок отзыва.
• Отдельный чекбокс рядом с кнопкой отправки со ссылкой на этот документ. Галочка не должна стоять заранее.
• Политика обработки персональных данных опубликована на сайте, и ссылка на неё доступна со страницы с формой.
• Согласие на рекламные рассылки, если они есть, запрашивайте ещё одним необязательным чекбоксом.

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

Форма на конструкторе и WordPress

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

Tilda. В библиотеке блоков есть отдельная категория форм: от одной строки с телефоном до форм из нескольких шагов. Поля, обязательность и сообщение после отправки задаются в «Контенте» блока. Куда уходят данные, определяют сервисы приёма данных в настройках сайта: почта, Telegram, Google Таблицы, CRM или webhook. Нужные сервисы отмечают в каждой форме отдельно — подключение в настройках сайта само по себе не включает их у блока.

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

Contact Form 7. Бесплатный плагин WordPress: поля описываются шорткодами, форма вставляется на страницу шорткодом, а заявка отправляется письмом. Хранить отправки в админке сам плагин не умеет, поэтому для CF7 особенно важно настроить отправку через SMTP: не дошло письмо — потеряна заявка.

Elementor Pro. Виджет «Форма» собирается визуально прямо в редакторе страницы. После отправки можно выбрать несколько действий: письмо, сохранение отправки в админке, webhook, редирект на страницу благодарности, передачу в сервис рассылок. Виджет есть только в платной версии Elementor.

Для Contact Form 7 и Elementor Pro есть плагин Site-Inbox: он сохраняет каждую отправку в общей панели и дублирует её в Telegram, а письма продолжают уходить как раньше.

Форма на HTML-сайте: обработчик или готовый скрипт

На сайте без CMS форма — это HTML-разметка плюс программа, которая примет данные. Сама по себе форма никуда их не доставит: атрибут action указывает адрес, и на этом адресе должен работать обработчик.

Классический вариант — PHP-скрипт с функцией mail(). Он запускается почти на любом хостинге, но у него известные минусы:

• Письма уходят без авторизации и часто без подписи DKIM, поэтому попадают в спам или отклоняются почтовыми сервисами.
• Проверку полей, защиту от спама и повторную отправку при сбое придётся писать самому.
• Заявка нигде не сохраняется: не дошло письмо — нет и заявки.
• На статических хостингах вроде GitHub Pages PHP не запускается вообще.

Если свой обработчик всё же нужен, отправляйте почту через SMTP с авторизацией и записывайте заявку в базу или файл до отправки письма.

Второй вариант — JS-скрипт сервиса сбора заявок. Серверная часть не нужна: скрипт перехватывает отправку формы и передаёт данные в API сервиса. Так работает Site-Inbox — форме достаточно двух атрибутов и одной строки подключения скрипта.

<form data-leadhub="lead" data-token="ВАШ_SITE_TOKEN">
  <input name="name" placeholder="Имя" autocomplete="name">
  <input name="phone" type="tel" placeholder="Телефон" autocomplete="tel" required>
  <textarea name="message" placeholder="Сообщение"></textarea>
  <label>
    <input type="checkbox" name="consent" required>
    Даю <a href="/soglasie">согласие на обработку персональных данных</a>
  </label>
  <button type="submit">Отправить</button>
</form>
<script src="https://api.site-inbox.ru/public/leadhub.js" defer></script>

Site Token выдаётся при добавлении сайта в кабинете. Он позволяет только отправлять заявки этого сайта и не даёт читать данные, поэтому его можно размещать в коде страницы. Поля name, email, phone и message распознаются автоматически, остальные сохраняются как дополнительные данные.

Скрипт сам добавит к заявке адрес страницы, referrer и UTM-метки визита, защитит от двойной отправки и не сотрёт введённый текст при ошибке сети. Сообщение после отправки задаётся атрибутом data-success-msg, страница благодарности — атрибутом data-redirect.

Куда отправлять заявки и как защититься от спама

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

• Почта — привычно и бесплатно, но доставка зависит от SPF, DKIM и настроек хостинга, а письма легко потерять среди рассылок.
• Telegram — уведомление приходит за секунды в личный чат или группу команды. Но в чате нет статусов, а старые заявки трудно найти.
• CRM — заявка сразу становится сделкой с ответственным и историей. Требует внедрения и окупается, когда обращений много и есть отдел продаж.
• Панель заявок — промежуточный вариант: обращения со всех форм и сайтов в одном списке со статусами, уведомления — в Telegram.

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

Открытая форма быстро начинает получать спам от ботов. Защиту лучше строить слоями, начиная с мер, незаметных для человека:

• Honeypot — поле-ловушка, которое человек не видит и не заполняет, а бот заполняет. Если в нём есть значение, обработчик отбрасывает отправку.
• Проверка времени заполнения — форму, отправленную через секунду после загрузки страницы, заполнил не человек.
• Ограничение частоты — не больше нескольких отправок с одного адреса за короткий промежуток.
• Капча — Яндекс SmartCaptcha или reCAPTCHA. Подключайте её, когда простых мер не хватает: капча отсекает и часть живых посетителей, а с неверными ключами блокирует все отправки.
• Проверка содержимого — отклонять сообщения, состоящие из одних ссылок, и заведомо неверные телефоны.

<div style="position:absolute;left:-9999px" aria-hidden="true">
  <input name="website" tabindex="-1" autocomplete="off">
</div>

Скрывайте поле через CSS, а не через type="hidden": многие боты пропускают скрытые поля. Атрибуты tabindex="-1" и autocomplete="off" не дают человеку случайно попасть в него клавишей Tab или через автозаполнение. Приём заявок в Site-Inbox дополнительно ограничен по частоте запросов.

Проверка после запуска и типичные ошибки

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

1. Отправьте тестовую заявку с компьютера и со смартфона, причём со смартфона — через мобильный интернет.
2. Убедитесь, что заявка пришла во все каналы: почту, Telegram, CRM. Загляните в папку «Спам».
3. Откройте сайт по ссылке с UTM-метками, перейдите на другую страницу и отправьте форму оттуда — метки должны сохраниться в заявке.
4. Проверьте сообщение после отправки: человеку должно быть понятно, что заявка принята и когда с ним свяжутся.
5. Настройте цель «Отправка формы» в Яндекс Метрике, чтобы видеть конверсию по источникам.
6. Повторяйте тестовую отправку после обновления темы, плагинов и переезда на другой хостинг.

Ошибки, которые встречаются чаще всего:

• Форма во всплывающем окне или на другой странице не подключена к тем же сервисам, что основная.
• Страница с формой закэширована вместе с устаревшим защитным токеном, и отправка завершается ошибкой.
• На мобильной вёрстке кнопку или чекбокс согласия перекрывает баннер cookies или виджет чата.
• После нажатия нет никакой реакции, и посетитель отправляет форму несколько раз или уходит.
• Обязательных полей слишком много, в том числе тех, что не нужны для первого ответа.
• Заявки уходят в ящик, который никто не проверяет по выходным.