как выглядит форма обратной связи на сайтах

Форма обратной связи на сайте: что это и как ее создать

6 ноября 2017 Опубликовано в разделах: Азбука терминов. 21600

Для чего нужна обратная связь

Два вида коммуникации с посетителем

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

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

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

Для разработки необходимы знания php, html и javascript. На CMS существуют разные конструкторы, позволяющие сделать сервис обратной связи, также можно воспользоваться сервисами в интернете. Но все же предпочтительнее первый способ. Вы, как администратор сайта, должны точно знать, какие механизмы применяются для отправки сообщений.

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

Структура

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

Как правило, обязательными к заполнению являются поля: ФИО, телефон, e-mail, ваш вопрос. Самая простая страница коммуникации должна содержать эти поля.

Помимо текстовых полей, страница может содержать элементы выбора.

Пример сервиса обратного звонка

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

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

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

Где размещать

Обычно применяют два вида размещения формы:

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

Правила хорошего тона

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

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

Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.

Мы не просто говорим, в чем проблемы. Мы помогаем их решить

Источник

Обратная связь для сайта

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

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

Формы обратной связи на сайт — что выбрать

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

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

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

Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

Остальным-то что делать?

Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

Программисты конечно могут написать самостоятельно подобный скрипт обработки данных на PHP, оформить внешний стиль, прикрутить к нему капчу, добавить проверку правильности ввода полей (в т.ч. email) на странице, добавить поля для загрузки файлов, сделать эту форму на AJAX без перезагрузки.

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

Я же предлагаю сэкономить:

И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

HTML&PHP форма (и скрипт) обратной связи для блога, сайта

Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

Вставка на сайт производится просто:
— можете дать ссылку на /sendmail/index.php
— можете сразу вставить на страницу, при помощи кода

Код можно найти на сайте, ссылка на который размещена выше.

Форма довольно минималистичная — не всем понравится дизайн «прямиком из девяностых», кому-то не нужна каптча, кому-то не хватает Аякса и красивых сообщений об ошибке. Решение есть.

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Как выглядит конфиг внутри («\code\assets\xml\config.php»):

Конфиг для настройки полей («\code\assets\xml\fields.php»):

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

Преимущества этой формы над предыдущей:
— более эстетично привлекательная
— используется проверка полей, ошибки выводятся через AJAX
— подробнейшая инструкция по установке и настройке внутри
— есть подсказки под полями

Например, посмотрите как в этой форме связи выводятся ошибки:

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

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

Вы также можете посмотреть интересный видеоурок по данному скрипту:

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

Установка готовой бесплатной формы обратной связи на сайт

Итак, на одном сайтов установлена вот такая «кнопка»:

Если нажать на нее, вниз «выпадет» форма обратной связи:

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

А вот что придет вам на почту, после того как пользователь оставит свои контактные данные в форме:

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

div id = «form» >
p > a style = «text-decoration: none; border-bottom: 1px dotted; cursor: pointer;» id = «forma0» > Заказать звонок / a > / p >

