Html всплывающее окно при клике: Делаем простое всплывающее окно на сайте

Формы и всплывающие окна | Центр поддержки

Расширьте список контактов с помощью привлекательных форм и узнавайте больше о своих клиентах с помощью опросов. Готовы вывести на новый уровень свою маркетинговую стратегию? Узнайте, как конструктор веб-форм и конструктор всплывающих окон GetResponse помогут вам в этом!

Перейти к:

• Начало работы с формами и всплывающими окнами
• Правила отображения форм и всплывающих окон
• Управление формами и всплывающими окнами
• Формы

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

• В чем разница между формами и всплывающими окнами и устаревшими формами?
• Какие типы форм я могу создавать?
• Доступны ли формы и всплывающие окна для бесплатных аккаунтов?
• Как создать всплывающее окно с помощью шаблона?

Определите, когда, как часто, и для кого появится всплывающее окно.

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

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

• Как я могу изменить дизайн всплывающего окна или встроенной формы?
• Как я могу отслеживать трафик моего всплывающего окна или встроенной формы?
• Как вставить изображение с URL адреса?
• Как добавить таймер?
• Как добавить и редактировать текстовый блок?
• Как изменить экран после отправки сообщения?
• Как я могу добавить и редактировать кнопку?
• Как добавить форму регистрации?
• В чем разница между контактной формой и формой регистрации?
• Как вставить видео с URL?
• Как изменить язык нередактируемых элементов формы?
• Как установить код формы на мой сайт?
• Как создать новый контент?
• Как удалить всплывающее окно или встроенную форму?
• Как установить код всплывающего окна на мой сайт?
• Как настроить форму для обновления существующих контактов?
• Как создать и отредактировать контактную форму?
• Как добавить иконки соцсетей на форму или всплывающее окно?
• Как я могу управлять закрытием всплывающих окон?
• Как изменить размер всплывающего окна?
• Как изменить тип всплывающего окна?

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

• Как добавить контакты в цикл автоответчика в HTML редакторе формы?
• Где взять HTML-код формы?
• Что произойдет с моими Устаревшими формами при закрытии Старой версии панели GetResponse?
• Как сделать, чтобы форма всплывала при клике на кнопку?
• Как сделать форму всплывающей?
• Какая разница между формой и лендингом?
• Как создать мобильную версию формы?
• Могу ли я отключить регистрацию на простых HTML формах?
• Как установить форму на мою страницу на WordPress?
• Можно ли использовать свою картинку в качестве фона в форме?
• Что такое “Формы-приложения?”
• Как предотвратить фальшивые подписки ботов?
• Как создать форму?
• Как добавить настраиваемые поля в мою форму?
• Как установить форму на мою страницу?
• Где настроить страницу благодарности и страницу «уже подписался»?
• Как определить какая версия формы имеет наибольший показатель конверсии?
• Могу ли я передавать данные подписчиков на собственную страницу благодарности?

Как создать всплывающее окно, которое открывается при нажатии кнопки

Если вы ищете очень простое руководство по тому, как открыть всплывающее окно при нажатии кнопки , вы попали по адресу.

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

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

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

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

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

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

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

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

• Более того, двухэтапные подписки имеют большое преимущество перед традиционными всплывающими окнами. Это преимущество связано с психологическим эффектом, называемым эффектом Зейгарник.

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

• С другой стороны, кликабельные всплывающие окна мотивируют посетителей на выполнение действия, создавая эффект Зейгарник.

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

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

Почему? Потому что человеческий мозг не любит незавершенных задач.

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

И так как они начали процесс преобразования, они, скорее всего, закончат начатое. Удивительно эффективно, не так ли?

Теперь давайте углубимся в настоящий вопрос. Как показать всплывающее окно при нажатии кнопки без кодирования и менее чем за 5 минут?

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

Мы будем использовать Popupsmart для создания всплывающей формы по клику. Вы можете создавать всплывающие формы при нажатии или показывать любое всплывающее окно при нажатии кнопки на любом веб-сайте, например, показывать всплывающую форму WordPress при нажатии.

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

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

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

Вы можете протестировать Popupsmart с навсегда бесплатным планом, карта не требуется.

На панели инструментов Popupsmart нажмите Ваш код для встраивания , чтобы просмотреть и скопировать код для встраивания.

Вам необходимо добавить этот код для встраивания непосредственно перед закрывающим тегом

файла шаблона вашего веб-сайта, чтобы настроить Popupsmart.

Если вам нужны дополнительные инструкции по настройке Popupsmart, см. Как встроить код на свой сайт.

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

Вернитесь на панель инструментов Popupsmart и нажмите Создать новое всплывающее окно и выберите бизнес-цель.

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

Если у вас остались вопросы, подробные инструкции см. в разделе «Создание первого всплывающего окна».

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

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

Еще лучше то, что эти шаблоны полностью настраиваемые! Вы можете персонализировать всплывающее окно по своему усмотрению и добавить такие элементы, как:

• Телефонный ввод
• Ввод электронной почты
• Ввод текста
• Флажок
• Ввод в Dropbox
• Радиовход
• Таймер обратного отсчета
• Видео
• Изображение
• GIF

У нас слишком много вариантов дизайна, чтобы охватить все в этом посте, но вы можете найти подробности в разделе «Как настроить мое всплывающее окно».

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

