Кнопки обратной связи для сайта: Форма обратной связи для сайта с отправкой на почту

Содержание

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

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

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

Выбор способа общения с пользователем зависит от задач сайта. Для срочных и быстрых вопросов пользователю удобнее заказать звонок или открыть чат с оператором, но нужно, чтобы кто-то дежурил на линии. Форма обратной связи работает как почта, просто с ней удобнее: не нужно копировать адрес, открывать почтовый сервис и нажимать лишние кнопки.

Задача формы — не испортить первое впечатление: не хамить, не пугать и не загадывать ребусов.

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

Взаимодействие с формой состоит из четырёх этапов:

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

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

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

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

Элементы формы

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

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

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

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

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

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

Кнопка про всё сразу на странице вымышленной компании

Вот как вся эта красота может выглядеть у компании с широким профилем:

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

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

Телефон и почта — традиционные каналы связи в деловой среде, но если целевая аудитория предпочитает мессенджеры, уместнее спрашивать логин в Телеграме/Скайпе или аккаунт ВК/ФБ.

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

Форму можно научить полноценному диалогу, прописав подсказки для разных ситуаций. Указан телефон — предлагаем указать почту, чтобы не диктовать её. Пользователь ввёл почту, предлагаем указать телефон, чтобы позже обсудить детали.

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

К обработке формы можно прикрутить CRM и квалифицировать заявки по заполненным полям. Например, если пользователь указал имя, почту, сообщение и приложил файлы, ставить заявку в приоритетные лиды. Заявки с одним номером телефона — как запрос звонка, а в ответ на имя и почту автоматически высылать презентацию. А потом подключить нейронную сеть, чтобы она определяла вес лида по тексту сообщения и отвечала на типовые вопросы.

Для начала можно научить форму определять день недели и выводить корректную подпись под полем телефона:

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

Телефонный номер приводим к нужному формату после ввода, чтобы не сбивать пользователя и не мешать вставлять номер автоподстановкой или по Ctrl + V.

Поле сообщения меняет размер, чтобы пользователь видел весь текст без прокрутки. Если форма не помещается в один экран, она вытягивается целиком, без полос прокрутки внутри модального окна.

Так удобнее скроллить и понятно, что внизу ещё что-то есть.

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

Ничего не мешает изложить дело обстоятельно

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

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

Фрагмент формы с недопустимым файлом

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

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

А если указал всё и приложил файлы, расскажем, что будет дальше.

Мы позвоним вам на этой неделе до 17:00 по Москве.

Мы позвоним вам в понедельник с 10:00 по Москве.

Мы изучим материалы и напишем вам в начале следующей недели.

А теперь немного прагматичного реализма.

Почему такую форму сложно сделать. Причины две: конечность ресурсов и ограничения движков и виджетов.

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

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

Разработчикам остаётся отдавать допил формы в качестве испытательного задания, а остальным — ждать виджета или плагина. Но если ваша форма активно продаёт, то делать её, конечно же, стоит на все деньги.

Обращайтесь к нам ;3

форма обратной связи | Impuls-Web.ru

23.04
2018

Приветствую вас, дорогие друзья! В этой статье я покажу вам один, очень интересный плагин, позволяющий создавать всплывающие окна, которые могут открываться не только при клике на определенную кнопку, но еще и через заданные промежутки времени, при прокрутке страницы до определенного места, или же при закрытии страницы. Навигация по статье: Плагин для всплывающих окон для WordPress […]

Читать…

08.12
2017

Здравствуйте, дорогие друзья и коллеги! Продолжаем разбирать интересные возможности Contact Form7. Для тех, кто пропустил первую часть статьи вот ссылка: Интересные возможности Contact Form7 Навигация по статье: Отправка дополнительно информации Как сделать маску ввода для номера телефона Как сделать отправку сразу нескольких файлов в Contact Form 7 Видеоинструкция Отправка дополнительно информации Согласитесь, было бы здорово […]

Читать.

04.12
2017

Приветствую вас, дорогие друзья! В этой статье вы узнаете о полезных возможностях плагина для создания форм обратной связи Contact Form 7. Навигация по статье: Как сделать перенаправление на страницу благодарности Как сделать отправку копии письма клиенту Как сохранить отправленные сообщения с Contact Fofm 7 в админке WordPress Видеоинструкция Ранее я уже делала статью по обзору […]

Читать…

30.06
2017

Приветствую вас, дорогие друзья! Сегодня я расскажу вам об одном, очень важном нововведении, которое будет необходимо как можно быстрее внедрить у себя на сайте. Для того, что бы в будущем избежать штрафов от Роскомнадзора. Навигация по статье: Суммы штрафов Какие условия должен соблюдать сайт и что вам нужно внедрить? Что делать в том случае если […]

Читать…

28.04
2017

