Пишем формочку обратной связи аля Reformal

 

Обратная связь на сайтеПривет всем. Полезное дело – получать обратную связь. Полезное в отношении веб проекта, который вы поддерживаете и продвигаете. Полезно в отношении посетителей, ради которых он и затевался. Они могут вовремя просигналить вам об критической ошибки, которую вы бы не нашли, а другие, натыкаясь на нее – просто уходили с сайта без разборок.
Как показывает практика - связь в службу поддержки оставляет далеко не каждый, оно и понятно. Нужно отвлечься от текущей операции, искать форму обратной связи, если такая вообще существует, заполнять поля кто я такой, почту свою еще указывать, запоминать адрес страницы, где все это произошло, суметь правильно описать проблему, чтобы на другом конце могли понять… куча проблем...
Давайте упрощать все это дело. Что мешает нам на каждом окне в углу расположить кнопочку обратной связи?.. Даже не важно, кто постит проблему или пожелание, пользователь или случайный прохожий. Важно вовремя знать, что оно есть, или получить варианты размышлений на тему будущих доработок.
Размещая кнопочку на каждой странице – пользователю уже нет необходимости говорить о том, где он увидел проблему. Пользуясь сессиями, куками и IP – мы можем каким-либо образом идентифицировать пользователя для дальнейшей возможной обратной связи. Таким образом – пользователю достаточно заполнить одно поле, которое чаще всего можно уместить в одной строке.

Таким путем пошло reformal, предлагающий для каждого из сайтов подключить некий сборник обратных связей пользователей точно такой же кнопкой на каждой странице. Таким путем пошли некоторые другие обратные связи copiny, jivosite. Некоторые из них сопровождаются возможностью чата со службой поддержки или консультантами. Возможности чата – это хорошо, но на это нужно выделить людские ресурсы. Это больше подходит для консультаций клиентов перед покупками, а у нас лишь обратная связь.

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

<div id="_os">Оставьте свой отзыв 
<input type="text" onkeydown="if (event.keyCode==13)$.post('os.php',{ data: this.value },function(){ 
$('#_os input').val('');alert('Спасибо. Ваш отзыв обязательно будет учтен');
 });">
</div>

Ссылка, текстовое поле и команда для принятия результата по нажатию Enter.
Здесь нужен Jquery. Если он и так подключен – проблем не будет. Если него нет – можно сделать форму без Javascript вовсе

<div id="_os">Оставьте свой отзыв <form method=”post” ><input type="text" name=”message”><input type="submit"></form></div>

Но в этом случае мы теряем все заполненные формы на странице, раз не пользуемся Ajax и нужно прописывать скрипт для каждой из страниц, либо прописать action=”/os.php”и в нем – возврат redirect на $_SESSION[‘HTTP_REFERER’]
Чтобы выглядело красиво и кнопочка прилипала к нижней правой части экрана – создадим ей стиль, примерно

#_os{
    bottom: 0;
    height: auto;
    position: fixed;
    right: 0px;
    z-index: 300000;
    background: #7ba6b2;
    padding: 5px;
    color: #eee;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
}
#_os:hover{
    background: #499bea;
}
#_os input{
    border: 1px solid #ccc;
    margin-left: 3px;
    display: none;
}
#_os:hover input{
    display: inline;
}

То есть при наведении – становится виден input и появляется на месте записи «оставить отзыв»
Все просто и понятно. Хотите – добавьте градиентов, бекграундов, теней или других моментов под стиль сайта
В файле os.php – уже полная свобода. Любые оповещения и сохранения в файлы логов.
В варианте с формой – в стилях нежно прописать данные для form вместо input – display: none,display: inline;
Посмотреть пример можно на данном сайте. Прилепить форму можно к любой стенке по вашему желанию без сильных заморочек.
Работает для IE 7+ и других браузеров

  • Автор: kosmom
  • Рейтинг: 0
  • Просмотров: 1013
  • Комментариев: 0
  • Создан: 12.01.2012 13:08

Комментарии (0)

Ваши предложения и пожелания пишите на pro@kosmom.ru

Теги

backup bootstrap core framework eloquent excel home project html ios javascript keep-alive kpi laravel legacy mvp orm php rip scroll timestamp undefined vue vuetify watch безопасность биометрический паспорт ваша любаша для путешествий загран на 10 лет загран паспорт загранпаспорт нового образца зимние книги как заполнить анкеты кеширование книги на новый год логирование мцф недвижимость новогодние книги образец заполнения антеты паспорт для путешествий паспорт нового поколения печать продукт проектирование прокси разработка ремонт ремонт в апартаментах ремонт нежилого помещения самокат сдача сколько стоил ремонт апартаментов спорт стандарты таблица финансы хостинг цена ремонта что почитать зимой юзабилити

Случайный пост

07.01.2018 10:26
Фильмы, просмотренные в 2017 году