Как сделать так, чтобы форма подписки Bloom всплывала при нажатии кнопки

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

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

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

Когда использовать форму согласия после клика

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

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

Однако размещение формы согласия с триггером клика в местах, где люди добровольно выбирают щелкать или не щелкать (например, кнопки или призывы к действию в целом), - это совсем другая история. Мы знакомы с нажатием на CTA (призыв к действию), поэтому нас это не пугает. Мы сознательно выбираем следующий шаг. Если нам не интересно узнать, что стоит за призывом к действию, мы просто не будем нажимать. Но если мы захотим, то сможем. Этот «выбор», который есть у посетителей, позволяет им чувствовать себя более комфортно, когда в конечном итоге появляется форма подписки, и увеличивает шансы на то, что они действительно подпишутся на вашу рассылку.

Как сделать так, чтобы форма подписки Bloom всплывала при нажатии кнопки

Подпишитесь на наш канал Youtube

Создайте форму подписки

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

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

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

Выберите тип формы согласия

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

Вкладка "Настройка"

Начните с названия вашей формы согласия на вкладке «Настройка» формы согласия, которую вы создаете. Затем подключите свою форму к провайдеру электронной почты. Без провайдера электронной почты, учетной записи и списка адресов электронной почты форма будет неактивна.

Вкладка "Дизайн"

На вкладке «Дизайн» вы можете стилизовать форму, которую собираетесь использовать. В этом посте мы не будем этого делать. Мы собираемся выбрать стандартную форму подписки без изменений, чтобы посмотреть, работает ли она. Позже вы всегда можете вернуться к созданной вами форме согласия, чтобы внести изменения.

Вкладка настроек дисплея

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

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

Давайте начнем

Хотя логика добавления формы выбора триггера клика в разные модули одинакова, мы собираемся объяснить это на двух примерах; модуль кнопки и кнопка заголовка полной ширины. Не понимая логики, вы можете просто выполнить шаги, описанные в этом посте, чтобы это произошло.

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

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

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

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

Используя класс CSS

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

Перейдите на вкладку Advanced и прокрутите вниз. Щелкните поле «Основной элемент» и посмотрите, как отобразится класс CSS, назначенный кнопке. Скопируйте класс CSS, он нам сразу понадобится.

Затем перейдите на вкладку «Параметры отображения» создаваемой вами формы согласия. В предыдущей части мы уже показали вам, где произойдет волшебство. Мы включили «Триггер по щелчку» и отключили все другие упомянутые возможности. Прямо под Trick On Click вам нужно будет вставить следующую строку:

*.et_pb_button_0.et_pb_button.et_pb_module

Как видите, это просто символ '*', за которым следует класс, который вы скопировали прямо перед этим шагом.

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

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

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

Используя CSS ID

Второй метод - использование идентификатора CSS. Откройте модуль кнопок, перейдите на вкладку «Дополнительно» и присвойте ему идентификатор CSS. В этом случае мы будем использовать всплывающее окно.

Продолжите, перейдя на вкладку Content модуля Button и написав символ «#», за которым следует все, что вы хотите. Сделав это, вы убедитесь, что посетитель остается на том же месте на странице, пока нажимает кнопку.

Двигаясь дальше, вернитесь к настройкам формы подписки и добавьте «# всплывающее окно» в поле «Триггер по щелчку». Вы всегда должны писать «#», за которым следует CSS ID, который вы присвоили кнопочному модулю.

a#popup

Подключите кнопки заголовка полной ширины к форме согласия

Другой пример, в котором мы покажем вам, как создать форму согласия на запуск триггера по щелчку, - это кнопка заголовка полной ширины. Единственная возможность, которая у нас есть, - это использовать класс CSS кнопки. В частности, мы не можем назначить CSS ID кнопке через конструктор Divi.

Используя класс CSS

Создайте полноразмерный заголовок или откройте полноширинный заголовок, в который вы хотите добавить форму согласия «Триггер по щелчку». Перейдите на вкладку «Дополнительно» в заголовке «Полная ширина» и прокрутите вниз, пока не найдете «Первая кнопка». Щелкните поле и скопируйте класс CSS, назначенный кнопке.

Затем перейдите на вкладку «Содержимое» и введите символ «#», а затем что-нибудь еще в поле URL-адреса кнопки №1.

Наконец, перейдите на вкладку «Параметры отображения» вашего согласия и введите символ «*», за которым следует скопированный вами класс, назначенный кнопке.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

Последние мысли

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

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от BarsRsind / shutterstock.com