Всплывающая форма обратной связи. Всплывающая форма обратной связи Сервис всплывающая формы

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

Сложные способы

• При помощи 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 таким, чтобы он понятно объяснял, что вы предлагаете посетителю вашего сайта подписаться на страницу в Фейсбук.

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

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

Более функциональными и интересными являются зарубежные сервисы по созданию и публикациям всплывающих окон.

Критериями, определяющими уровень и качество сервиса, являются:

• наличие бесплатной версии либо длительный тестовый период;
• многообразие триггеров;
• возможность внесения изменений в текст и дизайн.

Обзор сервисов

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

Hello Bar

Данный сервис предлагает как бесплатную версию с базовым функционалом, так и 2 более профессиональных тарифа за 15 и 99 $ в месяц соответственно.

Установка Hello Bar:

Необходимо зарегистрироваться на сайте hellobar.com, скопировать нужный код в шаблон сайта либо установить плагин (при работе с WordPress).

Также нужно будет выбрать задачу, решать которую будет данное всплывающее окошко. Это может быть стандартное объявление, звонок с сайта, сбор почтовых адресов и т.п.

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

Сервис Helllo Bar позволяет настроить таргетинг для каждого конкретного окна. Бесплатная версия не поддерживает эту функцию, только платные. Но бюджетный вариант предполагает настройку повторного показа окна, будет оно надоедать пользователю или нет.

После настройки всех функций нужно нажать Save & Publish, после чего во вкладке Manage запустить только что разработанный баннер.

Hello Bar имеет свои преимущества перед многими другими сервисами:

• адаптивный дизайн и простота настройки при многофункциональности;
• система позволяет провести интеграцию с зарубежными сервисами e-mail;
• возможно получение тарифа Pro бесплатно на 1 месяц при подключении к сервису друга, при этом распространяется возможность на обоих участников программы.

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

GetSiteControl

Также, как и в предыдущем варианте, есть бесплатная версия. При выборе платного тарифа предоставляется скидка 20% при оплате 12 месяцев сразу.

Установка сервиса:

1. После регистрации в сервисе необходимо скопировать предложенный системой код, нажав на кнопку Let"s install the code и поставить его перед тегом body.

2. Проверить правильность установки поможет кнопка Refresh. Если все было сделано верно, возле слова Installed появится зеленый индикатор.

3. Система предлагает выбрать виджет для установки окна, в какой форме оно будет представлено на странице:

• в форме опроса;
• отправки сообщений на электронные адреса;
• подписки на рассылку;
• кнопки для расшаривания;
• онлайн-чата.

4. Виджет можно отредактировать:

по внешнему виду;

• текст — программа предлагает несколько готовых шаблонов;
• по времени показов и таргетингу.

5. Нажать ОК после настройки всех функций и активировать виджет.

К преимуществам системы относятся:

• низкая стоимость;
• многообразие виджетов и шаблонов;
• отсутствие ограничения по входящему потоку посетителей;
• адаптивность виджетов;
• есть возможность добавить для подписки соц. сеть "ВКонтакте".

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

Серьезные профессиональные функции доступны только в платном тарифе. Это, пожалуй, единственный недостаток сервиса.

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

Mailmunch

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

Установка:

Выбор типа окна после регистрации, шаблона окна, дизайн формы.

Выбор цвета фона, кнопки и текста после ввода нужного текста.

Русифицирование текста.

Настройки таргетинга.

Условия показа — время, детали показа.

Кнопка Finish в конце установки. Готово.

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

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

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

Для установки сервиса понадобится стандартная процедура установки предложенного системой кода после нажатия на кнопку: Add new site.

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

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

После нажатия кнопки Save можно начинать работу и отслеживать статистику с помощью аналитических функций.

К преимуществам системы относится:

• наличие интересных виджетов;
• возможность замены текста и дизайна окна;
• функция скачивания собранных электронных адресов.

К недостаткам можно отнести:

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

AddThis

