Создаем на html и jquery всплывающее окно формы входа

Содержание

Lemonstand

Это было бы самое обычное всплывающее окно, если бы не анимация


Она привлекает внимание

Ясность: 1. Речь об электронной книге, и нам ее демонстрируют. Все понятно.

Контроль: 1. Контроль полный.

Креативность: 0,67. Очки за GIF-изображение и принадлежность бренду.

Релевантность: 1. Все отлично.

Очарование: 0,25. Ситуацию спасает только анимированное изображение.

Ценность: 1. Все честно.

Уважение: 1. Никакого «согласия на унижение» тут нет.

Всего: 85%

PetSmart

Самый простой пример из всех представленных. Но он призван продемонстрировать, что иногда оффер – это просто дополнительная информация, и все.

Ясность: 1. Кристально ясно.

Контроль: 1. Все работает как нужно.

Креативность: 0. Здесь креативностью даже не пахнет.

Релевантность: 1. Нам говорят о доставке на ecommerce-сайте. Все сходится.

Очарование: 0. Вот если бы добавили котят!

Ценность: 1. Определенно есть.

Уважение: 1. Все хорошо.

Всего: 71%

Анастасия Шестова, руководитель направления поискового продвижения ИнтерЛабс

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

Разумеется, нет универсальных правил, подходящих ко всем pop-up, но есть ряд моментов, которые стоит учесть.

• Максимально простая форма и предложение получить что-то ценное в обмен на почту или телефон.

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

• Мини-персонализация – однократная демонстрация формы пользователям, автоматическое заполнение данных форм, если раньше они были введены на сайте.

• Временное использование – не стоит использовать одни и те же pop-up постоянно, лучше сразу определить временной промежуток применения с конкретной целью.

• Корректность отказа от предложения – не стоит прятать элементы управления окном, иначе пользователь вместо закрытого pop-up уйдет с сайта вообще. При этом лучше использовать нейтральное «Нет, спасибо», выделенное более спокойным фоном, чем оценочные суждения вида «Нет, меня устраивают мои средние возможности».

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

Мне запомнился хороший pop-up на российском сайте Puma — https://ru.puma.com/. Занимает порядка 1/4 экрана, заполнение простой формы дает неплохую скидку 10% на первый заказ:

Какие преимущества есть от всплывающих окон?

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

Практика показывает что использования всплывающих окон положительно влияет на конверсию сайта

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

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

Типы модальных окон

Тип контента в окне — Inline

Далее нам следует инициализировать наш плагин. Для этого нам нужно определиться с типом всплываемого контента. Давайте вызовем в модальном окне обычный текст. Тогда код инциализации будет для контента с типом — Inline.

Как видим событие вызова модального окна вешается на объект с классом «popup-content«. Поэтому создадим его, например, это будет ссылка с якорем на вызываемый блок с id=»text-popup».

И еще кое что. Для того, чтобы наше окно стало видно нам необходимо в файл стилей «magnific-popup.css» добавить следующий код:

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

В результате у нас открывается модальное окно с нашим текстом. Все довольно просто.

Теперь давайте откроем картинки в модальных окнах.

Галерея картинок — Gallery

инициализация будет следующей:

Тип контента — Iframe

Теперь давайте откроем в модальном окне видео Youtube.

Код инициализации будет следующим:

Заметьте, что адрес видео берется из адресной строки браузера, а не ссылка поделиться в Youtube. Также, если вы знаете, можно запретить в конце видео Youtube показ похожих видеороликов. Но для этого нужно добавить к адресу в коде iframe ролика параметр — ?rel=0. Но как это сделать, ведь мы копируем адрес из адресной строки? Так скажу вам, что API Magnific Popup позволяет нам настраивать код так, как нам нужно. Я поковырялся в документации и немного дополнил код инициализации.

Исходя из данного кода, видно, что мы создаем свой шаблон видео Youtube. В параметре «src» в конце добавляем параметр «rel=0» и все, теперь в конце видео не будет похожих роликов. Можете промотать видео до конца и посмотреть.

Тип — Ajax

В модальных окнах Magnific можно подгружать контент асинхронно, посредством технологии Ajax. Например, на демо-сайте я загружу страницу какой либо статьи в модальном окне. Демо-сайт работает на Joomla.


Это обычная ссылка на страницу статьи. Это всего лишь пример и я ставлю адрес статьи со своего сайта. Чтобы показать только контент, отбросив ненужные блоки (шапка сайта, сайдбар, подвал и т.д.) я добавлю в конец адреса параметр — ?tmpl=component.

Код инициализации:

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

Форма в модальном окне

