Сервис popup. Всплывающая форма обратной связи. Как скачать форму обратной связи
Есть много способов для того, чтобы создать всплывающее окно на своем сайте. Есть сложные способы, а есть простые. Сложные заключаются в том, что для того, чтобы ими воспользоваться нужно знать программирование, а простые - это использование сторонних сервисов.
Сложные способы
- При помощи javascript
В программировании основным средством для создания всплывающего окна является javascript.
- При помощи CSS
Этот вариант подходит только для самых новых браузеров, в остальных данная функция работать скорее всего не будет.
Но в данной статье я рассмотрю именно простые способы, так как их можно реализовать без знаний программирования, поэтому их сможет внедрить на свой сайт каждый желающий.
Простые способы
Представляю вашему вниманию подборку лучших сервисов по созданию всплывающих окон - pop-up. А что значит лучшие? Лучшие - это значит идеальное сочетание цены и качества, а еще возможность протестировать сервисы бесплатно. В российском сегменте таких сервисов не так уж много, зато наши зарубежные коллеги могут похвастаться их большим разнообразием.
Используя эти сервисы, можно научиться перенаправлять интернет-трафик с одного ресурса на другой.
- Hello Bar
Установка по шагам
Пройдите регистрацию на сайте hellobar.com;
Вам предлагается вставить код в шаблон своего сайта, также можно установить плагин, если у вас сайт работает на Wordpress;
Определитесь с задачей, которую вы хотите решить, используя всплывающее окно: сбор email, показ посадочной страницы, звонок в один клик, перенаправление через баннер в социальные сети;
Нужно вписать номер мобильного телефона и выбрать страну;
Подберите тип всплывающего окна pop-up: расположение баннера наверху, посередине или внизу сайта;
Задайте время, через которое окно будет показано (сразу, через 5, 10 или 60 секунд, после просмотра какого-то количества страниц сайта или, когда пользователь вовсе собрался покинуть сайт);
Вам остается только зайти в раздел «Manage», запустив там всплывающее окно. Также, чтобы изменить настройки, вам необходимо будет тоже перейти во вкладку «Manage». Для того, чтобы посмотреть статистику баннера — перейдите во вкладку «Stats».
Стоимость использования: платный тариф начинается от 15 долларов в месяц, при оплате за год - скидка 15 %. Существует бесплатная версия с ограниченным функционалом:
- GetSiteControl
Установка по шагам
Для начала зарегистрируйтесь на сайте GetSiteControl.com;
Получите код, скопируйте и вставьте в код шаблона на своем сайте перед закрывающим тегом body;
Проверьте правильность установки виджета на сайте, нажав на кнопку Refresh. Если добавленный код установлен корректно, то можно двигаться дальше;
Вы можете подобрать нужный вам виджет: опросник, форму для отправки email, показ нужной вам страницы, просьба подписаться на email-рассылку, кнопки социальных сетей, онлайн-чат;
Выбранный виджет нужно отредактировать (внешний вид и параметры отображения на сайте);
И последним шагом будет активация виджета.
Стоимость использования: от 10 долларов в месяц за подключение одного сайта. Оплатив сразу за год можно получить скидку 20 %. А еще есть бесплатный тариф с базовым функционалом, который поможет вам ознакомиться с сервисом.
- Witget
Установка по шагам
Зарегистрируйтесь на сайте Witget.com;
Необходимо добавить предложенный код шаблона сайта перед закрывающим тегом body;
Перейдя в галерею шаблонов, можно выбрать подходящий вам шаблон для всплывающего окна;
Придумайте свой уникальный продающий текст и вставьте его;
Подберите свою цветовую схему, параметры всплывающего окна (ширина, частота и условия показа баннера, место и время показа) и нажмите сохранить;
Теперь остается проверить отображение всплывающего окна на своем сайте. Для этого надо нажать кнопку «Показать на сайте». Вас все устраивает? Тогда активируйте его.
Стоимость использования: от 700 рублей в месяц за базовый тариф, можно подключить два сайта. Расширенные возможности есть, начиная с тарифа Advanced. Можно бесплатно попробовать сервис, подключив тестовый период - семь дней.
- Popups
- WordPress PopUp
- Scroll Triggered Boxes
- WordPress Notification Bar
- WP Popup Plugin - Lightbox Popup
- PopupAlly
- YITH Newsletter Popup
Используя всплывающие окна, показывайте на них информацию, которая связана с вашим сайтом. Pop-up эффективен, если он соответствует вашему контенту. Создавая попап, тщательно подберите изображение и текст - чем качественнее копирайтинг и графика, тем выше эффективность баннера.
При подключении попап-окна, учитывайте разрешения экранов устройств ваших посетителей, рассчитывайте на золотой стандарт - 1024*768.
Правильно используя всплывающие окна, можно получить впечатляющий результат, например, увеличение подписной email-базы. Также данный формат помогает продавать информационные продукты, такие как электронные книги и видеокурсы.
1) Pop-up должен быть оптимального размера: не слишком большим и не слишком маленьким;
2) Дозируйте показы
Ограничьте показ pop-up одному и тому же человеку при повторном посещении сайта. Если вы видите, что он закрыл окно, то покажите всплывающее окно через пару недель, когда он забудет уже о нем.
3) Не спешите
Появление pop-up сразу после захода на сайт - это плохо. Настройте его появление через какое-то время или после совершения действий на вашем сайте.
4) Должна быть кнопка «Закрыть» в виде привычного крестика
Посетитель вашего сайта имеет право закрыть ваш pop-up, если у него нет желания его видеть или совершать действия, о которых вы его просите в нем. Желание закрыть окно не должно отнимать много времени и должно быть привычным способом.
5) Понятный призыв к действию
Большая ошибка - перегрузка всплывающего окна информацией. Одна задача - один призыв к действию. Например, если вы хотите увеличить число подписчиков на Фейсбук, то делайте pop-up таким, чтобы он понятно объяснял, что вы предлагаете посетителю вашего сайта подписаться на страницу в Фейсбук.
Всплывающее окно сегодня — это уже обязательный элемент любого сайта. Важно, чтобы он не раздражал и приносил ощутимую пользу для сбора необходимой информации. В сегодняшнем выпуске рассылки речь пойдет о том, как и для чего использовать всплывающее Pop-Up-окно.
Принцип действияPop-Up-окно, как правило, применяется для резкого перемещения внимания посетителя с основной массы контента на конкретный элемент — всплывающее окно. Это всегда эффект неожиданности, как резкий поворот сюжета, когда «расширяются зрачки». Также можно сравнить с приемами привлечения внимания в ходе презентации (паузы в речи, движения руками, использование ярких предметов и изображений).
В интернет-маркетинге всплывающие окна чаще всего используются, когда понятно, что пользователь заинтересовался: он проскроллил несколько экранов вниз или страница открыта определенное количество времени, но посетитель ничего не предпринимает. Как его «разбудить?»
Примеры Pop-Up-оконИтак, перейдем к реализованным всплывающим окнам на сайтах. Если вы зайдете на ресурс проекта «Нетология» и примерно 1 минуту не будете ничего предпринимать, слева появится яркое окно с формой.
В интернет-магазине lacoste.ru после некоторого ожидания появляется всплывающее окно-оверлей с предложением подписаться на рассылку, которое заслоняет другой контент. Lacoste ставит целью собрать e-mail клиентов. Одновременно возникает онлайн-консультант, что не очень удобно и рассеивает внимание посетителя.
На сайте sapato.ru при каждом клике появляется оверлей для выбора города пользователя. После того как город выбран, окно не всплывает. Это помогает больше узнать о посетителях и в результате предлагать им специальные акции, направленные на конкретный регион.
Интернет-магазин Bonprix.ua предлагает подписаться на рассылку, за что дает скидку на первую покупку. Обратите внимание на призыв «Введите адрес электронной почты», который исчезает только с началом ввода текста в поле.
Lacywear.ru предлагает за подписку 400 руб. на счет мобильного, что тоже неплохая мотивация.
Reebok.ru использует этот прием для привлечения пользователей с помощью скидки. Клик ведет в раздел аксессуаров. Как мы помним, это самые в каждом интернет-магазине. Обратите внимание, что на таком окне есть кнопка «Получить скидку». Не забывайте о призыве к действию, если вы преследуете эту цель.
Всплывающее окно, возникающее во время прокрутки страницы, применено на books.ru. Здесь это уведомление о новинке в книжном ассортименте. Можно четко проследить, на каком моменте прокрутки появляется окно. Также есть всплывающие окна, которые появляются при попытке закрыть страницу. Они либо предлагают посмотреть другие разделы сайта, либо связаться с менеджером.
- Всплывающее окно должно резко отличаться по цвету от фона. В погоне за тем, чтобы оно выглядело естественно и в общей цветовой гамме, можно наткнуться на проблемы с юзабилити. Тем не менее, оттенки не должны отталкивать.
- Подберите слова для вашего предложения. Далеко не всем интересно оставить вам почту и получать скучные новости компании. Если вы планируете слать письма на e-mail, это может быть «100 и 1 способ экономить деньги в супермаркете», «Как вчетвером прожить на 1000 рублей?». Понятно, писать надо о том, что связано с вашей деятельностью.
- Пишите кратко. Изучение всплывающего окна не должно занимать много времени.
- Всплывающее окно, показанное с первых же секунд пребывания посетителя на сайте, это определенный риск того, что он уйдет. Либо же пользователь должен четко понимать, почему от него что-то требуется с первых же мгновений «знакомства».
- Несколько окон в разных частях одного экрана — не лучшая идея. Как и сменяющие друг друга. Это раздражает и рассредотачивает внимание. Определитесь, ради какой цели вы показываете своему посетителю окно.
- Тестируйте разные варианты и вы найдете идеальный вариант демонстрации.
- Не обещайте того, чего не сможете выполнить. Если ради дешевого трюка вы заслонили важный контент, пользователь уйдет.
- Если ваша аудитория уже сегментирована, выбирайте, кому и какое окно показывать, чтобы повысить эффективность.
- Позвольте посетителю отказаться от заполнения формы или клика по предложению. Дайте ему право закрыть окошко понятным крестиком в правом верхнем углу.
- Если пользователь один раз уже закрыл окно, не стоит показывать его еще раз. Нет так нет.
- Всплывающее окно может содержать предложение заказать обратный звонок для консультации или заказа.
Для получения всплывающего окна понадобится скрипт. Его можно заказать либо использовать многочисленные готовые решения из Сети и обучающие материалы.
Статья, в которой рассмотрим, как на сайт установить всплывающую форму обратной связи с капчей и возможностью прикрепления к ней файлов.
Данная форма - это проект с исходным кодом, который расположен на GitHub по адресу: https://github.com/itchief/feedback-form-in-modal .
Предыдущие исходные коды проекта, который был выполнен на Bootstrap 3, можно скачать с GitHub по этой ссылке .
Характеристики формы обратной связиПредставленная форма выполнена с использованием комопнентов Bootstrap 4 и jQuery. Серверный код фомы написан на PHP.
Другие характеристики формы:
- открытый исходный код, проект доступен на GitHub;
- отправка данных формы на сервер и получение ответа осуществляется без перезагрузки страницы, т.е. посредством технологии AJAX;
- наличие графической капчи (для защиты от спама);
- возможность прикрепления к ней файлов (по умолчанию до 5);
- проверка данных формы (валидация) организована как на клиенте, так и на сервере;
- отправка данных формы после успешной валидации на почту менеджера (администратора), и письма о доставке клиенту;
- при отправке письма, файлы можно как прикрепить, так и отправить с помощью ссылок;
- логирование отправки (данные сохраняются в файл message.txt).
Основные действия по подключению формы обратной связи.
Открыть форму в модальном окне
2. Создать модальное окно и поместить в него HTML код формы обратной связи.
Форма обратной связи
×
Имя
Email-адрес
Сообщение (не менее 20 символов)
При необходимости прикрепите к сообщению изображения (до ):
максимальный размер одного изобржения 512 Кбайт
Выбреите файл...
3. Подключить стили и скрипты используемых компонентов (jQuery, Bootstrap) и самой формы (main.css , main.js):
Как скачать форму обратной связи
Загрузить форму можно с GitHub. Перейти на страницу проекта можно с помощью следующей кнопки.
У меня в свое время, когда я только начинал вести свой блог, а так же интернет-магазин, помню была проблема - как сделать красивые всплывающие окна на сайт, с помощью которых информировать посетителей о тех или иных акциях либо, если это касается блога, обеспечить сбор email адресов подписчиков на разного рода обучающие материалы. Не даром многие инфо-бизнесмены, да и вообще, любой опытный блогер, скажет, что база подписчиков - это золотой актив! Это те самые люди, которые готовы слушать вас, покупать у вас и делать это вновь, и вновь. Конечно, если ваши материалы того заслуживают.
Так о чем это я?! А о том, как этот самый золотой актив собрать! И одним из лучших способов являются грамотные и качественные всплывающие формы подписки на вашем ресурсе. Способов применения всплывающих окон, на самом деле, просто куча! Несколько десятков уж точно можно придумать - это и информирование посетителей о наиболее интересных материалах на сайте, и анонсы новых статей, акций, конкурсов; туда же можно, при необходимости, внедрить рекламное предложение. Ну и конечно основной, как я уже отметил - это сбор контактов (email, номеров телефонов) вашей целевой аудитории для последующего взаимодействия с ней.
Об одном , на мой взгляд, из лучших и очень удобных плагинов всплывающих окон я сегодня вам и расскажу . Сам пользуюсь уже очень давно, однако идея написать об этом статью пришла только сейчас. Итак, сегодня под прицелом продукт компании MakeDreamProfits - .
На самом деле писать о том, какие сегодня плагин имеет возможности не самое благодарное дело, так как к нему постоянно выходят какие-то обновления , дополнения, в связи с чем я рискую осветить его весьма однобоко, спустя 2-3 месяца после выхода данной статьи. Тем не менее, на ключевых особенностях остановимся:
- 11 готовых красивых дизайнов всплывающих окон, которые можно редактировать
- удобный личный кабинет , в котором вы производите все настройки и затем вставляете на сайт готовый код
- интеграция с любыми сервисами почтовых рассылок либо режим отправки полученных данных на ваш email
- сплит-тестирование набора popup"ов (кстати, popup - это всплывающее окно, кто не знает)
- 3 вида всплывающих окон:
- с формой ввода данных
- да/нет
- переход по ссылке
- статистика открываемости и конверсий (ввода данных либо переход по ссылке)
- возможность созлания группы popup"о в, разбитых по времени первого посещения сайта либо подписки на рассылку
- настройка режима и правил показа всплывающих окон
- возможность встроить в окно
Это я перечислил лишь основное, на самом деле функционал JumpOut еще шире!
Гибкая настройка правил появления плагина:
- при уходе посетителя с сайта
- при нажатии на элемент
- через определенное время
- при прокрутке страница
- и ряд других
Кроме того можно настроить на разных страница сайта разные плагины -
Лично я использую данный плагин всплывающих окон с формами подписки на всех своих сайтах . Это реально очень удобный инструмент взаимодействия с аудиторией ресурса. Как показывают мои тесты, эффективность конверсий всплывающих окон почти такая же как на стандартных формах подписки на одностраничных лендингах. Что еще более классно, функционал плагина позволяет отслеживать эту эффективность до мелочей - сами посмотрите пару скриншотов ниже -
Как видите на скриншоте конверсий Яндекс-Метрики за последний месяц, 3,76 % пользователей или 207 в абсолютном выражении стали моими подписчиками именно благодаря вовремя появившемуся всплывающему окошку с предложением получить мои материалы!
Во время перечисления возможностей сервиса я уже отметил возможность интеграции с любыми почтовыми рассылками -
Оценить и опробовать все возможности плагина всплывающих форм подписки и всплывающих окон на вашем сайте можно совершенно бесплатно в течение 15 дней, после чего единожды оплатить нужную версию плагина - в зависимости от количества сайтов, на которых предполагается его использование - один, три или безлимит, а так же ряда дополнительных фич, например, возможности использования собственного css-кода.
P.S. : Есть опыт работы с плагинами всплывающих окон и форм подписки? Напишите об этом пару строк в комментах к статье внизу! И не забудьте поставить Like, если я помог вам с выбором плагина !
Инвестирование в проекты, освещаемые на этом блоге сопряжены с определенными рисками, вплоть до полной потери вложенных средств. Автор не несет ответственность за действия компаний/проектов, описанных на блоге. Материалы блога носят исключительно информационный характер и не призывают ни к каким действиям.
