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

Делается довольно просто прямо в редакторе форм. Затем размещается на лендинге – странице подписки.

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

1. Первым шагом создаем всплывающую форму на сервисе рассылок.

В Джастклик идем в раздел CRM → Формы подписки.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Выбираем понравившуюся форму, наводим на нее мышью и жмем «Создать».

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Наведите на форму в редакторе мышкой и кликните по шестеренке с настройками.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Нижний текст тоже можно удалить/подредактировать/оставить по умолчанию.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Теперь перейду в редактирование полей формы – нажму на иконку в виде карандашика.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

В разделе «Дизайн» разверну подраздел «Конструктор формы».

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Далее разворачиваю подраздел «Настройки дизайна». Тут подгоняю форму под свою страницу подписки.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Чтобы изменить надпись на кнопке – выделяем ее мышью и пишем свой текст.

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Следующий шаг – настроить кнопку, при клике на которую будет всплывать наша форма. Для этого раскрываем подраздел «Быстрые настройки» и там, где «Вид» отмечаем галочкой «В модальном окне».

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Жмем ниже «Стиль кнопки вызова окна». Меняем цвет кнопки, текст, размер текста, скругление. Другие настройки – опционально.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Затем нажмите внизу слева по кнопке «Опубликовать» и скопируйте код вашей формы подписки.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

2. Теперь добавим нашу форму подписки на страницу в Элементоре. Для этого я использую виджет – Html код.

Левой кнопкой мыши перетягиваю виджет в нужное место страницы и добавляю скопированный в Джастклике код формы подписки.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Жму «Обновить» и «Предпросмотр».

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Аналогично создавать всплывающие формы можно и на других сервисах рассылок (но не на всех), например в Автовебофисе можно, в Spoonpay можно.

В Spoonpay на этапе создания и настройки формы подписки в разделе «Тип формы» можно выбрать «Всплывающее окно по клику».

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Затем настроить внешний вид кнопки и появление окна с формой.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Однако есть свои нюансы:

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Добавляется форма из Spoonpay в Элементор аналогично через виджет «Html код».

Вначале копируем код формы:

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Затем добавляем на страницу подписки.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

Вот, что получается.

Как сделать всплывающую форму подписки в Джастклик при клике на кнопку и разместить на странице подписки?

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

Друзья, буду рада, если информация вам пригодилась.

Успехов!

Виктория