Видеоруководство вы можете посмотреть здесь!
По многочисленным просьбам пользователей мы нашли частное решение для реализации “всплывающей” формы (PopUp), появляющейся при нажатии на кнопку (например, “Заказать звонок”).
- Новый редактор лид-форм от LPgenerator
- Новые возможности редактора LPgenerator: скругление границ элементов
- "Mapping" - новый инструмент LPgenerator!
Для того, чтобы добавить в свою целевую страницу “всплывающую” форму:
1. Войдите в редактор страницы, в которую должна быть встроена форма.
2. Для устранения конфликта библиотек jQuery скопируйте код, размещенный здесь, и вставьте его через инструмент “Скрипты”, установив положение “Внутри тега <HEAD>":
|
Внимание! Данный код нужно вставлять однократно! |
3. С помощью инструмента “Кнопка” создайте кнопку:
Эта кнопка будет отображаться на целевой странице, поэтому текст на ней должен соответствовать целевому действию, которое последует за ее нажатием (например, “Заказать звонок!”).
В строке URL укажите символ "решетка" (#) . Этот символ нужен только для создания кнопки и ни на что не влияет.
4. С помощью инструмента “Форма” создайте форму:
Форма будет появляться после нажатия на кнопку, название меток должно соответствовать целевому действию (например, “Имя” и “Телефон” для кнопки “Заказать звонок!”).
5. Скопируйте код, опубликованный здесь.
6. Вставьте скопированный код через инструмент “Скрипты” перед тегом </BODY>:
7. Найдите в коде строчки:
В них вам потребуется изменить значение ID для каждого элемента соответственно.
8.1 В ID под указателем 1 на скриншоте вам нужно вписать ID формы. Для этого кликните 1 раз по полям формы, войдите во вкладку "Расширенные" меню "Свойства" справа и скопируйте "ID якоря":
8.2 В строке 2 вам нужно вписать ID кнопки, связанной с формой.
8.3 В строке 3 на скриншоте – ID кнопки, которая будет отображаться на странице.
9. Сохраните изменения:
Вот и все. “Всплывающая форма” готова.
По желанию вы можете изменить внешний вид диалогового окна, используя темы оформления jquery. Руководство по подключению стилей jQuery есть здесь.
- Большие фоновые изображения - новые возможности создания уникального дизайна целевых страниц LPgenerator
- 3 важных обновления для работы с лид-формой в рамках оптимизации LPgenerator
Если у вас возникли проблемы при создании всплывающей формы, вы можете обратиться к “Онлайн-консультанту” (вкладка, расположенная справа в личном кабинете). Получить консультацию в режиме реального времени можно с 10 00 до 18 00 МСК (кроме выходных и праздничных дней).
С уважением,
служба технической поддержки LPgenerator
Здравствуйте, можно ли сделать несколько popup-форм на одной странице?
Здравствуйте, Сергей!
Когда Вы интегрируете всплывающую форму, создается один "диалог". Добавляя еще одну форму, она попадает в него же. Поэтому они отображаются в одном окне. Для того, чтобы создать второй "диалог", обратитесь за помощью к документации jqueryUI (http://jqueryui.com/dialog/).
Так как данная опция экспериментальная и представлена как реализация по просьбе пользователей, расширение ее функционала не является приоритетным для разработки. Подразумевается, что все дополнительные параметры будут настраиваться пользователями самостоятельно.
А как сделать, чтобы при нажатии разных кнопок всплывала всегда одна и та же форма? Это ведь должно быть проще, чем несколько форм.
Здравствуйте!
Как сообщалось выше, готового решения нет. Вы можете ознакомится с документацией jquery UI (http://jqueryui.com/dialog/) и найти ответ там. Либо обратитесь за помощью к js-программисту.
приносим свои извинения за возможные неудобства.
А можно сделать так, что бы после нажатия кнопки на всплывающей форме окошко закрывалось...и ещё там открывается окно благодарности от самой формы, возможно что бы оно вообще не всплывало?
Все описанные процедуры носят экспериментальный характер. Теоретически все описанное Вами реализовать возможно. Практически - некоторое знание javascript и много экспериментов.
Вы пишите в шаге 5: "Вставьте скопированный код через инструмент “Скрипты” перед тегом ". Где мне найти инструмент "Скрипты"? На странице редактирования его нет.
В редакторе страниц, на верхней панели есть кнопка "скрипты".
Здравствуйте. Я сделал всё по инструкции, но форма так и осталась видимой на том же месте на котором и была. В просмотре страницы ничего так и не заработало как-будто скрипт и не писал. В чем может быть причина неудачи?
Заработало) Спасибо
Пункт 6.2, 6.3. - муть какая то! Для не спецов нельзя было доработать продукт клавишей "Заказать звонок" и "Подробнее" !
У вас коде, который по ссылке, предполагается , что вместо '#block-new1 a' ($('#block-new1 a').click(function() { //обработчик клика на кнопку. id тоже будет меняться) нужно всавить ID кнопки, которая будет отображаться на странице, НО в ее коде нет "block-new1 a'"... Что с этим делать?
Сделал все как написано, жму на заказать звонок влазиет табличка : Имя: обязательное поле, как исправить?
krupnova-olia, id кнопки можно посмотреть если выделить кнопку и справа (в свойствах) переключится на закладку "расширенные".
Анатолий, если нет необходимости в обязательности полей, это можно отключить в редакторе формы (двойной клик на нужной форме, потом клик на нужном поле)
Здравствуйте. Сделал все как описано. Работает, НО на электронку не приходит сообщение с контактом. Что надо сделать?
Ура все нормально работает. Сам разобрался
А я вот вроде все сделал, как написано в инструкции, а форма все равно осталась видимой! Что делать?
все работает) забыл написать название скрипта...
Сделал все по инструкции. Всплывает окно, ввожу туда данные, жму отправить. Появляется сообщение и поверх него снова опять всплывает окно.
ramil.shagaleev, результат отправки формы, можно настроить в ее свойствах
Всё получилось. распишите пожалуйста подробнее: как сменить оформление после загрузки понравившейся темы. а также интересует как изменить размер диалогового окна.
По-моему всё получилось). Неясно только как сместить кнопку ближе к центру. И вот ещё вопрос: как сделать, чтобы кнопка не срабатывала в случае отсутствия информации в форме?
"результат отправки формы, можно настроить в ее свойствах"
Денис Кабалкин, где именно в свойствах формы можно настроить закрытие формы после отправки?
И поддерживаю вопрос о том как сменить оформление диалогового окна с формой? Как изменить его размер? Требуется сделать высоту больше, а то не все поля помещаются.
Настроить закрытии окна после отправки в свойствах нельзя.
Как написано в начале статьи, функционал экспериментальный. Работа с ним требует знаний js и css.
Для смены оформления, нужно подключать темы отсюда: http://jqueryui.com/themeroller/ (http://jqueryui.com/themeroller/). Размещать их придется на своем хостинге.
Для смены размеров окна и прочего поведения, смотрите документацию здесь: http://api.jqueryui.com/dialog/ (http://api.jqueryui.com/dialog/)
Сообщение от "Юрий" от "01 февраль 2013 15:33" :
"Здравствуйте. Я сделал всё по инструкции, но форма так и осталась видимой
на том же месте на котором и была. В просмотре страницы ничего так и не
заработало как-будто скрипт и не писал. В чем может быть причина неудачи?"
"Заработало) Спасибо" от "01 февраль 2013 15:57"
Таже самая проблема: настроил форму, но при просмотре странички, эта форма
остается видимой.
Как исправить?
Спасибо!
что за бред, вообще ничего не понятно, что куда вставлять, могли бы видеоурок записать
добрый день, подскажите для девочек) на картинке пункт 6. не очень понятно, что именно удалаем и что заменяем. удаляем все, что между ' '? и значок # тоже? а чифра 3 на картинке- там # оставляем? ID кнопки и формы и надписью ID или только то, что в одинарных кавычках? чувствую, что вот изза одного значка где-то что-то не работает. спасибо!
Здравствуйте!
Меняем только циферку (ID блока). Значки и буквы не трогаем.
размер ширины и высоты нашёл где выставлять, но вот чтобы форма закрывалась после отправки - нужна помощь!
пожалуйста, найдите это и сообщите нам - клиентам :) ведь всё работает на ура, за исключением именно этой тонкости
Сергей, будьте добры, расскажите всем где меняется длина формы.