Создание формы обратной связи
Сейчас на каждом сайте можно встретить форму обратной связи, будь то коммерческий или информационный сайт. К сожалению, большинство владельцев сайтов делают формы неудобными для заполнения или показывают их слишком навязчиво, портя впечатление о компании в целом. Давайте разберемся, где и как правильно запрашивать данные пользователя, чтобы было легко взаимодействовать с сайтом.
Основные виды форм для сайтаРассмотрим особенности каждого вида, чтобы вы смогли выбрать подходящие для вашего сайта или использовать список как чек-лист, чтобы не забыть разместить их все.
Рекомендуем всем коммерческим сайтам использовать данную форму. Идеальное место размещения - шапка сайта, рядом с номером телефона. Причем не стоит показывать поля ввода сразу, лучше их скрыть под кнопкой «Заказать звонок» и выводить после клика. Не обязательно делать кнопку яркой, в виде ссылки она будет так же хорошо заметна:
В развернутой версии достаточно двух полей «Телефон» и «Имя» и где обязательно для заполнения только первое:
Можно оставить только одно поле для ввода телефона, тоже вполне рабочий вариант, хотя придется у каждого клиента при звонке сначала спрашивать имя:
Также форма обратного звонка пригодится в подвале сайта, разместите ее рядом с контактной информацией. Так после просмотра страницы клиентам не придется возвращаться в начало.
«Форма-спасатель» для тех пользователей вашего сайта, которые не смогли найти нужную информацию на странице, но хотят сделать заказ. Лучше размещать в одном из двух вариантов: либо в свернутом виде в правом нижнем углу экрана, либо в развернутом - внизу на Главной и на страницах каталога товаров или услуг.
Первый вариант размещения (пример с сайта Танго и Кэш):
Второй вариант размещения (пример с сайта Okna-dpa):
Данную форму часто заменяют онлайн-консультантом, что в принципе одно и то же, но нужно понимать, что понадобится сотрудник, который будет ее поддерживать.
Ещё данную форму стоит разместить на странице контактов. Обязательно добавьте поле для комментария, чтобы пользователи могли рассказать, по какому вопросу они обращаются в компанию.
Форма обратной связи на странице контактов YouDesign:
Очевидно, что форму нужно размещать на странице услуги, лучше всего в конце страницы, после описания работ, результатов и цен, чтобы как бы направить пользователя к оформлению заявки после ознакомления с информацией. Выводить поля формы можно сразу, разворачивать после клика по кнопке или перенаправлять в личный кабинет на соответствующую страницу.
Часто на страницах услуг размещают форму заказа обратного звонка или консультации, что не совсем правильно. Клиент уже выбрал страницу услуги, возможно даже тариф, а ему показывается общая форма, где нет выбранной информации. Это дезориентирует. Рекомендуем указывать следующие поля:
- «Вид услуги» или «Тариф» - данное поле лучше заполнять автоматически или разместить в виде текста в начале формы
- «Имя»
- «Телефон» - сделайте поле обязательным для заполнения
- «Email» - чтобы продублировать информацию о заказе клиенту
- «Комментарий» - возможно, у клиента есть уточнения
Каждый бизнес индивидуален и вам могут понадобиться дополнительные параметры, но рекомендуем размещать не более 5-7 полей, чтобы не отталкивать клиента. Если все-таки большого количества полей не избежать, то визуально группируйте их по тематикам, чтобы сократить количество ошибок при вводе информации. Пример простой формы заказа на сайте компании Строя:
Такую форму лучше показывать пользователю на странице корзины, когда он определился с выбором товаров. Если у вас на сайте есть личный кабинет, то придётся проработать две формы: для авторизованных и неавторизованных пользователей.
Для новых клиентов. Не заставляйте их регистрироваться, чтобы возвратиться к заказу. Так вы только оттолкнете их. Достаточно добавить несколько полей с контактной информацией. Спросите имя, телефон, email и адрес доставки. Так пользователю не придётся совершать лишние действия, а вы получите нового клиента. По email можно сделать автоматическую регистрацию и выслать клиенту пароль на почту.
Пример размещения полей в форме для новых пользователей на Ozon:
Для старых клиентов. Те, кто заказывают повторно, уже указали всю контактную информацию, поэтому в форме помимо списка товаров должны быть только пункты выбора доставки и оплаты. И если вы используете промокоды, то добавьте поле для их ввода, но не более. Не нужно заново просить контакты клиента.
Форма заказа на Wildberries, где даже выводится прошлый выбор способа доставки и оплаты (но оставляют возможность их изменить):
Многие разбивают ввод адреса доставки на несколько полей, отдельно запрашивая индекс, название города, улицы, номер дома и т.д., что выглядит очень громоздко. Антипример с сайта Ангорочка:
Пользователи даже в таких формах допускают ошибки, поэтому лучше оставить одно общее поле ввода адреса и уточнять корректность данных у новых клиентов по телефону.
Обязательными полями для ввода следует сделать контактные данные, адрес доставки, выбор способа доставки и оплаты. Форму можно выводит поэтапно, но и не возбраняется показать все поля сразу. Главное, визуально разделите их на смысловые группы.
Рекомендуем отделять ее от формы авторизации, потому что многих новых клиентов дезориентирует кнопка «Войти». Две ссылки рядом не будут занимать много места и сократят время поиска. Также форма всегда должна быть заметна, поэтому лучше разметить ее в шапке сайта. Самый привычный вариант - в верхнем правом углу в виде ссылки (пример от Аква-Вива):
В целом форма должна содержать те же поля, что и форма заказа (и обязательные поля для ввода такие же), поэтому советуем не перегружать ее лишними пунктами и для адреса оформить общее поле. Помните, что регистрация это дополнительные действия для клиента, поэтому не отталкивайте его длинным списком. Можно спросить дату рождения, чтобы отправлять поздравления и скидки, но заставлять клиента придумывать никнейм или указывать дополнительный телефон или адрес - лишнее.
Шикарная практика предлагать клиентам зарегистрироваться через соцсети. Так клиенту не придется придумывать пароль и в целом регистрация пройдет быстрее. Пример использования такой возможности на сайте Asos:
Данный интернет-магазин зарубежный, поэтому приведены популярные соцсети тех стран, для русскоязычной аудитории лучше убрать Twitter и добавить кнопки для Вконтакте, Одноклассников.
Личный кабинет лучше всего подойдет интернет-магазинам для хранения контактных данных клиента, истории заказов, информации о скидках и бонусах. Также подойдет сервисам, работающим по подписке, например, если вы предоставляете доступ к просмотру фильмов в оригинале.
В то же время, если вы продаете промышленные товары, когда каждый заказ сопровождается звонком специалиста, то тогда ни в корзине, ни в форме регистрации смысла нет. Сайтам, предоставляющим услуги, например, по дизайну или ремонту квартир тоже чаще всего не нужен личный кабинет.
Восстановление пароля привычнее всего делать по адресу почты, отправляя клиенту ссылку на форму ввода нового пароля. Генерирование автоматического «временного» пароля заставляет пользователя самому искать форму смены пароля, что неудобно и только лишние заморочки для клиента. Такого лучше не допускать.
Мы уже не раз писали о пользе email-маркетинга и давали советы по его развитию, например, в данной статье и ее второй части наиболее подробная информация. Поэтому форма подписки мастхэв, если вы хотите использовать данный канал привлечения клиентов.
Разместить форму следует на Главной странице, чтобы пользователь сразу увидел, что есть такая возможность. Лучше после всей основной информации, внизу страницы (пример от Lavkalavka):
Если на сайте есть блог, и в письмах, помимо товаров и услуг, вы анонсируете новые статьи, то тогда можно добавить форму на общей странице раздела, например, справа от статей, как это сделало у Vkusnosti by Mado:
В форме подписки, конечно же, нужно поле «Email», и еще можно спросить имя, чтобы сделать письма более персонализированными.
Теперь когда мы определились, какие формы и где нужно разместить на сайте, выясним как сделать их более удобными для заполнения.
Удобный вариант расположения подписей и подсказок (на сайте Xarakiri.ru):
К каждой форме следует подходить индивидуально, поэтому невозможно описать все случаи в одной статье. Главный принцип, которым следует руководствоваться - минимум полей. Лучше позвонить клиенту и уточнить детали устно, чем заставлять его заполнять длинные формы. Возможно у клиента возникли какие-то дополнительные вопросы, тогда звонком вы решите две проблемы.
Надеемся, что наши рекомендации помогут вам сделать на сайте удобные формы и собирать больше заказов. Для тех, кто хочет персональный анализ юзабилити форм, рекомендуем воспользоваться данной услугой .
P.S. Если вам нужна информация о том, как создавать формы (техническая сторона вопроса), нужны рекомендации по коду, удобным конструкторам и т.д., тогда пишите вопросы в комментариях, сделаем по этой теме отдельную статью.
Даже если у вас полноценный интернет-магазин, с корзиной покупок и возможностью оплатить покупку прямо на сайте, не стоит отказываться от дополнительной функции - кнопки «купить в один клик».
Пользователю весьма лениво проходить всю процедуру регистрации, авторизации и прочего, чего потребует от него Ваш сайт. К тому же, если это разовая покупка, и в обозримом будущем больше не планируется покупать товары данной категории.
Ему гораздо легче заполнить несколько полей формы и, тем самым, оформить заказ.
Это незначительно дополнение поднимет продажи на Вашем сайте на 20-50%.
Сайтам каталожного типаНа таких сайтах не предусмотрена система заказа или покупки товара/услуги. Продажи осуществляются посредством телефонного разговора. Покупатель объясняет, что он хочет купить и в каком количестве, диктует свои контактные данные, адрес доставки и т.д. Все это ведет к существенным временным затратам менеджеров компании, а как следствие - повышению себестоимости продукции и уменьшению прибыли.
Но, Вы можете установить форму заказа товара. В таком случае, скорость обработки заказов значительно повысится. Более того, у вас увеличатся и продажи! Т.к. покупателю нет необходимости пытаться дозвониться до Вас. Он просто заполнят форму и ожидает звонка от Вашего менеджера.
Для одностраничных сайтов / Landing pageНу, собственно говоря, без формы заказа товара эти сайты вообще теряют смысл.
Но не менее важным моментом является скорость реагирования на заявку. Нужно быстро обработать горячего клиента. Вам в помощь - SMS информирование!
Особенности использования форм для заказаПо сути, формы для заказа не отличаются от других форм, которые Вы создаете в Конструкторе форм .
Что бы не создавать для каждого товара свою форму, одному или нескольким полям можно задать значения непосредственно при вызове формы. Подробно это описано в разделе Установка > Присваивание значений полям , эта же статья ознакомительная, показывает только возможные варианты форм для Вашего сайта.
1-й вариант формы заказа товара |
Простая форма заказа товара.
Запрашивается минимум необходимой информации, которой достаточно продавцу. |
2-й вариант формы заказа товара |
Расширенная форма заказа товара.
Покупают предоставляется возможность выбрать способ доставки. В случае самовывоза - покупатель может выбрать наиближайший к нему пункт выдачи. Пример вызова всплывающей формы: Купить iPhone Купить Samsung |
Прибыльность любого интернет-магазина в первую очередь зависит, насколько комфортные условия созданы на сайте. Любой покупатель хочет как можно быстрее найти то, что они ищет и при этом затратить минимум своих усилий. По статистике большинство клиентов не любят процесс оформления заказа . Именно поэтому, если вы хотите увеличить количество продаж, необходимо упростить систему оформления заказов у себя на сайте.
В интернет-магазинах чтобы купить товар, клиент должен заполнить форму заказа , которая устанавливается на сайт с помощью специальных скриптов, модулей или плагинов. При создании формы заказов придерживайтесь следующих правил.
1. Простота — залог эффективности.
Как показывает практика, если покупатель столкнётся с какой-нибудь проблемой при оформлении заказа, он чаще всего покидает ресурс, опасаясь столкнуться с этой проблемой снова. Если ваша форма заказа содержит несколько простых этапов и заполнение не занимает особого труда, вам гарантированы стабильные продажи. Стоит отметить, что с простотой, главное, не переборщить, всегда учитывайте специфику вашего проекта. Форма заказа на сайте должна собирать минимально необходимую информацию для осуществления заказа.
2. Используйте наглядные примеры.
Человеку всегда нужен наглядный пример, тем более при заполнении формы заказа . Старайтесь создать такую веб-форму, которую сможет заполнить даже полный «чайник».
3. Всего показывайте ход оформления заказа вашему клиенту.
Клиент должен всегда видеть сколько этапов он прошел и сколько ещё предстоит пройти. имеет особое значение с точки зрения психологии. Классическая схема оформления заказа проходит в 3-4 этапа. Первый этап — пользователь составляет список заказа. Второй этап — покупатель вносит свои контактные данные. Третий этап — проверка информации. Четвертый этап — сделка.
4. Развейте все сомнения клиентов.
В нашей стране совсем недавно стал действовать закон о защите персональных данных, но многие пользователи не знают об этом. В html форме заказа обязательно укажите пометку о неразглашении личной информации. Это существенно повысит доверие ваших клиентов.
5. Нет! регистрациям.
Практически все покупатели плохо относятся к любой регистрации, в связи с тем, что этот процесс может занять много времени (по их мнению). Поэтому даже если у вас на сайте регистрация осуществляется без подтверждения профиля, удалите её или сделайте процесс оформления заказа доступным для незарегистрированных пользователей. Стоит отметить, что в некоторых случаях регистрация, напротив, необходима. Например, когда вы намерены создать качественную базу клиентов. В этом случае, сделайте регистрацию на сайте через социальные сети. Это очень просто.
Все вышеперечисленные правила и советы, несомненно, повышают эффективность формы заказа на сайте , но всегда нужно помнить о том, что многое зависит от особенностей тематики. Только методом проб и ошибок можно действительно повысить конверсию сайта.
Вся установка и настройка производится буквально в пять шагов:
1. скачать архив;
2. распаковать два файла скрипта и отредактировать их в соответствии с данной инструкцией;
3. добавить в код Вашего сайта строку подключения скрипта и настроить вызов формы;
4. разместить скрипт на Вашем сервере;
5. проверить работу формы на Вашем сайте.
Теперь все это подробнее.
По ссылке на сайте скачиваете архив с последней версией скрипта. В архиве находятся два файла:
- файл takeorder.php
(помещаете в корневой папке сайта);
- файл takeorder.js
(помещаете в папку, где находятся все ява скрипты вашего сайта. Обычно это папка js).
Прежде всего нам необходимо, чтобы сообщения приходили на заданные e-mail адреса. Для этого открываем файл takeorder.php в редакторе кода и вносим исправления в следующие строки.
// емайл администратора
define
("EMAIL1
","[email protected]
");
// емайл аутсорсинга
define
("EMAIL2
","[email protected]
");
// header - подпись, от кого письмо
define
("HEADER
","Иванов Иван
");
// subject
define
("SUBJECT
","Новый заказ наложенным платежом. Иванов Иван
");
Вместо [email protected]
необходимо указать свои адреса. Если оставить значение по умолчанию, [email protected]
, то письма не высылаются.
В сообщении, приходящем на адрес администратора, кроме информации от клиента дополнительно указан url, с которого был осуществлен переход на страницу заказа. Это особенно удобно при использовании UTM-меток.
Исправляем тему сообщения. Подпись - от кого пришло письмо.
Заказываемый товар указывается в виде массива. Это может быть разный товар продаваемый с одной страницы сайта или разные варианты одного товара, разные цены, комплектация... Индекс массива используется при привязке кнопки вызова формы товара. Указывается цена, наименование товара.
// список товара в формате массива:
$tovar
= array
("1990
","Часы Clock
");
$tovar
= array
("2990
","Часы Clock 2
");
Сохраняем изменения.
Открываем файл takeorder.js . Здесь переменные minName , minPhone и minMail устанавливают минимальное количество знаков для полей с именем клиента, его телефоном и адресом соответственно. Значение 0 отменяет проверку. yandexKod и yandexCel - это номер счетчика и название цели для Яндекс.Метрики. Переменные topF и leftF задают отступ формы от верхнего левого угла экрана. Остальные поля - это все надписи на форме. При желании их можно поменять на свои.
Подключение скрипта.Для работы используется библиотека jQuery. Проверьте: возможно, она уже подключена на Вашем сайте. Сделать это легко. Открываете нужную страницу сайта в редакторе кода и ищите там вот такую строку:
Ключевым здесь является подчеркнутый фрагмент. Путь к библиотеке и версия могут отличаться.
Если библиотека не подключена, добавьте вышеуказанную строку в код. Я рекомендую подключать скрипт в самом низу html кода.
Сразу после библиотеки jQuery подключаете сам скрипт. Для этого вставьте всего одну строку:
Убедитесь, что путь к скрипту (в примере подчеркнуто) указан верно.
Всё, скрипт подключен. Правда, просто?
Осталось привязать вызов формы заказа к кнопке «ЗАКАЗАТЬ» на Вашем сайте. Для этого находим в коде на сайте кнопку или ссылку, при клике по которой должна вызываться форма заказа. Необходимо присвоить этим элементам класс takeOrder
.
Также надо указать какой именно товар будет заказываться при нажатии на эту кнопку. Для этого добавляется атрибут data-to
со значением равным индексу ячейки массива с нужным товаром
И для кнопки. Если элементу уже присвоен класс, то добавляем новый через пробел.
Поздравляю! Скрипт установлен, и вызов формы привязан. Можно перезагрузить страницу и проверить.
P.S. Маленький секрет.) Если кнопке или ссылке вызывающей форму добавить атрибут data-off="2" , то форма будет выводиться только с одним полем, первым. Чтоб форма принимала два значения надо отключить вывод последнего поля. Для этого установите data-off="1" . То есть при необходимости можно вызывать форму с разным количеством полей настроив по разному ссылки или кнопки вызова.