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

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

    Здравствуйте уважаемые специалисты LPgenerator'a. Подскажите, как мне можно понять, какой именно лид оставил свои данные в форме захвата, а какой по кнопке "Заказать звонок"?

    С уважением.

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

    Здравствуйте, Вадим! Если лид-формы одинаковы на странице, то идентифицировать с какой именно пришел лид, невозможно. Если формы имеют разные поля, то тогда можно понять с какой из них поступил лид.

  • Avatar
    Евгений

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

  • Avatar
    Вадим

    Здравствуйте, Лина! Я в принципе так и сделал, с двумя разными обязательными полями. А возможно ли как-нибудь придумать невидимое для пользователя поле? Или передавать номер #block-new формы на почту? Если нет, будет ли эта функция реализована?

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

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

    Евгений, чтобы сказать в чем проблема, нужно видеть код, пришлите ссылку на страницу в редакторе. Возможно, ошиблись в ID элементов.

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

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

    ребят сделайте кнопку ЗАКАЗАТЬ ЗВОНОК  в редакторе по умолчанию , так как платный аккаунт не должен подразумевать ПЛЯСКИ С БУБНОМ

  • Avatar
    Пользователь garo-29

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

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

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

  • Avatar
    Айрат Фагим

    Дмитрию можно поставить памятник! Спасибо за ответ, с дополнительными кнопками!

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

    Добрый день.

    По не понятной причине в всплывающем окне пропал фон, остался только текст формы и кнопка формы

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

    Теперь форма пропала в целом - осталась только надпись close

     

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

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

  • Avatar
    Денис Шагеев

    Здравствуйте, настроил форму с вашей помощью. Вписываю текст в заголовок. При нажатии вылазиет всплывающее окно, и там текст не влазиет.

    Как его перенести или изменить параметры чтобы влез?

    P.s. Увеличение размеров окна проблемы не решают, т.к. окно получается очень длинным

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

    Здравствуйте, Денис! К сожалению, заголовок формы всегда будет только в одну строку. Если нужно добавить текст перед полями формы, то добавьте строку с id блока с текстом в код скрипта так: http://awesomescreenshot.com/0f91u2r2c3

  • Avatar
    Денис Шагеев

    Спасибо большое! А чтобы во всплывающем окне кнопку сделать по середине что нужно прописать?

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

    На странице http://lpgenerator.ru/var/201795/ (http://lpgenerator.ru/var/201795/) кнопка всплывающей формы отцентрована: http://awesomescreenshot.com/0041u376ed

  • Avatar
    Вадим

    Ничего не получилось.. 

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

    Такая у меня цепочка:

    /* Идентификатор формы */
    var form = '#block-new12';

    /* Кнопка формы */
    var form_button = '#block-new13';

    /* Кнопка, вызывающая форму. Если кнопок несколько их надо вписать через запятую: #block-new1 a, #block-new2 a, #block-new3 a */
    var buttons = '#block-new11 a';

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

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

    Здравствуйте, Вадим! На странице http://lpgenerator.ru/var/205303/ (http://lpgenerator.ru/var/205303/) Вы не добавили скрипты, вернее не сохранили их, для этого нужно пересохранить всю страницу целиком в редакторе. Добавьте скрипты и сохраните страницу, тогда все будет работать.

  • Avatar
    Вадим

    Странно, вроде все время жму на СОХРАНИТЬ. Ладно, попробую еще раз.

    Спасибо.

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

    Здравствуйте! После отправки данных , форма не закрывается!  

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

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

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

     

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

    Здравствуйте! Сделала по инструкции всплывающее окно на все кнопки.
    http://testlpgenerator.ru/california-dream/
    Форма осталась видимая и кнопки не работают. Помогите, пожалуйста!
    В чем ошибка?

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

    Здравствуйте! Вы вставили id кнопок в комментарий кода, поэтому они не работали. Также ошиблись в положении первого скрипта.
    Сейчас форма настроена: http://awesomescreenshot.com/0341vrkua0
    Размер всплывающего окна можно отрегулировать, подобрав параметры ширины и высоты в коде скрипта.

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

    Лина, спасибо огромное.
    Я извиняюсь, но как только я поменяла параметры ширины и высоты в коде скрипта, у меня опять поломалась форма. Прошу еще раз помочь.

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

    Первый скрипт был в неверном положении опять. Сейчас работает: http://awesomescreenshot.com/0641vw7abc

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

    Перетаскивая элементы значительно увеличилась длинна страницы. Секции там нет.
    Таких же значков как при изменении секции не появляется.
    Как можно вновь уменьшить длину?

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

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

  • Avatar
    Леонид Коженков

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

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

    Здравствуйте! Если нужно добавить в всплывающую форму изображение или текстовый блок, то для этого добавьте в код строку с id блока с текстом так: http://awesomescreenshot.com/0f91u2r2c3

  • Avatar
    Леонид Коженков

    Спасибо, все настроил. Но возникает вопрос - как сделать, чтобы текст был под кнопкой? http://awesomescreenshot.com/02420wfmc7