Данная система предлагает платный и бесплатный тарифы для работы.

Установка:

Выбор типа всплывающего окна.

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

Изменение дизайна и текста. Загрузка фонового изображения при желании пользователя.

Выбор расположения виджета.

Настройка таргетинга. Здесь очень много параметров настройки, аудитория получается более чем целевая.

Настройка времени и момента показа сообщения.

Завершение работы нажатием кнопки Save and activat.

Преимуществами системы являются:

• простой интерфейс;
• бесплатный тариф;
• точные настройки таргетинга;
• аналитические функции;
• возможность замены текста и дизайна.

К недостаткам можно отнести отсутствие многих функций в бесплатной версии программы.

Witget

Бесплатный период — 7 дней. Стоимость платного тарифа — около 1000 рублей в месяц, с предоставлением скидки при оплате вперед.

Установка:

К "плюсам" сервиса можно отнести:

• Стоимость.
• Русский язык интерфейса.
• Наличие основных русскоязычных сетей.
• Выбор шаблонов.
• Адаптивность дизайна.
• Статистические данные.
• Интеграция со многими сервисами рассылок.

Основным недостатком является короткий тестовый период. Picreel

Бесплатный период в 30 дней, безусловно, является преимуществом данного сервиса. При единовременной оплате за год система предоставляет скидку 25%.

Также к преимуществам сервиса относится:

Большое количество шаблонов.

Интеграция со всеми возможными сервисами и системами.

Точные настройки таргетинга.

Адаптивный дизайн.

Возможность делать аналитические отчеты по результатам работы.

Возможность проводить А/В-тесты.

Скидка за приглашение друга.

К недостаткам сервиса относят:

• высокую стоимость платного тарифа;
• отсутствие бесплатной версии.

Установка идентична способу установки других подобных ресурсов (описаны выше).

Optimonk

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

Регистрация, редактирование, смена текста и дизайна, таргетирование, выставление времени и других характеристик всплывающего окна — процедура установки стандартная.

Преимущества сервиса:

Очень точные настройки таргетинга.

Интеграция с CRM-системами и e-mail-сервисами.

11 вариантов готовых шаблонов.

Хорошая аналитика.

JumpOut

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

CartProtector

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

На что нужно обращать внимание?

Выбор сервиса для создания и установки всплывающих окон — достаточно субъективный момент. Большинство представленных сервисов обладают полным функционалом, необходимым для работы, разница лишь в стоимости.

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

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

С уважением, Настя Чехова

Всплывающее окно сегодня — это уже обязательный элемент любого сайта. Важно, чтобы он не раздражал и приносил ощутимую пользу для сбора необходимой информации. В сегодняшнем выпуске рассылки речь пойдет о том, как и для чего использовать всплывающее 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 рублей?». Понятно, писать надо о том, что связано с вашей деятельностью.
• Пишите кратко. Изучение всплывающего окна не должно занимать много времени.
• Всплывающее окно, показанное с первых же секунд пребывания посетителя на сайте, это определенный риск того, что он уйдет. Либо же пользователь должен четко понимать, почему от него что-то требуется с первых же мгновений «знакомства».
• Несколько окон в разных частях одного экрана — не лучшая идея. Как и сменяющие друг друга. Это раздражает и рассредотачивает внимание. Определитесь, ради какой цели вы показываете своему посетителю окно.
• Тестируйте разные варианты и вы найдете идеальный вариант демонстрации.
• Не обещайте того, чего не сможете выполнить. Если ради дешевого трюка вы заслонили важный контент, пользователь уйдет.
• Если ваша аудитория уже сегментирована, выбирайте, кому и какое окно показывать, чтобы повысить эффективность.
• Позвольте посетителю отказаться от заполнения формы или клика по предложению. Дайте ему право закрыть окошко понятным крестиком в правом верхнем углу.
• Если пользователь один раз уже закрыл окно, не стоит показывать его еще раз. Нет так нет.
• Всплывающее окно может содержать предложение заказать обратный звонок для консультации или заказа.

