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

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

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

В статье:

• Что такое форма обратной связи и чем она отличается от других форм
• Какие бывают виды форм
• Как создать форму обратной связи: 5 шагов
• 8 правил хорошей формы
• Типичные ошибки
• Как установить форму на сайт
• Частые вопросы

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

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

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

Какие бывают виды форм

Выбор типа зависит от того, что вы хотите узнать. Вот пять основных вариантов.

1. Оценка CSAT (от 1 до 5)

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

2. NPS (от 0 до 10)

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

3. Да / нет

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

4. Свободный комментарий

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

5. Опрос с вариантами ответа

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

Бонус: контактная форма

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

Как создать форму обратной связи: 5 шагов

Шаг 1. Определите цель

Прежде чем рисовать форму, ответьте на один вопрос: что вы будете делать с ответами? Если нет ответа, форма превратится в декорацию.

Примеры целей:

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

Одна форма — одна цель.

Шаг 2. Выберите тип виджета

Опирайтесь на цель:

Если сомневаетесь, начинайте с CSAT или «да/нет»: они проще всего запускаются и дают быстрый результат.

Шаг 3. Напишите вопрос

Вопрос — главная часть формы. Он должен быть:

• один, а не три сразу;
• конкретный: «Что остановило вас от оплаты?» вместо «Как вам сайт?»;
• на человеческом языке, без канцелярита.

Добавьте необязательное поле для комментария. Для шкалы 1–5 подготовьте разные сообщения под низкие и высокие оценки. Примеры формулировок можно взять из шаблонов вопросов.

Шаг 4. Настройте, где и когда показывать

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

• после целевого действия (оплата, отправка заявки);
• на конкретных страницах (тарифы, оформление, инструкция);
• когда человек собирается уйти или провёл на странице заметное время.

Не показывайте форму тем, кто уже ответил.

Шаг 5. Вставьте код на сайт и проверьте

Скопируйте код виджета и вставьте на сайт. Затем откройте сайт с телефона и с компьютера, пройдите форму сами и убедитесь, что:

• форма не закрывает важные кнопки и не мешает навигации;
• отправка работает, а ответ появился в личном кабинете;
• текст помещается на маленьком экране.

В Feely все пять шагов проходят в конструкторе. Начать можно бесплатно: тариф без оплаты включает 1 виджет и 2000 показов в месяц.

8 правил хорошей формы

1. Коротко. Чем меньше полей, тем больше людей дойдут до конца. Если можно обойтись одним кликом, не просите писать текст.
2. Одна цель. Не смешивайте оценку, заявку на звонок и подписку на рассылку.
3. Понятный вопрос. Человек должен понять, что от него хотят, за две секунды.
4. Необязательный комментарий. Заставлять писать нельзя: часть людей закроет форму.
5. Минимум персональных данных. Просите email, только если собираетесь отвечать. Поясните зачем.
6. Удобно на телефоне. Многие посетители заходят с телефона, поэтому кнопки должны быть крупными, а текст не должен обрезаться.
7. Простое закрытие. Крестик должен быть заметным. Принудительные формы вызывают злость.
8. Обратная связь на обратную связь. После отправки скажите «Спасибо, мы вас услышали». А ещё лучше действительно ответьте.

Типичные ошибки

• Слишком много полей. Анкета на десять пунктов — повод закрыть вкладку.
• Показ слишком рано. Человек ещё не познакомился с сайтом, а его уже спрашивают об оценке.
• Один и тот же вопрос в любых местах. Вопрос про оплату на странице блога бессмысленен.
• Нет реакции на ответы. Отзывы копятся, никто их не читает. Клиенты замечают и перестают писать.
• Скрытая или непонятная кнопка отправки. Форма заполнена, а как её отправить, неясно.
• Нет согласия на обработку данных. Если собираете имя или email, согласие обязательно по 152-ФЗ.
• Дизайн не по сайту. Чужеродный виджет выглядит как реклама, и на него реже реагируют.

Как установить форму на сайт

Подход зависит от платформы.

• Tilda. Вставьте код в блок «Т123 — HTML» или в настройки сайта, чтобы виджет работал на всех страницах. Инструкция для Tilda
• WordPress. Добавьте код через плагин для вставки скриптов или в файл темы перед закрывающим тегом </body>. Инструкция для WordPress
• Bitrix, InSales и другие CMS. Вставьте код в шаблон сайта или в раздел кастомных скриптов.
• Свой сайт. Вставьте код в шаблон перед </body>.

Подробные инструкции по каждой платформе собраны на странице «Установка виджетов».

Что делать после запуска

Форма запущена, ответы пошли. Дальше:

1. Раз в неделю читайте ответы целиком, а не только среднюю оценку.
2. Отвечайте на негатив в день обращения. Это самый ценный момент для удержания клиента.
3. Группируйте жалобы по темам и исправляйте то, что повторяется.
4. Сообщайте людям об улучшениях. Так они понимают, что их голос услышан.

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

Частые вопросы

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

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

Можно ли создать форму обратной связи без программиста?

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

Чем виджет обратной связи лучше обычной формы на странице «Контакты»?

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

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

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

Сколько полей должно быть в форме?

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

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

Там, где у посетителя есть что сказать: после покупки, на странице оформления, под инструкциями, при уходе со страницы тарифов. Показывать форму всем сразу при входе не стоит.

Есть ли бесплатные варианты?

Да. У Feely есть бесплатный тариф навсегда: 1 виджет и 2000 показов в месяц. Данные хранятся в России, оплата картой РФ, VPN не нужен.

Читайте также

• Как собирать обратную связь от клиентов: спрашивайте в моменте
• Шаблоны вопросов для виджетов
• Типы виджетов и когда их использовать