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

Как сделать “всплывающую” форму (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
    Лина Малькова

    Для этого просто переместите строку вниз в скрипте, под строку с кнопкой:
    http://awesomescreenshot.com/02c20yxxa5

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

    Сделала настройки по описанию, всплывающее окно, в итоговом варианте пропадает кнопка заказать звонок и форма пропала которая должна быть.... помогите разобраться в чем дело. http://testlpgenerator.ru/chudesanavirajah/

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

    http://lpgenerator.ru/var/251396/ ссылка редактора

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

    Здравствуйте, Ольга! Вы все верно настроили, форма появляется по кнопке "Заказать звонок": http://awesomescreenshot.com/00b22uyz05
    При просмотре страницы всплывающая форма не видна, ее можно видеть только в редакторе, чтобы можно было ее редактировать.

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

    вроде бы все по описанию сделала.. НО форма видна и не работает :( где могла допустить ошибку?

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

    оо.. получилось :) не внимательно смотрела

  • Avatar
    Зарина

    У меня ничего не получилось((( testlpgenerator.ru/fresh-art

  • Avatar
    Максим Гуйван

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

    На странице http://testlpgenerator.ru/fresh-art/ кнопка "Заказать звонок" успешно вызывает всплывающее окно. Есть ли другие затруднения с созданием всплывающих форм? Если это так - напишите о них в службу поддержки по адресу support@lpgenerator.ru или в Skype - ник LPgenerator.

  • Avatar
    Руслан

    Здравствуйте! спасибо большое за вашу помошь. не раз спасала!)
    Окажите услугу ещё раз.
    Создал всплывающее окно всё ок. Но нужно добавить ещё одно поле, казалось бы фигня.. номер формы тот же.. даже размеры побольше поставил чтобы влезало, но!
    делаю ИМЯ, МЕИЛ, ТЕЛЕФОН. и телефон не отображается. пробую сделать новую форму - та же конитель(
    Только ИМЯ и МЕИЛ появляются, а когда пробую отправить - пишет обязательно введите ТЕЛЕФОН. как будто он там есть. спасибо!

  • Avatar
    Руслан

    Сорри! разобрался!) просто создал новое окно и всё заработало!))) спасибо)

  • Avatar
    Дмитрий

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

    Рады, что смогли разобраться. На будущее с похожими вопросами рекомендуем обращаться по адресу support@lpgenerator.ru с указанием страницы, на которой возникла проблема.

  • Avatar
    Михаил

    Здравствуйте!
    А как сделать, чтобы всплывающее окно открывалось не по нажатию кнопки, а, например, через определенное время, после захода на страницу? Или после скрола окна до определенной части страницы?

  • Avatar
    Максим Гуйван

    Здравствуйте, Михаил!

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

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script>
    $('#block-new1, #block-new2').hide(); //прячем элементы формы по идентификатору #block-new1, #block-new2
    $( document ).ready(function(){ // сработает, когда документ загрузится
    $('#block-new1, #block-new2').delay(7000) // пауза в 7 сек.
    .show(1000); // появление элемента в течении 1 сек.
    });
    </script>

    Необходимо заменить #block-new1, #block-new2 на идентификаторы формы и кнопки, которые вы хотите скрыть, а затем показать. Также можно заменить срок задержки перед появлением формы.

    Если возникнут дополнительные вопросы по использованию этого скрипта - обращайтесь в нашу службу поддержки, support@lpgenerator.ru.

  • Avatar
    Михаил

    Максим, огромное спасибо!

  • Avatar
    Диана Быстрова

    Здравствуйте! Вопрос: почему при открытии формы не видно крестика, чтобы закрыть ее..только при наведении справа вверху выделяется какой-то квадратик (как оказалось - это и есть крестик, но его никто не видит и не могут закрыть форму, чтобы дальше просматривать страничку)? http://awesomescreenshot.com/0a52ss7w21

  • Avatar
    Максим Гуйван

    Здравствуйте, Диана!

    Вероятнее всего неверно указана ссылка на файл оформления (стилей) который подключается вместе с противоконфликтным модулем.
    Самое простое решение - заново тщательно повторить все шаги по настройке, описанные в инструкции - судя по вашей странице http://antistressiki.by/ вы именно так и сделали, и теперь все формы работают без сбоев, "крестики" не теряются.

    Если проблема не решена, и речь идёт о какой-то другой странице - напишите, пожалуйста, на наш адрес support@lpgenerator.ru, и укажите, на какой именно странице можно увидеть эту проблему.

  • Avatar
    Кирилл Ершов

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

    Примерно как здесь http://danilovskaya.com/ кнопка "ЗАКАЖИТЕ ЗВОНОК".
    Как пользоваться ссылкой под статьей я не понял

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

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

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

    Пошаговое руководство, как сделать "всплывающую форму" с помощью встроенного виджета, находится здесь: http://lpgenerator.ru/blog/2014/06/10/obnovlenie-vizualnogo-redaktora-lpgenerator-novaya-versiya-vidzheta-vsplyvayushaya-forma/

  • Avatar
    Виктория

    Добрый день.

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

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

    Здравствуйте, Виктория! Скорее всего у Вас установлен скрипт плавного скролла на эту кнопку. Чтобы мы смогли проверить, пришлите нам ссылку на страницу в редакторе на адрес поддержки support@lpgenerator.ru

  • Avatar
    Виктория

    Да, все верно. Удалила скрипт и все стало нормально. Спасибо огромное за помощь.