Где взять?

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

Предлагаем вам подборку 5 самых интересных, на наш взгляд, интернет-сервисов для создания интерактивных всплывающих окон (pop-up), которые используются в интернет-маркетинге уже более 20 лет и остаются популярными до сих пор. Причиной популярности всплывающих окон является четкая ориентированность на потребности конкретного пользователя — вы даете посетителю вашего сайта только то, что ему действительно нужно, именно в тот момент, когда это необходимо. Однако при подготовке pop-up окон важно комплексно подойти к процессу — от выбора онлайн-сервиса, до определения времени жизни всплывающего окна.

Сервис Optimonk
Optimonk предлагает глубочайшие, профессиональные настройки. Если в нём хорошо разобраться, можно получить потрясающие результаты. Он имеет несколько тарифных планов, которые стартуют от $29/месяц, но предлагает 14-дневный бесплатный тестовый период.
Устанавливается скрипт просто. Нужно зарегистрироваться на optimonk.com. Выбрать там подходящий шаблон всплывающего окна и отредактировать его по своему желанию. Для редактирования всплывающего окна предлагается простой редактор. Также это можно сделать, изменив код CSS либо javascript. Чтобы изменить фразу, ее нужно выделить мышкой и отредактировать.
Предлагаются готовые цветовые решения, но можно установить собственный тон. Также можно выбрать подходящую анимацию. Полезным будет добавить всплывающее благодарственное окно, которое автоматически будет всплывать после заполнения и отправки пользователем формы. После сохранения настроек, нужно установить расписание и выбрать необходимые триггеры, то есть события, которые будут провоцировать появление поп-апа.
В данном сервисе настраивается таргетинг и производится интеграция с популярнейшими CRM-системами и e-mail сервисами (зарубежными). После сохранения всех установок останется только полученный код скопипастить в шаблон сайта в самом конце страницы, перед тегом. Заключительный этап установки — нажатие кнопки OK, что активирует кампанию. Дальше Вы сможете управлять своим Pop-up в персональном кабинете.

Достоинства Optimonk:

• 11 подготовленных шаблонов, в том числе с таймером, формочка для e-mail и имени, скидочный купон, двойной Pop-up и т.д.
• Полная интеграция с самыми известными е-мейл сервисами и движками.
• Связь с Google аналитикой.
• Программист может настроить глубочайший таргетинг.
• Отличная аналитика.
• Изменениями javascript можно динамически менять текст.

Недостатки Optimonk:

• Всего двухнедельный тестовый период.
• Приличная стоимость.
• Ограничение в 5000 уникальных посетителей/мес.
• Принимается только один домен.

Сервис Picreel
Неплохой платный сервис с расширенными возможностями для работы профессионалов интернет-маркетинга. При оплате за 12 мес. — скидка в 25%.

После регистрации на picreel.com, нужно выбрать подходящий шаблон:

• Подписка.
• Redirect.
• Опрос.
• Скидки.
• Простой pop-up.
• Большой Pop-up.
• Pop-up из 2-х окон…

Любой шаблон можно редактировать в несложном редакторе или меняя HTML/CSS. Дизайн меняется так же легко, как и добавляются новые поля. Можно вставлять анимацию, таймер обратного временного отсчета и другие интерактивные элементы. Как обычно, настраиваются триггеры, после чего настройки сохраняются и сгенерированный код вставляется в шаблон веб-сайта в конце страницы.

Достоинства Picreel:

• 30-дневный бесплатный тест без ограничения функционала.
• Множество шаблонов.
• Полная совместимость с CRM- и e-mail сервисами (зарубежными).
• Обширный таргетинг.
• Отличная аналитика.
• Возможность α & ß тестирования.
• Адаптация дизайна под мобильные устройства.
• Партнерская программа.
• За каждого приведенного пользователя: $25.
• Сумму в 100 долларов уже можно выводить, в Paypal, к примеру.

