Привет! В сервисе рассылок Джастклик помимо создания классической формы подписки есть вариант сделать вызов формы при клике на кнопку. Это называется всплывающая форма или форма в модальном окне, и она чаще имеет лучшую конверсию в подписку.
Делается довольно просто прямо в редакторе форм. Затем размещается на лендинге – странице подписки.
Давайте рассмотрим на примере. Создадим такую форму и встроим ее на страницу, сделанную в Элементоре.
1. Первым шагом создаем всплывающую форму на сервисе рассылок.
В Джастклик идем в раздел CRM → Формы подписки.
Выбираем понравившуюся форму, наводим на нее мышью и жмем «Создать».
Откроется редактор с выбранной формой – первым делом поработаем над внешним видом нашей формы, которая будет всплывать при клике на кнопку. А затем уже настроим саму кнопку.
Наведите на форму в редакторе мышкой и кликните по шестеренке с настройками.
Здесь можно поменять ширину формы и фон – выбрать цвет заливки либо фоновую картинку. А также выполнить другие настройки по желанию – задать обводку формы, настроить скругление краев и внутренние отступы.
В своем случае я оставлю фон и ширину по умолчанию, как и другие настройки. Для выхода из настроек жму по крестику вверху справа.
Текст вверху над полями формы можно либо удалить, либо выделить мышкой и написать свой вариант.
Нижний текст тоже можно удалить/подредактировать/оставить по умолчанию.
Теперь перейду в редактирование полей формы – нажму на иконку в виде карандашика.
В разделе «Дизайн» разверну подраздел «Конструктор формы».
В своей форме я хочу оставить только поле для ввода емейла, а имя убрать, поэтому сдвигаю влево в неактивную серую позицию ползунок напротив поля с именем.
Далее разворачиваю подраздел «Настройки дизайна». Тут подгоняю форму под свою страницу подписки.
Для кнопки задаю максимальное скругление углов, меняю цвет на свой, добавляю иконку.
Чтобы изменить надпись на кнопке – выделяем ее мышью и пишем свой текст.
Для поля с вводом email также задаю максимальное скругление, уменьшаю толщину линии обводки до 1,увеличиваю размер надписи внутри поля.
Следующий шаг – настроить кнопку, при клике на которую будет всплывать наша форма. Для этого раскрываем подраздел «Быстрые настройки» и там, где «Вид» отмечаем галочкой «В модальном окне».
Жмем ниже «Стиль кнопки вызова окна». Меняем цвет кнопки, текст, размер текста, скругление. Другие настройки – опционально.
В конце еще важно привязать всплывающую форму подписки к группе подписчиков и указать ссылки переадресации на страницы после подписки – активации и благодарности. Если таких страниц у вас нет, то оставьте поля пустыми, удалите из них содержимое.
Затем нажмите внизу слева по кнопке «Опубликовать» и скопируйте код вашей формы подписки.
Саму форму после не забудьте сохранить на сервисе рассылок.
2. Теперь добавим нашу форму подписки на страницу в Элементоре. Для этого я использую виджет – Html код.
Левой кнопкой мыши перетягиваю виджет в нужное место страницы и добавляю скопированный в Джастклике код формы подписки.
Жму «Обновить» и «Предпросмотр».
Выглядит это так – при нажатии на кнопку у нас всплывает наша форма подписки. То, чего мы и добивались.
Аналогично создавать всплывающие формы можно и на других сервисах рассылок (но не на всех), например в Автовебофисе можно, в Spoonpay можно.
В Spoonpay на этапе создания и настройки формы подписки в разделе «Тип формы» можно выбрать «Всплывающее окно по клику».
Затем настроить внешний вид кнопки и появление окна с формой.
Однако есть свои нюансы:
— оригинальная кнопка довольно мелкая, есть возможность загрузить свою картинку для кнопки. Но лично я столкнулась с косяком, что не всегда эта загруженная картинка отображается.
Еще из рекомендаций – в настройках внешнего вида формы задать тень – тогда всплывающее окошко выглядит удачнее.
Добавляется форма из Spoonpay в Элементор аналогично через виджет «Html код».
Вначале копируем код формы:
Затем добавляем на страницу подписки.
Вот, что получается.
Ниже вы можете посмотреть мой видеоурок к данной статье:
Друзья, буду рада, если информация вам пригодилась.
Успехов!
Виктория
Отправляя сообщение, Вы разрешаете сбор и обработку персональных данных.
Политика конфиденциальности.