Форма обратной связи на сайт

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

Форма обратной связи это блок на сайте, через который посетитель пишет компании, не открывая почту и мессенджер: оставляет имя, контакт и сообщение и нажимает «Отправить». Обращение сохраняется у владельца сайта, а человек сразу видит подтверждение. Это самый короткий путь от вопроса посетителя до ответа менеджера.

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

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

Формы различаются тем, чего вы ждёте от человека после отправки. От этого зависит число полей и место на странице.

Для развёрнутой заявки удобнее готовые шаблоны: «Контактная форма» на шесть блоков, «B2B лид-форма» с размером компании и каналом связи, «Форма обратной связи» с ветвлением по причине обращения. Для оценки качества после обращения есть CSAT, для отзыва о продукте шаблон «Отзыв о продукте».

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

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

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

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

1. Соберите форму в аскио, опубликуйте её и откройте вкладку «Виджет» в окне публикации. Скопируйте фрагмент кода.
2. В редакторе страницы Тильды добавьте блок T123 «HTML-код» из раздела «Другое».
3. Вставьте код в блок и сохраните.
4. Опубликуйте страницу и проверьте форму на опубликованной версии.

В редакторе Тильды скрипты не выполняются, поэтому на месте блока форма не видна. Это нормально: она появится на опубликованной странице.

Как поставить форму обратной связи на WordPress

Плагин для формы ставить не нужно. В редакторе блоков откройте страницу, добавьте блок «Произвольный HTML» и вставьте туда код виджета. Если форма нужна на всех страницах, например в сайдбаре или подвале, добавьте тот же блок в разделе «Внешний вид → Виджеты». Сохраните и откройте страницу на сайте: форма подгрузится вместе с ней.

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

Как поставить форму обратной связи на 1С-Битрикс

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

В Битриксе часто стоит ограничение на вставку скриптов в содержимое страниц: редактор может молча вырезать тег script. Тогда вставьте код в шаблон сайта (например, перед закрывающим тегом body, если нужна кнопка в углу на всех страницах) или во включаемую область. Подробности про атрибуты и события виджета в документации для разработчиков.

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

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

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

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

Куда приходят заявки и почему не на почту

Все обращения копятся во входящих внутри сервиса, их можно выгрузить в CSV для Excel. Писем о новых заявках аскио не отправляет: на это легко рассчитывать и так же легко пропустить, когда письмо ушло в спам.

Вместо почты с тарифа Pro подключается webhook: каждая новая заявка уходит на ваш адрес, например в Telegram-бот менеджеров или в CRM. Пошаговая схема с AmoCRM и Telegram в статье «Webhook + AmoCRM + Telegram». На бесплатном тарифе заявки не теряются, их просто нужно смотреть во входящих.

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

• Проверка формата телефона и почты отсекает мусор вида «asdf» ещё до отправки.
• Обязательные поля не дают отправить пустую форму.
• Блок капчи Yandex SmartCaptcha останавливает ботов. Доступен с тарифа Pro.
• Ограничение сайтов, на которых разрешён виджет, не даёт встроить вашу форму на чужую страницу.

Ошибки, из-за которых форма теряет заявки

• Семь обязательных полей там, где хватило бы трёх. Человек хотел задать вопрос, а его просят указать ИНН.
• Нет подтверждения после отправки. Посетитель не уверен, ушло ли сообщение, и отправляет его трижды или уходит к конкуренту.
• Поле «телефон» без проверки. В базе оказываются номера без кода города и с лишней цифрой.
• Заявки никто не смотрит. Если оповещений нет, назначьте человека, который проверяет входящие хотя бы дважды в день.
• Форма на сайте, который долго грузится. Тяжёлый iframe добавляет сотни килобайт, и на мобильном интернете форма появляется, когда посетитель уже ушёл.

Если сравниваете сервисы для формы на сайт, посмотрите сравнение аскио и Яндекс Форм. Когда вместо короткого обращения нужны подробные данные о клиенте, соберите анкету: там больше полей и логики показа. Другие виды форм, от заявки до брифа, собраны на странице конструктора форм.