Недостатки Picreel:

• Довольно приличная стоимость, от 19 долларов ежемесячно.
• Ограничение трафика в 3000 уников в месяц или в 30000 показов.
• Бесплатных тарифов нет.

Достоинства Witget:

• Нормальная цена.
• Русский язык.
• Огромная база шаблонов.
• Кроме Pop-up, много заготовок для баннеров, кнопок, форм, таймеров и так далее.
• Адаптационная верстка под мобильные устройства.
• Русскоязычные соцсети.
• Экспорт данных.
• Интеграция с русскоязычными сервисами e-mail рассылок.
• Нормальный статистический учет.

Недостатки Witget:

• Очень трудно связывается с Google analytics.
• Всего лишь 7-дневный бесплатный тест при довольно «кусачей» цене от 990 руб./мес.
• Правда, скидки при оплате наперед.

Преимущества Addthis:

• Наличие бесплатного тарифа.
• Простой интерфейс.
• Текстовое наполнение и дизайн поп-апа можно менять.
• Таргетинг прекрасно настраивается.
• Замечательная аналитика.
• Возможность скачать собранные электронные адреса.
• Дизайн адаптируется под мобильные.

Недостатки Addthis:

• Большинство полезных функций представлены лишь в платных вариантах.

Сервис Sumome
Стоимость полнофункциональных тарифов стартует от $40/месяц, хотя есть и бесплатный, в котором предусмотрены базовые функции. Сервис хорош тем, что кроме всплывающих окон, вы можете приобрести там множество разнообразных виджетов, которые будут весьма полезны интернет маркетологам. После регистрации на sumome.com нужно указать URL вашего ресурса. Появившийся код нужно скопировать в шаблон на своем сайте сразу после тега. Затем нужно перейти на свой ресурс и щелкнуть по изображению короны, которая должна появиться вверху экрана справа.
Далее жмёте по иконке «Sumo Store» и выберите приглянувшийся виджет, часть виджетов бесплатны и помечены меткой Free. Щелкнув по кнопке с виджетом, нужно подождать, пока он установится и настроить его вид. В полных версиях можно добавлять поля любой формы. В бесплатной версии можно использовать только 1 поле — для ввода e-mail. На бесплатном тарифе вы не сможете использовать готовые шаблоны, там он доступен лишь один, и в нём можно поменять лишь цвет фона.
Далее нужно настроить поведение поп-апа и выбрать страницы, где он будет всплывать. Затем выбрать CRM- и Email Service для синхронизации с вашим подписным листом. Собственную форму в полных версиях можно создавать в HTML-редакторе. После настроек всех параметров, остается нажать SAVE и можно начинать следить за статистикой.

Достоинства Sumome:

• Бесплатный тариф.
• Множество виджетов.
• Возможность менять текст и дизайн поп-апа.
• Собранные Email можно скачать.

Недостатки Sumome:

• На бесплатном тарифе доступен лишь 1 шаблон.
• Не всем доступная цена — $40 в месяц.
• Виджеты продаются набором, а не по отдельности.
• Таргетинг отличается скудными настройками.
• Брендирование не отключается.

Подведем итоги.

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

Надеемся, данная подборка будет вам полезна в деле создания полнофункционального сайта!

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

Данная форма - это проект с исходным кодом, который расположен на 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 Кбайт Выбреите файл... Обновить Код, показанный на изображении Нажимая кнопку, я принимаю условия Пользовательского соглашения и даю своё согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных». Произошли ошибки! Исправьте их и отправьте форму ещё раз. 0% Отправить сообщение Форма успешно отправлена. Нажмите на ссылку, чтобы отправить ещё одно сообщение.

3. Подключить стили и скрипты используемых компонентов (jQuery, Bootstrap) и самой формы (main.css , main.js):

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

Загрузить форму можно с GitHub. Перейти на страницу проекта можно с помощью следующей кнопки.