• Расписание кампании
• Сегментация посетителей на основе аудитории и поведения посетителей с таргетингом
• Частота просмотра всплывающих окон

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

Узнайте больше о таргетинге всплывающих окон.

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

Когда вы интегрируете всплывающую форму по клику с поставщиком услуг электронной почты, подписчики будут автоматически добавлены в выбранный вами список рассылки.

Перейдите к 4-му шагу в конструкторе всплывающих окон и нажмите Интеграции .

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

Подробнее см. в нашем руководстве по почтовому маркетингу и интеграции с CRM.

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

Чтобы получить уведомление, нажмите на Уведомление по электронной почте для потенциальных клиентов и Добавить новое электронное письмо .

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

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

Теперь пришло время показать вам, как открыть всплывающее окно при нажатии кнопки. Вы не поверите, как это просто!

Если вы удовлетворены внешним видом и настройками таргетинга всплывающего окна, перейдите к последнему шагу — «Опубликовать».

Здесь нажмите Получить кнопку запуска .

• Измените текст кнопки, чтобы написать привлекательный призыв к действию .

Что такое СТА?

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

• Настройка размера шрифта .

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

Вы всегда можете оставить размер шрифта без изменений или провести A/B-тестирование всплывающей кнопки.

• Настройте цвет кнопки и радиус границы .

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

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

Вы можете добавить этот код в:

• Сообщения в блоге
• Страница
• Текстовый виджет
• Конструктор страниц
• В любом месте вашего сайта, которое принимает HTML-код.

Вот оно!

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

Если вы пытаетесь повысить коэффициент конверсии с помощью всплывающих окон, вот несколько полезных статей, которые могут вам понравиться:

• Как создавать конвертирующие всплывающие окна для мобильных устройств (без ущерба для SEO)
• Всплывающее окно электронной почты: полное руководство с 15 блестящими примерами
• Всплывающее видео: как добавить его на свой веб-сайт (без программирования)

Все готово, чтобы присоединиться к пользователям Popupsmart? Начните сегодня.

Закрытие всплывающего окна при нажатии ссылки внутри всплывающего окна

Обзор #

Если у вас есть ссылка на другую страницу во всплывающем окне, это руководство покажет вам шаги для:

1) Откройте эту страницу в новой вкладке.

2) Закрыть всплывающее окно после того, как кто-то нажмет на ссылку.

Если вы не хотите (или вам нужно) редактировать ссылку в HTML, узнайте, как использовать Шорткод кнопки закрытия Popup Maker. Шорткод кнопки закрытия сделает то же самое, только без написания кода.

Мы начнем с всплывающего окна с простой ссылкой, открывающей страницу в новой вкладке. Вот как может выглядеть этот HTML.

 Текст ссылки
 

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

Как видите, страница открывается в новой вкладке, но всплывающее окно остается открытым в первой вкладке. Это только половина нашей цели.

Шаг 1. Добавьте классы CSS popmake-close и pum-close #

Отредактируйте ссылку как HTML.

Добавьте классы CSS Popup Maker popmake-close и pum-close в тег a . Эти классы сообщают Конструктору всплывающих окон о необходимости закрывать всплывающее окно, когда мы нажимаем на эту ссылку.

Вот и наша ссылка.

 Текст ссылки
 

Вот демонстрация того, что мы должны увидеть после добавления этих двух классов CSS.

Хорошо, круто. Наше всплывающее окно закрывается. Но наша новая вкладка больше не открывается. Что дает?

Это подводит нас к следующему шагу. Мы попросили Popup Maker закрыть всплывающее окно с двумя классами CSS. Недостающий компонент – указать Конструктору всплывающих окон также открывать ссылку (т. е. выполнять поведение ссылки по умолчанию).

Шаг 2.

Добавьте класс CSS pum-do-default или атрибут data-do-default #

Добавьте класс pum-do-default или используйте атрибут data-do-default к тегу a , чтобы открыть новую страницу.

Пример 1 : Здесь мы добавляем класс pum-do-default , чтобы открыть ссылку.

 Текст ссылки
 

Пример 2 : В этом примере мы добавляем data-do-default="true" в качестве собственного атрибута ссылки для открытия новой страницы.

 Текст ссылки
 

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

Собираем все вместе, вот что мы должны увидеть после выполнения шага 2.

Вот оно. Ссылка во всплывающем окне открывает страницу в новой вкладке, а всплывающее окно закрывается в первой вкладке. Миссия выполнена 🎉

Класс CSS pum-do-default по сравнению с атрибутом data-do-default

Какой способ лучше? И то, и другое. Они сделают то же самое. Это просто вопрос предпочтения, хотите ли вы использовать атрибут data или имя класса CSS .

Что насчет шорткода кнопки закрытия? №

Мы можем сделать то же самое, используя шорткод Popup Close Button в Popup Maker.

Вы можете добавить шорткод кнопки закрытия Popup Maker через меню шорткода Popup Maker на панели инструментов классического редактора.

Если вы не видите меню кнопки с коротким кодом на панели инструментов, убедитесь, что Настройки Конструктора всплывающих окон > Разное >  Отключить кнопку с коротким кодом Конструктора всплывающих окон параметр не отмечен (по умолчанию он должен быть отключен).

В меню кнопки шорткода нажмите Кнопка закрытия всплывающего окна .