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

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

    а иногда при сохранении выдает что-то типо "request entity too large"

    с чем может быть связанна данная проблема? 

    как решить?

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

    Как сделать чтобы при нажатии на кнопку "заказать звонок" в верху страницы и к примеру кнопку "заказать выезд специалиста" в низу страницы выскакивала одна и та же форма? 

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

    одна и та же пока не реализована

    можно сделать по отдельной форме к каждой кнопке, так работает

    но формы "тяжелые" и у меня на странице больше 15 штук не сохраняет

  • Avatar
    страницы не удалять пароль не менять

    Пожалуйста, помогите!

    Не получается настроить форму.

    1. После какого шага должна пропасть форма?

    2. Когда нажимаю правой кнопкой: посмотреть код, появляется не такое как на примере,

    в выделенной области нет ID, поэтому находила его до или после выделенного, это не правильно?

    Очень срочно нужна помощь!!!

    (Писала в поддержку, не ответили)

  • 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
    Лина Малькова

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

    Возможно, забыли указать или перепутали id кнопок. Воспользуйтесь тикет-системой и пришлите нам запрос, проверим код на вашей странице. Не забудьте указать, на какой именно странице делаете форму.

  • Avatar
    страницы не удалять пароль не менять

    Спасибо, я уже разобралась.

    Нашла id на панеле справа, в вкладке расширенные

  • Avatar
    Артем

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

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

    Да им похоже пофигу, что столько пользователей их сервиса просят реализовать одну и ту же функцию. 

  • Avatar
    Артем

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

  • Avatar
    Denis Kabalkin

    Все будет реализовано, рано или поздно. 

    Есть более приоритетные задачи, они выполняются в первую очередь.

  • Avatar
    Константин

    А можно узнать о приоритетных задачах? Что планируется внедрить в первую очередь?

  • Avatar
    Denis Kabalkin

    Доработки редактора, есть в планах.

    Точнее пока сказать ничего не могу.

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

    а как можно добавить текст в форму? например: "Заказать каталог фотообоев "В детскую комнату". на кнопке такой длинный текст не разместить.

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

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

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

     $('#block-popup').append($('#block-new68').css('position', 'static'));

  • Avatar
    Дмитрий

    Добрый день! Не подскажете как задать положение для добавленных элементов на всплывающей форме?

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

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

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

  • Avatar
    Дмитрий

    Я думаю если объясню задачу будет попонятней.  При нажатии на кнопку поподробней на главной странице должна вывестись POPUP форма следующего содержания

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 

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

    :Картинка  :                             :

               Форма покупки

  • Avatar
    Дмитрий

    Сам разобрался.

  • Avatar
    Александр

    а как сделать что бы несколько кнопок вызывало одну и туже форму?

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

    Мне тоже интересно как создать несколько кнопок вызывающих одну форму

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

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

    К сожалению, такой опции не предусмотрено. Если у Вас есть опыт в работе с JS, Вы можете настроить код самостоятельно либо заказать любому js-разработчику.

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

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

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

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

  • Avatar
    Александр

    хренова :(

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

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

    Пользователь uzmiev (https://lpgenerator.zendesk.com/users/413728666), для этого достаточно выделить форму кликом и в меню справа выбрать результатом формы переход по URL.

    Пользователь vitalyle (https://lpgenerator.zendesk.com/users/401846351), на данный момент Вы можете настроить эти элементы согласно руководству. Внедрение данного функционала в редактор находится в разработке.

  • Avatar
    Дмитрий

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

    в сточке кода

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

    через запятую указываешь id кнопок

  • Avatar
    Александр

    Дим мега спасибо!

  • Avatar
    Алексей

    Дмитрий, а можете, пожалуйста, подсказать, как Вы реализовали:

     

    Я думаю если объясню задачу будет попонятней.  При нажатии на кнопку поподробней на главной странице должна вывестись POPUP форма следующего содержания

    _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ 

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

    :Картинка  :                             :

               Форма покупки