Как добавить форму или всплывающее окно в блог systeme.io
В этой статье вы узнаете, как установить форму заявки или всплывающую форму в блоге systeme.io.
Шаг 1: Создайте форму заявки
Во-первых, вам нужно будет создать контактную форму из вашей воронки продаж.
Выберите нужный вам шаблон, нажав на кнопку "Выбрать" (цифра 3 на изображении)
Перейдите в редактор страницы формы, нажав на "Редактировать страницу", чтобы настроить вашу форму (номер 4 на изображении)
Контактная форма должна иметь как минимум один "Вход формы", но вы можете добавить столько полей формы, сколько захотите.
Также необходимо заранее определить кнопку, которая будет записывать действие, выполняемое с выбранным элементом.
Не забудьте нажать на "Сохранить изменения", прежде чем покинуть редактор или вашу "Форму заказа".
Step 2: Create a popup form
Перейдите в "Воронку продаж", нажмите на "Создать шаг", чтобы создать новый шаг (номер 5 на изображении), затем выберите "Всплывающая форма" (номер 6 на изображении).
Контактная форма должна иметь хотя бы один (1) "Форма ввода", поэтому вы можете разместить столько полей формы, сколько захотите.
Выберите пункт "Форма ввода", затем с помощью колеса прокрутки настройте соответствующее поле, выбрав "Тип ввода", который вы хотите собирать, выбрав элемент из выпадающего списка.
Также необходимо будет установить кнопку, которая будет записывать действие, выполняемое с выбранным элементом.
Вы можете выбрать время, в течение которого контактная форма будет появляться на странице вашего блога, это время можно настроить с помощью редактора.
Не забудьте нажать "Сохранить изменения", прежде чем покинуть редактор или "Всплывающую форму".
Шаг 3: Установите форму заявку в своем блоге
Чтобы установить контактную форму на своем блоге, необходимо извлечь ее "Скрипт" и вставить на страницу своего блога.
Первый шаг - вернуться в "Конфигурацию шагов" вашей "Форму заявку", затем нужно нажать на "Скрипт".
Появится всплывающее окно, содержащее код вашего "Скрипта", связанного со страницей "Форма заявки", нажмите "Скопировать скрипт в буфер обмена".
Затем вам нужно перейти в редактор страницы блога, на которую вы хотите добавить "Форму заявки".
Затем необходимо установить HTML-элемент на странице вашего блога.
Наконец, вам нужно перейти к настройкам вашего HTML-элемента.
Нажмите на "Редактировать код" и вставьте в него код "Скрипт", полученный со страницы "Форма заявки".
Обязательно нажмите кнопку "Сохранить", чтобы сохранить HTML-код, а также нажмите кнопку "Сохранить изменения" в редакторе и сохраните перед выходом со страницы блога.
Шаг 4: Настройка всплывающей формы на вашем блоге :
При установке контактной формы в виде всплывающего окна есть два возможных способа ее отображения на странице вашего блога:
- В виде всплывающего окна, которое отображается в соответствии с настройками времени его появления.
- Из текста, который будет кликабельным и настроенным на открытие всплывающего окна.
Для первого варианта метод такой же, как и при добавлении "Формы заявки" в блог, поэтому мы подробно объясним второй метод.
Чтобы отобразить "Всплывающую форму" после нажатия на текст, сначала нужно вернуться к конфигурации шага или вашей "Всплывающей формы", затем нажать на "Создать ссылку".
Появится всплывающее окно, в котором можно нажать на ссылку, открывающую всплывающее окно из текста :
- Вы должны выбрать содержание текста, который будет кликабельным.
- Вы должны нажать на "Копировать скрипт в буфер обмена".
Для этого необходимо зайти в редактор страницы блога, на которой вы хотите разместить свой блог.
Затем необходимо установить HTML-элемент на странице вашего блога.
Наконец, вам нужно перейти к настройкам вашего HTML-элемента.
Нажмите на "Редактировать код" и вставьте в него "Скрипт" ссылки, открывающей страницу со всплывающей формой
Обязательно нажмите "Сохранить", чтобы сохранить HTML-код, и нажмите "Сохранить изменения" в редакторе, чтобы сохранить страницу перед выходом со страницы блога.
Если после этого мы просмотрим страницу блога, то заметим отображение всплывающей формы при нажатии на текст "Нажмите здесь, чтобы открыть всплывающую форму", как показано ниже: