Добавление виджетов обратной связи

Добавление виджетов обратной связи

На Тильде есть собственные виджеты обратной связи и интеграция со сторонними сервисами.

Собственные виджеты Тильды расположены в категориях «Форма» и «Кнопка».

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

Расположение (в какой части экрана будет размещен ваш виджет) можно настроить только для настольных компьютеров (разрешение от 980px и выше). Для мобильных устройств (разрешения от 0 до 980px) виджет будет зафиксирован в правой нижней части экрана.

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

Как подключить формы приема данных

Виджет для заказа обратного звонка

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

Добавьте на страницу блок BF901 (Библиотека блоков > Форма > Виджет для заказа обратного звонка)

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

Чтобы информация отправилась в сервис приема данных, в меню «Контент» отметьте галочкой подключенный сервис.

В мобильной версии клик по кнопке активирует функцию звонка в телефоне.

Чтобы функция сработала, необходимо заполнить поле «телефон».

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

Виджет для отправки сообщений

Клик на кнопку открывает форму, в которой можно написать сообщение и оставить email и имя.

Перейдите в ваш проект на Тильде и добавьте на страницу блок BF902N (Библиотека блоков > Форма > Виджет для отправки сообщений)

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

Сохраните изменения и опубликуйте страницу.

Виджет с формой подписки

Клик на кнопку открывает форму, в которой можно оставить email.

Добавьте на страницу блок BF903 (Библиотека блоков > Форма > Виджет с формой подписки)

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

Сохраните изменения и опубликуйте страницу.

Виджет с номером телефона

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

Добавьте на страницу блок BF904 (Библиотека блоков > Кнопка > Виджет с номером телефона)

В меню «Контент» укажите номер телефона и добавьте дополнительную информацию о том, кому посетитель сайта будет звонить.

Виджет с мессенджерами

Клик на кнопку открывает окно с ссылками на социальные сети, по которым посетитель сайта может перейти.

Добавьте на страницу блок BF905 или BF905A (Библиотека блоков > Кнопка > Виджет с формой подписки). Блоки отличаются по дизайну, но остальные настройки одинаковые.

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

Добавьте необходимую информацию. Сохраните изменения и опубликуйте страницу.

Так же в Тильду могут быть добавлены сторонние сервисы обратной связи с помощью блока T123 «HTML-код»

Сервисы и виджеты для сайта — прокачай Тильду!

Вставка HTML кода

HR-Академия | Алгоритм обратной связи


Неумение давать обратную связь демонстрирует на занятиях 95% студентов-руководителей.

Во-первых, мешает масса ограничений в голове, зачем ее в принципе давать:

  • «Они взрослые,  сами знают, хорошо справляются с делом или нет. Нет необходимости говорить им об этом»
  • «Если хвалить — зазнается…» 
  • «У меня нет времени заниматься этим, все и так работает, разве это важно?»

 


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

 

Так что же мы их мучаем? Мне кажется, основное, что мешает руководителю, директору по персоналу или хорошему hr-менеджеру — это незнание правильной последовательности (что за чем говорить, какие вопросы задавать, где брать ответственность на себя, где отдавать сотруднику) и простое отсутствие навыка. 

 

А ведь с обратной связью все просто. У нее совершенно четкий алгоритм. 5 одинаковых шагов. Делай раз, делай два… делай пять. И будет вам счастье в виде улучшения поведения и результатов ваших людей.

Итак, запоминаем.


Если обратная связь корректирующая (т.е. был допущен косяк)


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


2. Даем «фотографию» ситуации. Только факты. Никаких эмоций. Сделано-не сделано, есть-нету, увидел это, услышал это, вот такая ситуация, вот такие результаты по факту. Если ситуация тянет на ступень позитивной дисциплины/выговор/желтую карточку (в зависимости от того, какая система дисциплины у вас в компании применяется), в этот момент говорим о том, что она будет выдана. — 1 мин


3. Уточняем причины произошедшего. Но не даем в них зависать. Главное, не даем уходить из авторской позиции и переводить стрелки на смежников, обстоятельства, «хозяйка, пули свистели над головой». Возвращаем в авторское поведение.- не более 3х минут

     
      Подробно о пользе обратной связи и инструментах создания
      правильной атмосферы в команде мы также рассказываем
      на курсе Менеджер по внутренним коммуникациям

4. Просим предложить, как в дальнейшем не допускать подобной ситуации. Ни за что не говорим сами, никаких предложений не выносим. Не берем на себя чужую обезьяну. Ждем, терпим, помогаем вопросами, можем даже спросить, в чем нужна помощь, но план должен предложить сам сотрудник. Четкий, конкретный план. За который он сам отвечает. Протоколируем план. — макс.10 мин


5. Заканчиваем позитивом, верим в то, что все так и будет, жмем руки, сообщаем, когда следующая встреча или что-то еще. — 1 мин.

Если обратная связь позитивная — хвалим (т.е. классные результаты или клевая ситуация)


1. Начинаем с позитива, трясем руку, радуемся.