В данном случае форма будет загружаться с типом контента «inline«. В этом случае вы сможете спросить — а чем она отличается от первого варианта, где мы показывали просто текст? Ведь вместо теста мы можем вставить код формы. Да, все правильно, вместо текста будет просто код формы с дополнительной опцией в инициализации. Данная опция будет ставить фокус на определенном поле при загрузке формы. А это в свою очередь удобство. Лично мне нравится, что при открытии, скажем, формы поиска фокус сразу идет на поле ввода ключевого запроса.

В данном случае при открытии формы фокус срабатывает на поле с id=»name» — Имя.

Диалоговые модальные окна

Чем данное окно отличается от предыдущих с типом inline? Практически ничем, за исключением того, что данное окно не закрывается по клику на затемненной области. Также скрыта кнопочка с крестиком. Для закрытия мы будет использовать другой объект. Таким образом можно создавать диалоговые окна на сайте.

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

jQuery код popup окна

Для начала, подключите jQuery файл библиотеки. После чего, инициализируем jQuery и добавляем div #blackout в тело документа. Также определяем ширину popup окна.

$(document).ready(function() {
 
    $('body').append('<div id="blackout"></div>');
     
    var boxWidth = 400;

Далее, создаем функцию, которая центрирует окно. Ранее мы установили absolute позиционирование в CSS, мы не можем использовать margin: 0px auto; нам необходимо определить ширину экрана, отнять от этого ширину popup окна, и все это разделить на 2. Высотой будет текущая позиция скролла, плюс где-то 150px.

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

function centerBox() {
     
    /* определяем нужные данные */
    var winWidth = $(window).width();
    var winHeight = $(document).height();
    var scrollPos = $(window).scrollTop();
     
    /* Вычисляем позицию */
     
    var disWidth = (winWidth - boxWidth) / 2
    var disHeight = scrollPos + 150;
     
    /* Добавляем стили к блокам */
    $('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
    $('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
     
    return false;       
}

Эта функция должна запускаться 3 раза. Когда пользователь использует скроллинг, когда пользователь изменяет размер окна, также изначально, когда загружается страница.

$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();    

В конце, нам нужно установить события кликов. Когда пользователь кликает в область вне окна, оно должно закрыться. Когда пользователь нажал на «X», окно также должно исчезнуть. В случае кликов внутри popup окна, ничего не должно происходить. В коде добавлены комментарии, чтобы проще было разобраться.

    $('').click(function(e) {
     
        /* Предотвращаем действия по умолчанию */
        e.preventDefault();
        e.stopPropagation();
         
        /* Получаем id (последний номер в имени класса ссылки) */
        var name = $(this).attr('class');
        var id = name;
        var scrollPos = $(window).scrollTop();
         
        /* Корректный вывод popup окна, накрытие тенью, предотвращение скроллинга */
        $('#popup-box-'+id).show();
        $('#blackout').show();
        $('html,body').css('overflow', 'hidden');
         
        /* Убираем баг в Firefox */
        $('html').scrollTop(scrollPos);
    });
     
    $('').click(function(e) { 
        /* Предотвращаем работу ссылки, если она являеться нашим popup окном */
        e.stopPropagation(); 
    });
    $('html').click(function() { 
        var scrollPos = $(window).scrollTop();
        /* Скрыть окно, когда кликаем вне его области */
        $('').hide(); 
        $('#blackout').hide(); 
        $("html,body").css("overflow","auto");
        $('html').scrollTop(scrollPos);
    });
    $('.close').click(function() { 
        var scrollPos = $(window).scrollTop();
        /* Скрываем тень и окно, когда пользователь кликнул по X */
        $('').hide(); 
        $('#blackout').hide(); 
        $("html,body").css("overflow","auto");
        $('html').scrollTop(scrollPos);
    });
});

На этом, создание popup окна на jQuery завершено! Нам не нужно скачивать плагины и писать сложные функции, всего несколько строк кода. Нажмите «Демо», чтобы увидеть, как это работает. Также можете скачать исходники и посмотреть, как это работает локально, на вашем компьютере.

Источник материала …

Дальше: JQuery + xCharts графики: создайте красивые графики для вашего приложения

Подбирайте правильный размер мобильного поп-апа

Мобильный поп-ап может быть маленьким и не перекрывать основное содержание сайта, а может быть большим и привлекать внимание. Давайте сравним

Мы устроили А/Б тест, в котором половине посетителей, выбранных случайным образом, показывалась одна версия поп-апа, а второй половине — другая. Дальше мы смотрим, у какого поп-апа конверсия больше, и оставляем победителя.Вот какие результаты мы получили в этом случае:Вариант А — 1,2%;Вариант Б — 1,7%.Конечно, большое всплывающее окно успешнее, потому что его сложнее проигнорировать: нужно либо закрыть поп-ап, либо оставить номер телефона.Кроме того, свою роль играет и послание — “Оставьте телефон” — четкие указания к действию всегда работают лучше. Однако если оставить только его, потеряется смысл — непонятно, зачем совершать действие, поэтому в маленькой версии лучше оставить ценность.Однако не переборщите с большими поп-апами. Именно это часто бесит пользователей: ведь если ваше сообщение перекрывает основное содержание сайта, есть соблазн его закрыть или вовсе уйти. А это совсем не то, чего бы вам хотелось, не правда ли?

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

Основная задача popup для сайта – привлечение внимания. Тем не менее, ключевую роль играет реализация поп ап баннера. При неумелом применении появление окна может вызвать скорее негативную реакцию. Согласно данным Statista за 2019 год, 25.8% пользовались блокировщиками рекламы, которые также скрывают всплывающие окна при входе на страницу. Потому как минимум четверть всех окон не доходит до итогового пользователя.

Основные цели, для которых следует сделать всплывающее окно:

  • Привлечение подписчиков в соц. сети или увеличение аудитории.
  • Уведомление о важных новостях, акцент внимания.
  • Демонстрация материалов рекламного характера.
  • Техподдержка или получение справочной информации.
  • Оформление заявок.

То есть итоговой целью для большинства поп-апов является уведомление или выполнение действия (заполнение заявки, подписка на рассылки и т. д.). Для последних обычно применяются всплывающие элементы с обратной связью.

5. Открыть всплывающее окно при загрузке страницы¶

Добавьте блоку класс , тогда pop-up откроется при открытии страницы.

Чтобы окно не открывалось каждый раз, добавляйте данный класс при особых условиях, например, в зависимости от параметра в URL (или от сессии посетителя).

Пример SMARTY блока, окно будет открыто если в URL есть параметр :

<div class="hidden {if $smarty.request.open_love == "Y"}cm-dialog-auto-open cm-dialog-auto-size{/if}" id="open_id" title="Заголовок окна">
    <p>
        Помню. Книгу раскрыв, ты чуть-чуть шелестела страницами.<br/>
        Я спросил: «Хорошо, что в душе преломляется лед?»<br/>
        Ты блеснула ко мне, вмиг узревшими дали, зеницами.<br/>
        И люблю — и любовь — о любви — для любимой — поет.
    </p>
</div>

Опции плагина

Теперь давайте рассмотрим некоторые опции плагина Magnific Popup.

mainClass

Тип — string (строка)По умолчанию — empty

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

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

Создадим отдельную инициализацию с возможностью анимации.

Создадим правила анимации в CSS

Если заметите в коде инициализации мы использовали дополнительную опцию — removalDelay. Без данной опции анимация срабатывать не будет.

Тип — integerПо умолчанию — 0

Задержка удаления Popup из DOM. Значение соответствует миллисекундам.

preloader

Тип — booleanПо умолчанию — true

Индикатор текущего состояния. По умолчанию при загрузке контента выводится надпись — Loading… Если опция включена, она всегда присутствует в DOM, меняется только текст внутри него. В зависимости от состояния у блока меняется класс. В CSS мы можем задать разное оформление. Вот список классов:

closeBtnInside

Тип — booleanПо умолчанию — true

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

closeBtnInside: false

Тип — booleanПо умолчанию — true

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

alignTop

Тип — booleanПо умолчанию — false

Если включено, выравнивает окно по верхнему краю, а не по центру. Выравнивание работает с помощью добавления класса — mfp-align-top.

disableOn

Тип — integerПо умолчанию — null

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

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

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

Я надеюсь вы поняли каковы возможности Magnific Popup. Лично я сам еще не все возможности данного плагина изведал. Даже сейчас по ходу написания данной статьи я открыл для себя новые возможности Magnific.

Напоследок  хочу дать вам ссылку на Codepen автора с некоторыми примерами Magnific Popap — http://codepen.io/collection/nLcqo/. Все, на этом и завершу.

Надеюсь вам данная статья пригодится

Всем спасибо за внимание. На связи был Заур Магомедов

До встречи в следующих постах!

Как с этим бороться

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

Выберите правильное расположение

Взгляд пользователей, которые исследуют сайт, напоминает буквы «F», «Х» и «Г». Поэтому самое выгодное расположение рекламного блока — это верхний левый угол.

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

Делайте рекламу естественной

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

Настройте грамотный таргетинг

Показывать одни и те же формы всем посетителям — не всегда эффективно. Учитывайте их историю поиска и действия на сайте.

Проведите A/B-тестирование

Чтобы рассчитать, какое место для поп-апа будет самым подходящим, стоит потестировать:

  • расположение;
  • время появления;
  • таргетинг (условия показа);
  • дизайн;
  • текст, призывы к действию.

Глава 8. Что дальше?

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

Что делать дальше?


Как защитить форму от спам-ботов: подробное руководство

Как сегментация базы подписчиков помогает бизнесу

6 приёмов вёрстки, чтобы сделать удобную форму

Как почистить базу подписчиков

Подробнее о поп-апах

Никто не любит поп-апы, зачем тогда ими пользоваться?

Виды поп-апов. Какие бывают всплывающие окна

5 видов поп-апов, которые увеличат вашу базу подписчиков

Как увеличить конверсию формы подписки: 7 способов

Хорошие примеры

Подборка отличных идей для форм подписки на сайте

Как в три раза повысить конверсию с поп-апов. Кейс SpaDream

Как собрать базу подписчиков и не слить бюджет

comments powered by HyperComments

Примеры pop-up

Farfetch использует максимально простой дизайн pop-up. На первый взгляд — ничего особенного. Однако, присмотритесь, помимо скидки и описания выгод подписки компания использует чек-бокс для сегментации по полу. Согласитесь, отличный ход, чтобы уже первую рассылку сделать более релевантной.

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

Готовы попробовать создать свой первый pop-up?

Как создать pop-up в SendPulse?

  1. Зарегистрируйтесь в SendPulse
  2. Выберите шаблон pop-up
  3. Настройте дизайн pop-up
  4. Установите условия показа

Следуйте этой простой инструкции, чтобы создать pop-up форму для мотивации пользователя к подписке.

Шаг 1. Зарегистрируйтесь в SendPulse

SendPulse — это маркетинговая платформа, которая предоставляет разные инструменты и каналы для успешного построения взаимоотношений с клиентами. Вы можете создать креативную pop-up форму менее, чем за полчаса. Используйте ее, чтобы увеличить базу подписчиков и отправлять им массовые рассылки. Регистрируйтесь прямо сейчас.

Шаг 2: Выберите шаблон pop-up

Перейдите во вкладку “Формы подписки” и нажмите “Создать форму подписки”. Вы можете выбрать один из четырех шаблонов, включая pop-up как на скриншоте ниже.

Шаг 3: Настройте дизайн pop-up

Выберите размер формы, добавьте текст, настройте вид кнопки CTA, установите цвета, загрузите изображение и так далее. На примере ниже вы видите шаблон, созданный в конструкторе форм подписки SendPulse. Здесь вы найдете более детальную инструкцию, как создать форму подписки в SendPulse.

В SendPulse вы также можете , чтобы пользователи могли контактировать с вашим брендом через Facebook Messenger, Telegram и ВКонтакте. Для этого лишь нужно перетянуть иконку нужного мессенджера в вашу форму и добавить ссылку. Смотрите, как выглядит такая форма.

Шаг 4: Установите условия показа

В правом верхнем углу нажмите “Опции формы” и выберите условия показа pop-up, время, а также страницу для отображения. На скриншоте ниже вы видите доступные опции.

Теперь, когда вы знаете, как создать pop-up с помощью SendPulse, ознакомьтесь с некоторыми полезными советами.

Как создать эффективный pop-up

  1. Сделайте форму максимально простой
  2. Придерживайтесь правильной структуры
  3. Расскажите, чего ожидать после подписки
  4. Предложите бонус в обмен на email
  5. Разрабатывайте брендированные pop-up окна
  6. Установите связь между контентом и pop-up окнами
  7. Используйте куки
  8. Экспериментируйте с pop-up формой
  9. Адаптируйте формы для мобильных

Рекомендации по использованию pop-up

  1. Используйте pop-up там, где это необходимо
  2. Обогащайте пользовательский опыт, не прерывайте его
  3. Сделайте pop-up визуально легким
  4. Выберите правильное время
  5. Установите правильный стимул

Мы собрали основные рекомендации, которые помогут вам эффективно применять pop-up.

  • Используйте pop-up там, где это необходимо. Чтобы всплывающие окна не раздражали пользователей и приносили результат, тщательно продумывайте их цель. Предположим, у вас есть страница с тоннами трафика, но большинство посетителей покидают ее, не читая ваш контент до конца. В этом случае pop-up поможет перевести коммуникацию на новый уровень.
  • Обогащайте пользовательский опыт, не прерывайте его. Существует множество способов заставить pop-up выполнять свою работу без ущерба для пользовательского опыта. Даже если посетители прочитают страницу до конца, то скорее всего уйдут, как только найдут то, что искали. Так почему бы не показать всплывающее окно, которое позволит общаться по email? Это беспроигрышный вариант для вас и будущих клиентов.
  • Сделайте pop-up визуально легким. Постарайтесь, чтобы стиль всплывающего окна соответствовал стилю страницы. Выберите тот же цвет фона, что и на сайте, напишите небольшой текст и сделайте кнопку CTA того же цвета, что и ссылки в статье.
  • Выберите правильное время. Не существует единой стратегии, которая подошла бы всем. Поэтому, тестируйте, тестируйте и еще раз тестируйте. Попробуйте использовать для появления pop-up разные временные рамки. Полагайтесь при этом на реальные данные, а не на предположения.
  • Установите правильный стимул. Используйте pop-up, чтобы увеличивать ценность контента. Например, когда пользователь читает статью о материалах для обустройства дома, предложите ему видео-руководство на эту тему.

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

Основные причины, по которым pop-up не работает

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

Всплывающее окно не настроено под нужды пользователей смартфонов

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

«Тяжелые» плагины не позволяют быстро загрузить страницу

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

Кроме того, некоторые плагины могут вступать в конфликт друг с другом, деформируя вид страницы со всплывающим окном

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

Всплывающее окно имеет некачественный дизайн

Дизайн инструментов поп-ап должен быть проработан до мелочей и перекликаться с общей стилистикой сайта

Важно сделать действительно удобную страницу для посетителей

Текст для всплывающего окна неуникален

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

Используется нерелевантный контент

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

Всплывающее окно с формой

Сделаем форму, которая будет открываться по клику на ссылку. Форма будет отправлять данные на ваш контроллер используя Ajax.

Пример SMARTY блока:

{capture name="content_for_popup"}
<form name="my_form" action="{""|fn_url}" method="post" class="cm-ajax">
    <div class="ty-control-group">
        <label class="ty-control-group__title" for="name">{__("your_name")}</label>
        <input id="name" size="50" class="ty-input-text-full" type="text" name="form_data" value="" />
    </div>
    <div class="buttons-container">
        <div class="ty-float-left">
{include file="buttons/button.tpl" but_name="dispatch" but_text=__("submit") but_role="submit" but_meta="ty-btn__primary ty-btn__big cm-form-dialog-closer ty-btn"}
        </div>
        <div class="ty-float-right">
            <a class="cm-dialog-closer ty-btn ty-btn__secondary" >Закрыть</a>
        </div>
    </div>
</form>
{/capture}

{include file="common/popupbox.tpl" text="Заголовок" content=$smarty.capture.content_for_popup link_text="Название ссылки"}

Интересные идеи по настройке всплывающих окон

1. Заменяем баннеры всплывающими окнами

Указанный прием имеет как достоинства, так и недостатки. К числу положительных аспектов можно отнести:

  • Возможность сэкономить место на странице, что особенно актуально, если баннер был большим. 
  • Всплывающее окно загружается мгновенно, а на открытие «тяжелого» баннера требуется время.

Все это может положительно сказаться на конверсии.

Минус здесь всего один:

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

2. Заменяем подписки всплывающими окнами

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


Достоинства такого подхода:

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

Среди недостатков можно назвать:

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

3. Заменяем слова благодарности всплывающими окнами

Нет необходимости создавать целю страницу сайта под слова благодарности. Но вполне можно демонстрировать popup окно по истечении определенного времени.

Достоинства подхода:

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

Недостатки:

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

4. Благодарность за подписку заменяем всплывающим окном

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

Достоинства подхода:

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

Недостатки:

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

 5. Секретный баннер pop-up

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

Достоинства подхода:

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

Недостатки:

При неправильной настройке «секретное» окно будет всплывать абсолютно для всех, что приведет компанию к убыткам.

6. Персонализация в мини-версии

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

Такой метод сулит только плюсы:

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

7. Всплывающее окно внутри страницы

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

Достоинства инструмента:

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

Недостатки:

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

Поработайте над удобством всплывающих окон

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

И в очередной раз смотрим А/Б тест. Одной части посетителей показывалось всплывающее окно с простым полем для ввода (вариант А), а другой — с маской (вариант Б).

Конверсия варианта А — 2,7%;

Конверсия варианта Б — 3,3%.

Маска подсказывает человеку, что от него требуется и отвечает на вопросы “писать номер через 8 или +7”.

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

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


С этим читают