Здравствуйте, дорогие друзья! В предыдущих статьях я рассказывала о том, как создать на своём сайте всплывающую форму обратной связи без плагина. Если вы с ними ещё не ознакомились то вот ссылки: Всплывающая форма обратной связи без плагинов (часть 1) Всплывающая форма обратной связи без плагинов (Часть 2) Добавление сложной всплывающей формы без плагина В данной […]

Читать…

14.04
2017

Здравствуйте, дорогие друзья! В данной статье я продолжу рассказывать о подключении и настройке всплывающей формы обратной связи. На всякий случай вот ссылка на предыдущую статью, в которой можно скачать готовый скрипт форма и подключить к сайту. Навигация по статье: Подключение всплывающей формы обратной связи Вывод кнопки со всплывающей формой обратной связи на сайте Редактирование стилей […]

Читать…

10.04
2017

Приветствую вас на сайте Impuls-Web! В данной статье я расскажу вам о том, как можно сделать на вашем сайте всплывающую форму обратной связи без установки дополнительных модулей и плагинов. Данное решение подойдет абсолютно для любого сайта, не зависимо от того какой движок для сайта вы используете, и используете его вообще. Навигация по статье: Скрипт для […]

Читать…

31.10
2016

Добрый день, дорогие посетители сайта Impuls-Web! В этой статье я хотела бы рассказать подробнее о Google reCAPTCHA, как установить и настроить ее для своего сайта. Так как данный инструмент является универсальным, и вы можете его применять не только в формах обратной связи, но и в других интерактивных элементах вашего сайта, например, таких как форма регистрации, […]

Читать…

25.04
2016

Приветствую вас дорогие читатели моего блока! Мне не раз поступали вопросы о возможности перенаправления после отправки сообщения на страницу благодарности, поэтому сегодня я расскажу именно об этом. Навигация по статье: Для чего нужно перенаправлять пользователя на страницу благодарности? Как сделать перенаправление после отправки сообщения в Contact Form 7. Автоматическое перенаправление со страницы благодарности на главную […]

Читать…

30.03
2016

Здравствуйте, уважаемые читатели! Наверняка вы уже сталкивались с ситуацией, когда вам нужно определить CSS класс или идентификатор элемента на странице чтобы приписать ему определённые CSS свойства и изменить его внешний вид. Навигация по статье: Просмотр кода элемента в браузере MozillaFirefox Просмотр кода в GoogleChrome Определение ID в Opera Что делать дальше с этими классами и […]

Читать…

28.03
2016

Приветствую вас, дорогой друг! Сегодня мы поговорим о том как осуществлять отправку прикрепленных файлов с формы обратной связи вашего сайта на WordPress. Бывает, возникает необходимость когда вам нужно получить с сайта не просто какие-то текстовые данные от пользователя, а еще и добавить возможность отправлять прикрепленные файлы, это могут быть какие-то схемы, чертежи, отсканированные документы, заполненные […]

Читать…

21.03
2016

Здравствуйте, дорогие читатели моего блога! После выхода моей статьи: «Изменяем стили для contact form 7. Три готовых решения» мне на почту пришло много писем с просьбами добавить ещё некоторые распространённые варианты оформления форм обратной связи. Поэтому в этой статье я покажу ещё несколько вариантов оформления Contact form 7 и дам готовые стили для использования на […]

Читать.

22.02
2016

Приветствую Вас, дорогой читатель моего блога! В данной статье я подробно расскажу о том, как сделать эффективную защиту от спама для Contact Form 7. С каждым днём количество спамных сообщений, отправляемых через формы обратной связи владельцам сайтов увеличивается. Создано множество различных служб и сервисов для автоматической рассылки сообщений через формы обратной связи на сайтах. Причём […]

Читать…

12.02
2016

Приветствую вас, дорогой читатель! У вас уже бывали ситуации, когда вам не хватает стандартных полей Contact form 7 и нужно добавить ещё чтобы расширить функционал вашей формы? Если да, то эта статья именно для вас. Из этой статьи вы узнаете про про особенности настройки Contact form 7, научитесь добавлять и настраивать разные типы полей, раскрывающиеся […]

Читать…

22.01
2016

Приветствую Вас, дорогой читатель моего блога. Сегодня я покажу вам как очень быстро и просто изменить внешний вид contact form 7, что бы она стала более привлекательной. Навигация по статье: Обзор плагина Сontact Form7 Style Меняем внешний вид Contact Form7 при помощи собственного стиля. Изменяем внешний вид Contact Form 7 без плагина. Изначально Сontact Form7 […]

Читать…

Полное руководство по кнопкам обратной связи

Группа обратной связи Sabre

Январь 2021 г.

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

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

Видеоверсия этой страницы