div id = «forma1» style = «display:none; background-color: #fff;» >
script src = «sendmailforms/jquery.maskedinput-1.2.2.min.js» type = «text/javascript» > / script >
link rel = «stylesheet» type = «text/css» href = «sendmailforms/form.css» / >
script src = «sendmailforms/wait_for_call.js» type = «text/javascript» > / script >
script src = «sendmailforms/ajaxupload.js» type = «text/javascript» > / script >
script src = «sendmailforms/upload_file.js» type = «text/javascript» > / script >
div class = «call-me-form» title = «Заказать звонок» button = «Заказать звонок» style = «width: 200px» > / div >
/ div >
script >
$(«#forma0»).toggle(function() <
$(«#forma1»).slideDown(«slow»);
>, function() <
$(«#forma1»).slideUp(«slow»);
>);
/ script >
/ div >

Расшифровываю: в скрытом div-блоке подгружается скрипт и все что с ним связано, этот блок при помощи JavaScript открывается и все — можно оставлять свои данные. Преимущество такого подхода — пользователю не нужно ждать, пока там что-то подгрузится еще.

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

Приведу содержимое конфиг-файла

Все! Больше ничего нет, остальное (стили) — вручную. Но они и так везде вручную. При этом форма использует Ajax, выводит сообщения об ошибке, а еще можно задать свою собственную маску номеров. Вот скриншоты:

После отправки номера, пользователю увидит ваше сообщение, которое также можно задать.

Скачать форму можно по ссылке, либо с этого блога.

Это проверенное решение, которым я вполне доволен. Я нашел в этом скрипте для себя несколько преимуществ:

1. Он присылает URL страницы, с которой была отправлена заявка через форму.

2. На одной странице может быть несколько таких форм обратной связи и они никак не будут конфликтовать друг с другом.

3. Форма подгружается не PHP-кодом, а div-блоком — это упрощает ее вставку в любое место сайта на порядок. Можно даже в тексте вставлять, если умеете.

И он тоже позволяет загружать файл, то есть ничем не уступает.

Ну а про онлайн конструкторы и навороченные генераторы скриптов обратной связи — как-нибудь в другой раз. Может заодно еще и формы для WordPress обсудим. Посмотрим.

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

Источник

Какой вид сервиса обратной связи выбрать для своего сайта

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

Онлайн-звонок

Zingaya – сервис онлайн-звонков с сайта, где клиент звонит не со своего телефона, а со своего компьютера. По клику открывается окно, где достаточно разрешить доступ к микрофону и звонок пойдет на телефон менеджеров. Zingaya уже давно на рынке, в свое время о них писали на TechCrunch и еще ряде международных крупных изданий. Технология давно себя зарекомендовала и сейчас стоит на сайте таких крупных игроков e-commerce как Enter.ru и Wildberries.ru.

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

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

Онлайн-консультант

JivoSite, LiveTex, RedHelper, WebConsult, SmartSupp, Webim и еще ряд мелких и крупных игроков, работающих по одному принципу (всплывающее окно, где общение с клиентом проходит посредством текстовых сообщений), но сильно различающихся между собой дополнительными функциями. В одном из виджетов JivoSite, к примеру, указано, что заявки придут на почту, правда не указано, как ответят клиенту и когда. У LiveTex общение происходит сразу в открывшемся окне, правда с анонимом:

Как и Zingaya, онлайн-консультанты на рынке уже не первый год и успели зарекомендовать себя с положительной стороны. Касательно цен присутствует определенный разброс в зависимости от политики компании, но в среднем плата осуществляется за каждого отдельного оператора. Цена за одного оператора в месяц – от 800 до 2500 рублей.

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

Минусы: Встречается привязка к компьютеру (чтобы общаться с клиентом, менеджер должен быть у компьютера), плата за каждого оператора (если операторов 5-6, то цена может составлять в месяц до 10 000 рублей).

Самописные формы заказа обратного звонка и онлайн-чаты на Jabber

Представляют собой самописные виджеты, каждый из которых выглядит по-своему, и, соответственно, работает так же. Как правило, такие виджеты идут в комплекте с самим сайтом и делает в качестве бонуса/за дополнительную плату/заранее обговорив та же студия, что и сайт. Исходя из этого, форма брендирована. Наиболее распространена практика писать такие виджеты на Jabber. Сюда же можно отнести и формы на основе готовых решений, к примеру, LiveZilla позволяет создать чат для своего сайта или тот же самый ChatFocus.

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

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

Callback-виджеты

Rocket Callback, Callback Hunter и многие другие. Тысячи их. Представляют собой всплывающее окно с 1 полем для ввода номера телефона. От Zingaya отличается тем, что общение происходит по телефону, а не через компьютер, хотя используется тот же самый VoIP. Различаются между собой дополнительными функциями — у Perezvoni это мультивиджет, у Rocket Callback настройка навязчивости, у RedConnect совместный браузер и так далее. По цене сильный разброс, но самая низкая цена у Rocket Callback (около 6 рублей за минуту), самая высокая у Callback Hunter (около 60 рублей за минуту).

Плюсы: Нет привязки к компьютеру, цена не зависит от количества операторов, настройка навязчивости и внешнего вида виджета, моментальная связь (от 20 секунд).

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

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

Спасибо, что читаете нас!
Подписывайтесь на наш блог.

Источник

Правильное оформление форм на сайте

Правильно составленная форма оформления заказа поможет не спугнуть посетителя на завершающем этапе конверсии.

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

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

Во-первых, используйте подсказки. Банальное «Иванов Иван Иванович» в поле для ввода ФИО подсказывает пользователю о том, что необходимо прописывать инициалы полностью, избегая формулировок вроде «Иванов И.И.». Поля ввода номера телефона обязательно должны иметь маску.

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

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

Это натуральное издевательство над своими клиентами и, по совместительству, лучший способ их отпугнуть.

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

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

Например, первый этап — общая информация о заказчике (ФИО, номер телефона и так далее), второй — адрес доставки, третий — выбор способа оплаты и четвёртый — проверка информации и подтверждение сделки.

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

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

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

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

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

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

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

Источник

3 способа. Как сделать форму обратной связи на html?

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

Способ №1. Форма обратной связи html + php.

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

Для данной формы вам потребуется:

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

Далее давай те напишем HTML код формы

Ну и конечно же файл CSS, что-бы все облагородить)

Вот, что получилось в итоге.

Способ №2. Сервис для формы обратной связи.

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

Для данного способа вам понадобиться:

У Google и Яндекса есть отличные сервисы для создания различных форм, опросов и всего подобного. Вам остается настроить все, что вам нужно в визуальном редакторе, получить код и вставить на нужной странице. Собственно все, можно настроить уведомления на почту или просматривать результаты в ручную.

Я собрал вот такую форму на сервисе Яндекса.

Куча различных виджетов уже готовы и доступны для вас
Уведомления на почту

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

Способ №3. Ссылка для отправки email.

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

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

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

Источник