Как добавить форму или всплывающее окно в блог systeme.io

В этой статье вы узнаете, как установить встраиваемую форму или всплывающее окно на вашем блоге systeme.io.

Шаг 1: Создайте встраиваемую форму

Во-первых, вам нужно будет создать контактную форму в вашей воронке продаж.

Для этого перейдите в "Воронку продаж", нажмите на "Создать шаг", чтобы создать новый шаг (номер 1 на изображении), затем выберите "Форма заявки" (номер 2 на изображении).

Выберите нужный шаблон, нажав на кнопку "Выбрать" (цифра 3 на изображении)

Перейдите в редактор страницы формы, нажав на "Редактировать страницу", чтобы настроить вашу форму (номер 4 на изображении).

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

Выберите пункт "Ввод формы". Затем с помощью значка "Настройки" настройте соответствующее поле, выбрав "Тип ввода", который вы хотите собирать, из выпадающего списка.

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

Не забудьте нажать на "Сохранить изменения" перед выходом из редактора или вашей "Встраиваемой формы".

Шаг 2: Создайте всплывающую форму

Перейдите в "Воронку продаж", нажмите на "Создать шаг", чтобы создать новый шаг (номер 5 на изображении), затем выберите "Всплывающая форма" (номер 6 на изображении).

Выберите нужный шаблон, нажав на кнопку "Выбрать" (цифра 7 на изображении).

Перейдите в редактор страницы формы, нажав на "Редактировать страницу", чтобы настроить вашу всплывающую форму (номер 8 на изображении).

Контактная форма должна иметь хотя бы один "Ввод формы", поэтому вы можете разместить столько полей формы, сколько захотите.

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

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

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

Не забудьте нажать на "Сохранить изменения" перед выходом из редактора или "Всплывающей формы".

Шаг 3: Устаньте встраиваемую форму на вашем блоге

Чтобы разместить контактную форму на своем блоге, необходимо скопировать ее скрипт и вставить его на страницу вашего блога.

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

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

Затем вам нужно перейти в редактор страницы блога с помощью нажатия "Редактировать" в меню или щелкнув по имени страницы, на которую хотите добавить "Встраиваемую форму".

Далее нужно добавить на страницу ваш блог элемент "Raw HTML".

Затем перейдите к настройкам вашего элемента "Raw HTML".

Нажмите на "Редактировать код" и вставьте скрипт, полученный из страницы "Встраиваемой формы".

Обязательно нажмите на "Сохранить", чтобы сохранить HTML-код, а также "Сохранить изменения" в редакторе перед выходом со страницы вашего блога.

Если после этого мы просмотрим страницу блога, то заметим отображение формы, как показано ниже:

Шаг 4: Настройка всплывающей формы на вашем блоге:

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

• Автоматически: Всплывающее окно появляется через определенное время.

• По клику: Всплывающее окно появляется при нажатии на определённую ссылку или текст.

Примечание: Для первого варианта метод такой же, как и при добавлении "Встраиваемой формы" в блог, поэтому мы подробно объясним второй метод.

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

Появится всплывающее окно, в котором можно нажать на ссылку, открывающую всплывающее окно из текста:

1. Вы должны выбрать содержание текста, который будет кликабельным.

2. Вы должны нажать на "Копировать ссылку в буфер обмена".

Откройте редактор страницы блога, на котором вы хотите добавить ссылку.

Затем необходимо установить элемент "Raw HTML" на странице вашего блога.

Наконец, вам нужно перейти к настройкам вашего "Raw HTML" элемента.

Нажмите на "Редактировать код" и вставьте скрипт ссылки, открывающей страницу со всплывающей формой, затем нажмите на "Сохранить".

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

Если после этого мы просмотрим страницу блога, то заметим отображение всплывающей формы при нажатии на текст "Нажмите здесь, чтобы открыть всплывающее окно", как показано ниже: