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

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

    С удовольствием! Все очень просто. В java-скрипте, в предпоследней строчке текста есть это:
    height: 200, modal: true
    надо сделать правки значения ширины и высоты, height - это и есть ширина = 200, а высоту вписываем словом width, то есть на выходе получаем:
    height: 400, width: 400, modal: true 
    в данном примере увеличили размер окна в 2 раза (400 вместо 200), а дальше сохраняем и подбираем размер вручную методом тыка этими значениями.

    P.S. Надеюсь Денис и Наталья добавят это в общее описание, так как это оч.просто. Уверен, что и закрытие окна после отправки формы - тоже очень просто и ребята админы всё же уделят с десяток минут, чтобы найти и описать этот процесс. Все реально скажут большое спасибо :)

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

    Большое спасибо, Сергей!

  • Avatar
    Denis Kabalkin

    Про размеры все верно написали.

    С закрытием окна проблема. Сейчас это технически невозможно сделать, чтобы не повредить отправки данных с формы. Быстрым решением могу предложить ставить редирект в результатах формы. 

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

    Здравствуйте! Все сделал по инструкции, и когда нажимаю на кнопку, форма не появляется, и пишет ФИО обязательная форма. Что делать?

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

    Скорее всего Вы перепутали кнопки форм, размещенных на страницы. Пришлите нам свои данные через форму обратной связи на странице: http://lpgenerator.ru/help/ (http://lpgenerator.ru/help/), проверим Вашу страницу.

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

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

    что надо сделать???

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

    ID - (IDentifier, идентификатор) - это уникальный порядковый номер, присваиваемый элементу.

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

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

  • Avatar
    Пользователь pine.woodg

    Не пойму) Все сделал по инструкции. 10 раз перепроверил все idшники. Но когда нажимаю на кнопку - форма появляется и сразу исчезает. В чем проблема, ткните носом?)

  • Avatar
    павел мартынычев

    Сделал так: скопировал страницу.  сделал кнопку на ссылку на главную страницу, сделал её прозрачной и растянул на весь экран. по верх её поставил форму на копии страницы и скрепил ссылками. вот что получилось (заказать обратный звонок)  

    drevoplit.ru

  • Avatar
    павел мартынычев

    Сделал так: скопировал страницу.  сделал кнопку на ссылку на главную страницу, сделал её прозрачной и растянул на весь экран. по верх её поставил форму на копии страницы и скрепил ссылками. вот что получилось (заказать обратный звонок)  

    drevoplit.ru

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

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

    Укажите, пожалуйста, страницу, где у вас не работает форма, либо воспользуйтесь  формой обратной связи на странице: http://lpgenerator.ru/help/ (http://lpgenerator.ru/help/), проверим Вашу страницу.

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

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

    Почему такое решение? У Вас не получилось связать кнопку с всплывающей формой или Вы хотите сделать именно редирект на страницу заказов при клике на эту кнопку?

  • Avatar
    павел мартынычев

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

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

    "По желанию, вы можете изменить внешний вид диалогового окна (http://jqueryui.com/dialog/), используя темы оформления jquery (http://jqueryui.com/themeroller/)."

    Там действительно много разных тем, для изменения темы в скрипте достаточно изменить в коде:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/ui-lightness/jquery-ui.css"type="text/css" media="all" />

    ссылки на новую выбранную тему?  

    Где можно на http://jqueryui.com/themeroller/ найти эти данные для конкретного стиля?

  • Avatar
    Пользователь Dim0n-RMZ

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

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

    Тут всё логически) На пример мы имеем 2 pop формы...

    В представленном скрипте мы содаём новую форму, и называем её "block-popup". А мы просто называем её "block-popup1" в первом скрипте, и "block-popup2" во втором скрите) При этом не забываем изменить название во всех местах скрипта.

    Приведу пример как у меня выглядит скрипт для моей первой формы:

    $(function() {

    $('body').append('<div id="block-popup1"></div>'); //создаем пустой popup

    $('#block-popup1').append($('#block-new6').css('position', 'static')); //переносим в него форму. id будет отличаться для каждой страницы

    $('#block-popup1').append($('#block-new7').css('position', 'static')); //переносим кнопку в попап

    $('#block-popup1').hide(); //скрываем попап

    $('#block-new3 a').click(function() { //обработчик клика на кнопку. id тоже будет меняться

    $("#block-popup1" ).dialog({ //инициализация диалога

    height: 200, width: 400, modal: true

    });

    return false; // не даем кнопке сработать как ссылке

    });

    })

  • Avatar
    Пользователь mmm.co.ua

    Dim0n-RMZ, красавчик! Спасибо тебе огромное! :)

  • Avatar
    Григорий Соболев

    Добрый день.

    Видел в самом начале списка комментариев этот вопрос, но ответа не нашел.

    Видимо не у  одного меня такая проблема.

    У меня на верхней панели отсутствует кнопка "СКРИПТ".

    Что делать? Что я делаю не так?

    Спасибо.

  • Avatar
    Акимов Николай

    Здравствуйте! Скажите, если нельзя закрыть всплывающее окно после отправки, то можно ли поместить на передний план всплывающее сообщение формы (например "спасибо за информацию") ? Спасибо!

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

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

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

    Выход из этой ситуации - редирект на внешнюю страницу или страницу благодарности.

  • Avatar
    Елена Юрченко

    Скажите пожалуйста,где искать кнопку СКРИПТ?

  • Avatar
    Пользователь ria-rim

    Скажите про ID:  после нажатия на правую клавишу на кнопку- нет поля просмотреть ID???

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

    где искать кнопку СКРИПТ?

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

    почему у меня в редакторе страниц на верхней панели нет кнопок МЕТА-ТЕГИ, СКРИПТЫ, ЦЕЛИ КОНВЕРСИИ, которые отображены на ваших рисунках обучающего материала???

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

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

    Уменьшите масштабирование в браузере, чтобы стали видны все кнопки. Это можно сделать через настройки браузера или нажав комбинацию клавиш CTRL+дефис (минус).

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

    Благодарю!

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

    Мне не понятно почему эта функция не является приоритетом для разработки? Ведь это одна из важнейших функций! К примеру разместить на странице товар с кнопкой купить, как? Нужно кнопку заказать и к ней всплывающую форму. Страница получается бестолковая с одной только стандартной формой заказа. Ни кнопок "Заказать", ни кнопок "Обратный звонок". Возможно из-за этого придется отказываться от такого замечательного сервиса так как эффективная страница захвата должна содержать все три этих триггера а не один из трех как сейчас.

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

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

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

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

    Добавление дополнительных инструментов, таких как галерея и др., находится в разработке, и возможно, в будущем появится. Чтобы добавить всплывающую форму, Вам не обязательно покупать шаблон, можно воспользоваться любым из имеющихся здесь http://lpgenerator.ru/pages/add/ и добавить скрипт формы туда. 

  • Avatar
    Алексей

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

    Подскажите, пожалуйста, как это сделать:

    1) Поля в форме обратной связи сделать по центру

    2) Сделать кнопку по центру

    3) Сделать заголовок формы

    4) Поменять цвет поля формы.

    Буду премного благодарен.

  • Avatar
    Анатолий Павлович Секер

    уважаемые форумчане!

    может у кого-то возникала ошибка "Ошибка сохранения: error. Обратитесь в службу поддержки." при попытке сохранить страницу?

    надеюсь на помощь, т.к. ничего нового добавить не могу - страница не сохраняется!

    спасибо заранее!