Как работают кнопки обратной связи?
Каковы преимущества использования кнопки обратной связи?
Где можно использовать кнопку обратной связи?
Как можно использовать кнопку обратной связи?
Чем отличаются инструменты кнопки обратной связи?
- Отзыв о скриншоте
- Метаинформация
- Не зависит от платформы или предназначен только для определенных сред
- Как вы обрабатываете отзывы (включая интеграцию)
Как установить кнопку обратной связи?
Какая форма обратной связи подойдет вам лучше всего?
Как можно улучшить работу кнопок обратной связи?
Попробуйте Sabre Отзыв – 30-дневная бесплатная пробная версия

Как работают кнопки обратной связи?

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

Форма обратной связи — это всплывающее или скользящее наложение. Формы обратной связи, вызываемые кнопками обратной связи, обычно довольно просты и содержат не более нескольких вопросов.

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

Использование кнопки обратной связи на вашем веб-сайте имеет много преимуществ. Вот основные из них:

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

В этом примере форма обратной связи помогает выявить проблемы с удобством использования:

Кнопки обратной связи

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

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

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

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

Эта кнопка обратной связи находится в разделе технических справочников веб-сайта Omega:

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

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

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

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

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

В этом примере Confused.com хочет, чтобы пользователи успешно получили расценки на страхование автомобиля. Кнопка обратной связи доступна, если у них возникнут проблемы.

В этом примере CodersRank хочет предоставить пользователям простой способ оставить отзыв о таблице лидеров «Лучшие разработчики». Они не используют кнопку обратной связи на своих маркетинговых страницах, потому что случайные посетители сайта будут давать разные отзывы заинтересованным разработчикам, сосредоточенным на конкретной цели.

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

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

Чем отличаются инструменты кнопки обратной связи?

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

Вот некоторые отличия, на которые следует обратить внимание:

Отзыв о скриншоте

Некоторые поставщики кнопок обратной связи позволяют вашим пользователям делать снимки экрана веб-страницы. Это устраняет путаницу, позволяет пользователям быстрее оставлять отзывы и экономит время вашей команды при обработке этих отзывов.

Вот наша статья об инструментах визуальной обратной связи, включая 4 инструмента обратной связи, которые вы можете рассмотреть.

Метаинформация

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

Информация об устройстве пользователя
Информация о пользователе, такая как IP-адрес и местоположение
Плагины для браузера
URL страницы
Когда отзыв был отправлен
Электронная почта
События JavaScript, произошедшие до отправки отзыва

Не зависит от платформы или предназначен только для определенных сред

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

Например, многие инструменты кнопки обратной связи работают только на веб-сайтах WordPress.

Некоторые инструменты кнопки обратной связи более гибкие. Кнопку Sabre Feedback можно использовать в большинстве систем управления обучением, включая Moodle. Его можно использовать на Shopify и других сайтах электронной коммерции. Также есть плагин для WordPress. Однако он не работает в электронных письмах и в приложении.

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

Как вы обрабатываете отзывы (включая интеграцию)

Инструменты кнопок обратной связи существенно различаются по способу обработки обратной связи.

Обратите внимание на следующие параметры:

Кнопка обратной связи, которая отправляет отзыв прямо на панель мониторинга с некоторой функцией поиска, опцией экспорта и аналитикой
Кнопка обратной связи, которая отправляет отзыв прямо на выбранную вами учетную запись электронной почты
Кнопка обратной связи, которая соединяется с вашими любимыми инструментами, такими как Jira, Trello, Zendesk или Slack, и отправляет отзыв прямо в эти

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

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

Кнопки обратной связи на сайте должны быть просты в установке. Чаще всего это вставка фрагмента кода на ваш сайт. Для этого вам может понадобиться помощь вашего веб-разработчика.

Это обычный процесс установки:

Получите код виджета из инструмента обратной связи по вашему выбору
Вставьте в HTML-код вашего веб-сайта

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

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

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

Инструменты кнопки обратной связи

позволяют создавать как общие формы обратной связи, так и специальные, запрашивающие определенный тип обратной связи.

Например, вы можете отслеживать рейтинги удовлетворенности клиентов:

Или вы можете запросить запросы и предложения функций:

Вот 5 шаблонов форм обратной связи для веб-сайтов, которые помогут вам начать работу.

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

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

Чтобы убедиться, что вы получаете точную и действенную обратную связь, попробуйте:

Использование специальной кнопки обратной связи и формы на страницах, где пользователи выполняют определенное действие. Это дает лучшие результаты, чем использование одной и той же формы обратной связи на всех страницах вашего веб-сайта, курса или веб-приложения 9.0014
Настройка копии кнопки обратной связи: «Сообщить об ошибке», «Предложение функции?», «Как мы поживаем», возможно, все это больше подходит
Изменение положения или стиля кнопки обратной связи: в нижней части страницы может работать лучше, или замена кнопки значком вопросительного знака в верхней панели навигации

Эта кнопка обратной связи находится внизу страницы:

Попробуйте Sabre Отзыв – 30-дневная бесплатная пробная версия

Sabre Feedback легко устанавливается, настраивается и подключается к другим вашим инструментам.

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

См. цены или Узнайте больше об обратной связи Sabre.