2. Даем «фотографию» ситуации. Обязательно. Подробно. Факты. Увидел это, услышал это, вот такая ситуация, вот такие результаты получены. И как это прекрасно. Если ситуация тянет на зеленую карточку/награду/медаль, в этот момент говорим о том, что она будет выдана, или выдаем. — 1 мин.


3. Уточняем причины произошедшего. Не пропускаем этот этап. Задаем вопрос: Как ты смог? Как это получилось? — не более 10 минут.


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


5. Заканчиваем позитивом: снова благодарим, трясем руки/хлопаем по плечу/обнимаемся. Сообщаем, когда следующая встреча или что-то еще.

 

Элементарно же, да? Просто положите алгоритм перед собой и в течение месяца тренируйтесь.

 

Пишите, если что не понятно: [email protected]

Успехов, поменьше вам косяков и побольше позитивной обратной связи!

Ваша Чемеринская

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

Объяснение кода HTML Шаг за шагом

Шаблон HTML: первые несколько строк кода включают объявление типа документа HTML5, а также открывающий и закрывающий теги для HTML-элемент. Атрибут lang имеет значение «en», чтобы указать, что документ на английском языке.

Раздел заголовка: Раздел заголовка содержит тег meta charset, который указывает кодировку символов документа. Элемент title задает заголовок страницы, которая отображается на вкладке браузера. Элемент link используется для связывания файла CSS с документом HTML.

Раздел тела: Раздел тела содержит основное содержимое страницы. Элемент section с классом «feedback-section» используется для содержания формы обратной связи с пользователем.

Заголовок: Элемент h3 используется для отображения основного заголовка формы обратной связи с пользователем «Насколько вы удовлетворены нашими услугами?». Элемент br используется для создания разрыва строки между двумя строками текста.

Раздел рейтинга: элемент div с классом «рейтинг» содержит три дочерних элемента div с классами «недовольный», «счастливый» и «удовлетворенный». Каждый дочерний элемент div содержит эмодзи, представляющие разный уровень удовлетворенности, а также заголовок, описывающий уровень удовлетворенности.

Кнопка обратной связи: Элемент div с классом «feedback-btn» содержит элемент кнопки с идентификатором «btn» и атрибутом типа «button». На кнопке отображается текст «Отправить отзыв».

JavaScript: тег script содержит ссылку на внешний файл JavaScript с именем index.js. Этот файл, вероятно, содержит код JavaScript, необходимый для обработки взаимодействия пользователя с формой, например для отправки данных обратной связи на сервер.

Вот пошаговое объяснение кода JavaScript:

Выбор элементов из DOM: код начинается с выбора нескольких элементов из документа HTML с помощью методов querySelector и querySelectorAll. В частности, он выбирает элемент div с классом «рейтинг», все дочерние элементы div с классом «дочерний», элемент раздела с классом «раздел обратной связи» и элемент кнопки с идентификатором «бтн». Он также объявляет переменную с именем «icon», которая будет использоваться для хранения выбранного пользователем уровня удовлетворенности.

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

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

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

Получение данных отзыва пользователя: функция обратного вызова затем объявляет две новые переменные, «user_feedback» и «user_feedback_icon», которые будут использоваться для хранения текста отзыва пользователя и выбранного им значка соответственно. Он проверяет, является ли переменная «icon» неопределенной (т. е. выбрал ли пользователь уровень удовлетворенности) и устанавливает для переменной «user_feedback» пустую строку, если это так. В противном случае он устанавливает «user_feedback» в текстовое содержимое заголовка в выбранном элементе div уровня удовлетворенности и устанавливает «user_feedback_icon» в текстовое содержимое значка в этом элементе div.

Обновление раздела обратной связи с ответом пользователя: если переменная «user_feedback» не является пустой строкой, функция обратного вызова использует свойство innerHTML для замены содержимого элемента div «feedback_section» новым элементом div, отображающим данные обратной связи. Этот новый элемент div содержит значок выбранного уровня удовлетворенности, текст отзыва пользователя, сообщение с благодарностью пользователю за его ответ и ссылку для возврата к исходной форме отзыва.

Получите исходный код здесь: https://github.com/thapatechnical/userFeedback 

15 контактных форм CSS

Коллекция отобранных вручную бесплатных примеров кода контактной формы HTML и CSS из CodePen, GitHub и других ресурсов.

Обновление ноябрьской коллекции 2021 года. Один новый предмет.

  1. CSS-формы
О коде

Контактная форма с анимацией SVG

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: bootstrap.css

О коде

Пограничная форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Красочная контактная форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: —

О коде

Форма отзыва о ретро интерфейсе

HTML и CSS ретро форма обратной связи пользовательского интерфейса.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: нет

Зависимости: —

О коде

Адаптивная трехмерная контактная форма CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Плавающая контактная форма CSS

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Свяжитесь с нами Форма

Дизайн Gururaj — https://dribbble. com/shots/2666271-Контакт

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Свяжитесь с нами Форма

Форма обратной связи с анимацией в HTML, CSS и JS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Свяжитесь с нами Форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: bootstrap.css

О коде

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

О коде

Контактная форма в винтажном стиле

Подходит для мобильных устройств. Простая, но эффективная контактная форма .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Отзывчивая контактная форма

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Ответ: да

Зависимости: bootstrap.

No related posts.