База знаний
по возможностям платформы

Как сделать “всплывающую” форму (PopUp-форму) скриптом?

Видеоруководство вы можете посмотреть здесь!

По многочисленным просьбам пользователей мы нашли частное решение для реализации “всплывающей” формы (PopUp), появляющейся при нажатии на кнопку (например, “Заказать звонок”). 

Для того, чтобы добавить в свою целевую страницу “всплывающую” форму:

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

2. Для устранения конфликта библиотек jQuery скопируйте код, размещенный здесь, и вставьте его через инструмент “Скрипты”, установив положение “Внутри тега <HEAD>":

pop.png

Внимание! Данный код нужно вставлять однократно!
Его работа будет распространяться на все встроенные скрипты (галереи, слайдеры, pop-up формы и т. д.).

 3. С помощью инструмента “Кнопка” создайте кнопку:

Кнопка

Эта кнопка будет отображаться на целевой странице, поэтому текст на ней должен соответствовать целевому действию, которое последует за ее нажатием (например, “Заказать звонок!”). 

В строке URL укажите символ "решетка" (#) . Этот символ нужен только для создания кнопки и ни на что не влияет.

4. С помощью инструмента “Форма” создайте форму:

Форма

Форма будет появляться после нажатия на кнопку, название меток должно соответствовать целевому действию (например, “Имя” и “Телефон” для кнопки “Заказать звонок!”).

5. Скопируйте код, опубликованный здесь.
6. Вставьте скопированный код через инструмент “Скрипты” перед тегом </BODY>:

скрипты

7. Найдите в коде строчки:

1.png

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

8.1 В ID под указателем 1 на скриншоте вам нужно вписать ID формы. Для этого кликните 1 раз по полям формы, войдите во вкладку "Расширенные" меню "Свойства" справа и скопируйте "ID якоря":

ID якоря

8.2 В строке 2 вам нужно вписать ID кнопки, связанной с формой.
8.3 В строке 3 на скриншоте – ID кнопки, которая будет отображаться на странице.

9. Сохраните изменения:

Сохраните изменения

Вот и все. “Всплывающая форма” готова.

Кнопка

Форма

По желанию вы можете изменить внешний вид диалогового окна, используя темы оформления jquery. Руководство по подключению стилей jQuery есть здесь.

Если у вас возникли проблемы при создании всплывающей формы, вы можете обратиться к “Онлайн-консультанту” (вкладка, расположенная справа в личном кабинете). Получить консультацию в режиме реального времени можно с 10 00 до 18 00 МСК (кроме выходных и праздничных дней).

С уважением,
служба технической поддержки LPgenerator

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 21 из 21
Еще есть вопросы? Отправить запрос

Комментарии

  • Avatar
    Дмитрий

    Да простят меня программисты java и html, я ни разу не программист , так что сделал как понимаю =))

    связку 

    :Картинка  :         Текст         :

    :Картинка  :                             :

    я сделал в пэинте по этому она стала отдельной картинкой.

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

    делаем мы это с помощью скрипта

    .popup.ui-widget-content {border: 2px solid #ee131c; border-radius: 10px;}
    .popup .ui-dialog-titlebar {background: #fff !important; border: none !important; }
    .popup .ui-dialog-titlebar-close {background: url(http://media.lpgenerator.ru/images/1/x_1.png); overflow: visible !important; height: 31px !important; width: 31px !important; padding: 0 !important; bordre: none !important;}
    .popup .ui-dialog-titlebar-close span {background: none; border: none;}
    .popup .ui-state-hover span, .popup .ui-state-hover {background: url(http://media.lpgenerator.ru/images/1/x_1.png) !important; border:none !important;}
    .popup .ui-state-hover span {display: none !important;}
    #block-popup {background: #fff;}
    #block-new45, #block-new43, #block-new44 {margin: 0 auto;}
    #block-new45 {border-bottom: 3px solid #f2f2f2 !important; margin-bottom: 20px;}
    #block-new43 {margin-bottom: 20px;}

    Нужно ли его делать для каждой всплывающей формы или просто достаточно указать через запятую я не знаю.Я лично сделал для каждой формы. То что нам нужно изменять из этого куска кода

    #block-popup {background: #fff;}         Название всплывающей формы

    #block-new45, #block-new43, #block-new44 {margin: 0 auto;}
    #block-new45 {border-bottom: 3px solid #f2f2f2 !important; margin-bottom: 20px;}
    #block-new43 {margin-bottom: 20px;}

    где #block-new45 - текст над формой

           #block-new43 - форма куда вбиваете данные

           #block-new44 - кнопка отправки данных

    Ну еще менял название " .popup " на другое что бы не пересекались к примеру .popup3

    p.s. обязательно вводите название скрипта иначе он не заработает, сам мучился =))

     

     

  • Avatar
    Пользователь ecohelptoday

    Кто может подсказать несколько вопросам по формам касательно, и js, vk(dot)com/panicc   Почему скрипты на сайте через раз работают? Что бы бывает заработал 1, его надо 5 раз удалить, 5 раз пере открыть страницу, и заново его несколько раз создать. Ужасно много времени уходить  на иногда.

  • Avatar
    Пользователь ruslan.asadullin

    Здравствуйте!

    Нажимаю правой кнопкой мыши на форму или кнопку "Просмотр кода", чтобы скопировать ID, в отличие от скрина, который у вас в объяснении у меня перед глазами немного другая картинка открывается (скрин прилагается). Так и не могу понять где этот загадочный ID. Помогите для тех кто в танке.

  • Avatar
    Пользователь ruslan.asadullin

    Всё сделал по описанию как понял, но и форма и кнопки остаются видимыми

  • Avatar
    Лина Малькова

    Здравствуйте! Воспользуйтесь этим описанием: 

    1. Создайте кнопку, например, "Заказать звонок". Инструмент "Кнопка".
    2. Создайте форму - инструмент "Форма"
    3. Добавьте в скрипты код для всплывающей формы из инструкции. Нажмите Добавить скрипт и сохранить.
    4. Выделите форму, кликнув по ней один раз. Справа будет меню "Свойства", идите во вкладку расширенные и скопируйте ее ID: http://awesomescreenshot.com/08e161gdce
    5. Опять идите в скрипты, найдите в коде строчки http://awesomescreenshot.com/0b3164gbca В первую вставьте скопированный ID формы вместо того, что написан там для примера.
    6. Повторите п.4 и 5 для кнопки формы. вставив ID кнопки формы во вторую строчку.
    7. Скопируйте и вставьте ID кнопки "Заказать звонок" точно также как для формы и ее кнопки до этого в строку кода ниже: http://awesomescreenshot.com/098164gl0c
    8. Сохраните скрипт и страницу.
  • Avatar
    Дмитрий Палийчук

    Объясните пожалуйста, как поменять оформление диалогового окна? 

  • Avatar
    Лина Малькова

    Здравствуйте, Дмитрий! Для смены оформления можно подключить темы отсюда: http://jqueryui.com/themeroller/ (http://jqueryui.com/themeroller/). Размещать их придется на своем хостинге.

  • Avatar
    Пользователь ag_nyanya

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

  • Avatar
    Лина Малькова

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

  • Avatar
    Никита

    Здравствуйте! Есть несколько вопросов:

    1) По ссылке находится скрипт, который отличается от того, что на скринах и в комментариях - так и должно быть?

    2) При нажатии на кнопку "Заказать звонок" в режиме просмотра появляется пустое поле без формы и в верхнем левом углу "Связь с владельцем, счетчик мэйла и лайвинтернета"

  • Avatar
    Лина Малькова

    Здравствуйте, Никита!

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

    2. Удостоверьтесь, что Вы верно прописали ID для формы и ее кнопки в скрипте (это строки "Идентификатор формы" и "Кнопка формы").

  • Avatar
    Пользователь zenit-max

    Подскажите, почему у меня кликая на кнопку заказать звонок она отправляет на сайт указанный в URL, формы никакой не появляться(

    спасибо

  • Avatar
    Лина Малькова

    Здравствуйте! Скорее всего Вы перепутали ID , когда настраивали код. Удостоверьтесь, что верно указали id для элементов. Если не получится, укажите страницу, где пытаетесь сделать всплывающую форму, мы проверим код.

  • Avatar
    Сергей Иванов

    Здравствуйте! После нажатия "заказать звонок" появляется окно формы, всё хорошо, только после заполнения формы и отправки окно не исчезает. Как сделать, что бы оно исчезло? Спасибо.

  • Avatar
    Лина Малькова

    Здравствуйте, Сергей!

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

    Можете настроить результатом формы "Переход по URL" или переход на страницу благодарности. Тогда, после отправки лида, будет происходить редирект на какую-то страницу (например, на основной сайт или страницу благодарности).

  • Avatar
    Пользователь basik

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

  • Avatar
    Лина Малькова

    Здравствуйте! Для этого достаточно заменить название темы оформления в коде на нужное Вам: http://awesomescreenshot.com/0921ns5ide

    Тему можно выбрать на http://jqueryui.com/themeroller/

  • Avatar
    Павел Захаров

    Скажите где можно посмотреть оставленную заявку на звонок, после отправки запроса?????????????? Вылазиет пустое прозрачное окно и всё!

  • Avatar
    Лина Малькова

    Здравствуйте, Павел!

    Данные с лид формы отправляются на e-mail автоматически в оповещении о вновь поступившем лиде, а также поступают в Ваш CRM-центр на вкладке "Лиды". Сейчас у Вас настроена отправка оповещений на тот адрес, на который зарегистрирован аккаунт.

    Если Вам необходимо чтобы оповещения приходили на другой ящик, то измените адрес в поле "Электронная почта для оповещения о лидах" и подтвердите e-mail, перейдя по ссылке в письме, отправленном на основной почтовый ящик.

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

  • Avatar
    Олег Морозов

    Дорогого времени суток .Всё сделал как показано в скрин-шотах (проверял и перепроверял каждую строчку по нескольку раз), но форма остается видимой, и при нажатии кнопки "закатите звонок" меня кидает на сайт указанный в URL. Я несколько раз перекопировал скрипт указаный по адресу http://pastebin.com/VX1hMzis (http://pastebin.com/VX1hMzis) , я проверял правильно ли поставлен скрипт предотвращающий конфликт с библиотеками jQuery. При этом все как было на странице так и осталось, ничего не поменялось. Форму все также видно, при просмотре странице, а при нажатии кнопки " закажите ..." выкидывает на "не существующий сайт".

    сайт еще не стоит на хостинге, это адрес вашего тестового хоста (http://testlpgenerator.ru/RedR)

    моя почта invite-bm@mail.ru (http://e.mail.ru/messages/inbox/) (если есть решение проблемы то пожалуйста напишите мне)

    Спасибо

    (http://r.mail.ru/clb1214203/help.mail.ru/mail-help/auth/multiauth)

     

  • Avatar
    Лина Малькова

    Здравствуйте! Вы ошиблись в указании ID элементов местами. Форма на странице http://lpgenerator.ru/var/150881/ (http://lpgenerator.ru/var/150881/) настроена: http://awesomescreenshot.com/0201os7z20

  • Avatar
    Виктория

    Как можно изменить размеры диалогового окна?

  • Avatar
    Лина Малькова

    Здравствуйте, Виктория! Измените соответствующие параметры в скрипте формы:

      height: 200, /* высота окна */

      width: 300, /* ширина окна */

  • Avatar
    Пользователь zenit-max

    Доброе утро!

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

  • Avatar
    Лина Малькова

    Здравствуйте! Скорее всего Вы ошиблись при указании ID элементов формы и кнопки в скрипте. Пришлите ссылку на страницу в редакторе, проверим настройки кода.

  • Avatar
    Пользователь shastie7

    Здравствуйте!

    Помогите)

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

    вот сайт http://testlpgenerator.ru/vet-marketing/ (http://testlpgenerator.ru/vet-marketing/)

    Нужна всплывающая форм с возможностью закрытия, которая от 4-х кнопок работает.

     

     

  • Avatar
    Лина Малькова

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

  • Avatar
    Пользователь shastie7

    Спасибо)

  • Avatar
    Пользователь konstantin.nazaroff

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

     

  • Avatar
    Лина Малькова

    Здравствуйте! Пришлите ссылку на страницу в редакторе, проверим код.