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

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

    Здравствуйте, можно ли сделать несколько popup-форм на одной странице?  

  • Avatar
    Администратор

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

    Когда Вы интегрируете всплывающую форму, создается один "диалог". Добавляя еще одну форму, она попадает в него же. Поэтому они отображаются в одном окне. Для того, чтобы создать второй "диалог", обратитесь за помощью к документации jqueryUI (http://jqueryui.com/dialog/).

    Так как данная опция экспериментальная и представлена как реализация по просьбе пользователей, расширение ее функционала не является приоритетным для разработки. Подразумевается, что все дополнительные параметры будут настраиваться пользователями самостоятельно.

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

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

  • Avatar
    Администратор

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

    Как сообщалось выше, готового решения нет. Вы можете ознакомится с документацией jquery UI (http://jqueryui.com/dialog/) и найти ответ там. Либо обратитесь за помощью к js-программисту.

    приносим свои извинения за возможные неудобства.

  • Avatar
    Пользователь Progmatik-vrn

    А можно сделать так, что бы после нажатия кнопки на всплывающей форме окошко закрывалось...и ещё там открывается окно благодарности от самой формы, возможно что бы оно вообще не всплывало?

  • Avatar
    Denis Kabalkin

    Все описанные процедуры носят экспериментальный характер. Теоретически  все описанное Вами реализовать возможно. Практически - некоторое знание javascript и много экспериментов.

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

    Вы пишите в шаге 5: "Вставьте скопированный код через инструмент “Скрипты” перед тегом ". Где мне найти инструмент "Скрипты"? На странице редактирования его нет.

  • Avatar
    Denis Kabalkin

    В редакторе страниц, на верхней панели есть кнопка "скрипты".

  • Avatar
    Юрий

    Здравствуйте. Я сделал всё по инструкции, но форма так и осталась видимой на том же месте на котором и была. В просмотре страницы ничего так и не заработало как-будто скрипт и не писал. В чем может быть причина неудачи?

  • Avatar
    Юрий

    Заработало) Спасибо

  • Avatar
    Иван

    Пункт 6.2, 6.3. - муть какая то! Для не спецов нельзя было доработать продукт клавишей "Заказать звонок" и "Подробнее" ! 

  • Avatar
    Пользователь krupnova-olia

    У вас коде, который по ссылке, предполагается , что вместо  '#block-new1 a' ($('#block-new1 a').click(function() {  //обработчик клика на кнопку. id тоже будет меняться) нужно всавить  ID кнопки, которая будет отображаться на странице, НО в ее коде нет "block-new1 a'"... Что с этим делать?

  • Avatar
    Анатолий Муравьев

    Сделал все как написано, жму на заказать звонок влазиет табличка :     Имя: обязательное поле, как исправить?

  • Avatar
    Denis Kabalkin

    krupnova-olia, id кнопки можно посмотреть если выделить кнопку и справа (в свойствах) переключится на закладку "расширенные".

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

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

    Здравствуйте. Сделал все как описано. Работает, НО на электронку не приходит сообщение с контактом. Что надо сделать?

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

    Ура все нормально работает. Сам разобрался

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

    А я вот вроде все сделал, как написано в инструкции, а форма все равно осталась видимой! Что делать?

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

    все работает) забыл написать название скрипта...

  • Avatar
    Пользователь ramil.shagaleev

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

  • Avatar
    Denis Kabalkin

    ramil.shagaleev, результат отправки формы, можно настроить в ее свойствах

  • Avatar
    Пользователь euge.fedotov

    Всё получилось. распишите пожалуйста подробнее: как сменить оформление после загрузки понравившейся темы. а также интересует как изменить размер диалогового окна.

  • Avatar
    Пользователь euge.fedotov

    По-моему всё получилось). Неясно только как сместить кнопку ближе к центру. И вот ещё вопрос: как сделать, чтобы кнопка не срабатывала в случае отсутствия информации в форме?

  • Avatar
    Пользователь vladimir.vinograd

    "результат отправки формы, можно настроить в ее свойствах"

    Денис Кабалкин, где именно в свойствах формы можно настроить закрытие формы после отправки?

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

  • Avatar
    Denis Kabalkin

    Настроить закрытии окна после отправки в свойствах нельзя.

    Как написано в начале статьи, функционал экспериментальный. Работа с ним требует знаний js  и css.

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

    Для смены размеров окна и прочего поведения, смотрите документацию здесь: http://api.jqueryui.com/dialog/ (http://api.jqueryui.com/dialog/)

  • Avatar
    Андрей

    Сообщение от "Юрий" от "01 февраль 2013 15:33" :

    "Здравствуйте. Я сделал всё по инструкции, но форма так и осталась видимой
    на том же месте на котором и была. В просмотре страницы ничего так и не
    заработало как-будто скрипт и не писал. В чем может быть причина неудачи?"

    "Заработало) Спасибо" от "01 февраль 2013 15:57"

    Таже самая проблема: настроил форму, но при просмотре странички, эта форма
    остается видимой.

    Как исправить?
    Спасибо!

  • Avatar
    Пользователь kazan-motors

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

  • Avatar
    Пользователь klestova.kseniya

    добрый день, подскажите для девочек) на картинке пункт 6. не очень понятно, что именно удалаем и что заменяем. удаляем все, что между ' '? и значок # тоже? а чифра 3 на картинке- там # оставляем? ID кнопки и формы и надписью ID или только то, что в одинарных кавычках? чувствую, что вот изза одного значка где-то что-то не работает. спасибо!

  • Avatar
    Администратор

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

    Меняем только циферку (ID блока). Значки и буквы не трогаем.

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

    размер ширины и высоты нашёл где выставлять, но вот чтобы форма закрывалась после отправки - нужна помощь!
    пожалуйста, найдите это и сообщите нам - клиентам :) ведь всё работает на ура, за исключением именно этой тонкости 

  • Avatar
    Пользователь vladimir.vinograd

    Сергей, будьте добры, расскажите всем где меняется длина формы.

На базе технологии Zendesk