По многочисленным просьбам пользователей мы нашли частное решение для реализации “всплывающей” формы (PopUp), появляющейся при нажатии на кнопку (например, “Заказать звонок”).
Для того, чтобы добавить в свою целевую страницу “всплывающую” форму:
1. Войдите в редактор страницы, в которую должна быть встроена форма.
2. Для устранения конфликта библиотек jQuery скопируйте код, размещенный здесь, и вставьте его через инструмент “Скрипты”, установив положение “Внутри тега <HEAD>":
![pop.png](https://138018.selcdn.ru/KB_images/omnideskru/012562/47f7695908fe240bc2bca61af63be3d0.png)
Внимание! Данный код нужно вставлять однократно! |
3. С помощью инструмента “Кнопка” создайте кнопку:
![Image: https://138018.selcdn.ru/KB_images/omnideskru/012562/37eab0288243a64eac64fc6b2775601a.png Кнопка](https://138018.selcdn.ru/KB_images/omnideskru/012562/37eab0288243a64eac64fc6b2775601a.png)
Эта кнопка будет отображаться на целевой странице, поэтому текст на ней должен соответствовать целевому действию, которое последует за ее нажатием (например, “Заказать звонок!”).
В строке URL укажите символ "решетка" (#) . Этот символ нужен только для создания кнопки и ни на что не влияет.
4. С помощью инструмента “Форма” создайте форму:
![Image: https://138018.selcdn.ru/KB_images/omnideskru/012562/910f841ec3cfbbc620f2b5b947e1c0f2.png Форма](https://138018.selcdn.ru/KB_images/omnideskru/012562/910f841ec3cfbbc620f2b5b947e1c0f2.png)
Форма будет появляться после нажатия на кнопку, название меток должно соответствовать целевому действию (например, “Имя” и “Телефон” для кнопки “Заказать звонок!”).
5. Скопируйте код, опубликованный здесь.
6. Вставьте скопированный код через инструмент “Скрипты” перед тегом </BODY>:
![Image: https://138018.selcdn.ru/KB_images/omnideskru/012562/9805a712383f3dfddaf815bbf344f825.png скрипты](https://138018.selcdn.ru/KB_images/omnideskru/012562/9805a712383f3dfddaf815bbf344f825.png)
7. Найдите в коде строчки:
![44dae9a1a2eb90f17303a3cb7de319b7.png](https://138018.selcdn.ru/KB_images/omnideskru/12562/261890/44dae9a1a2eb90f17303a3cb7de319b7.png)
В них вам потребуется изменить значение ID для каждого элемента соответственно.
8.1 В ID под указателем 1 на скриншоте вам нужно вписать ID формы. Для этого кликните 1 раз по полям формы, войдите во вкладку "Расширенные" меню "Свойства" справа и скопируйте "ID якоря":
![Image: https://138018.selcdn.ru/KB_images/omnideskru/012562/3f74c0b2953805edd5a9b960d2324904.png ID якоря](https://138018.selcdn.ru/KB_images/omnideskru/012562/3f74c0b2953805edd5a9b960d2324904.png)
8.2 В строке 2 вам нужно вписать ID кнопки, связанной с формой.
8.3 В строке 3 на скриншоте – ID кнопки, которая будет отображаться на странице.
9. Сохраните изменения:
![Image: https://138018.selcdn.ru/KB_images/omnideskru/012562/db74085b5fae4cc2bcdd7fdad2d2273b.png Сохраните изменения](https://138018.selcdn.ru/KB_images/omnideskru/012562/db74085b5fae4cc2bcdd7fdad2d2273b.png)
Вот и все. “Всплывающая форма” готова.
![Image: https://138018.selcdn.ru/KB_images/omnideskru/012562/bd9d01d62d6086ad349fd288844068c3.png Кнопка](https://138018.selcdn.ru/KB_images/omnideskru/012562/bd9d01d62d6086ad349fd288844068c3.png)
![Image: https://138018.selcdn.ru/KB_images/omnideskru/012562/db24a521f4309abf1f59da3f081d5c44.png Форма](https://138018.selcdn.ru/KB_images/omnideskru/012562/db24a521f4309abf1f59da3f081d5c44.png)
По желанию вы можете изменить внешний вид диалогового окна, используя темы оформления jquery. Руководство по подключению стилей jQuery есть здесь.
На этом всё. Также мы будем рады ответить на любые ваши вопросы, адресованные на адрес support@lpgenerator.ru, круглосуточно и без выходных.
Высоких Вам конверсий!
С уважением,
служба технической поддержки LPgenerator