Видеоруководство вы можете посмотреть здесь!
По многочисленным просьбам пользователей мы нашли частное решение для реализации “всплывающей” формы (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
Да простят меня программисты java и html, я ни разу не программист , так что сделал как понимаю =))
связку
:Картинка : Текст :
:Картинка : :
я сделал в пэинте по этому она стала отдельной картинкой.
далее осталось лишь добавить форму которая красиво бы располагалась посередине всплывающей формы.
делаем мы это с помощью скрипта
.popup.ui-widget-content {border: 2px solid #ee131c; border-radius: 10px;}
.popup .ui-dialog-titlebar {background: #fff !important; border: none !important; }
.popup .ui-dialog-titlebar-close {background: url(http://media.lpgenerator.ru/images/1/x_1.png); overflow: visible !important; height: 31px !important; width: 31px !important; padding: 0 !important; bordre: none !important;}
.popup .ui-dialog-titlebar-close span {background: none; border: none;}
.popup .ui-state-hover span, .popup .ui-state-hover {background: url(http://media.lpgenerator.ru/images/1/x_1.png) !important; border:none !important;}
.popup .ui-state-hover span {display: none !important;}
#block-popup {background: #fff;}
#block-new45, #block-new43, #block-new44 {margin: 0 auto;}
#block-new45 {border-bottom: 3px solid #f2f2f2 !important; margin-bottom: 20px;}
#block-new43 {margin-bottom: 20px;}
Нужно ли его делать для каждой всплывающей формы или просто достаточно указать через запятую я не знаю.Я лично сделал для каждой формы. То что нам нужно изменять из этого куска кода
#block-popup {background: #fff;} Название всплывающей формы
#block-new45, #block-new43, #block-new44 {margin: 0 auto;}
#block-new45 {border-bottom: 3px solid #f2f2f2 !important; margin-bottom: 20px;}
#block-new43 {margin-bottom: 20px;}
где #block-new45 - текст над формой
#block-new43 - форма куда вбиваете данные
#block-new44 - кнопка отправки данных
Ну еще менял название " .popup " на другое что бы не пересекались к примеру .popup3
p.s. обязательно вводите название скрипта иначе он не заработает, сам мучился =))
Кто может подсказать несколько вопросам по формам касательно, и js, vk(dot)com/panicc Почему скрипты на сайте через раз работают? Что бы бывает заработал 1, его надо 5 раз удалить, 5 раз пере открыть страницу, и заново его несколько раз создать. Ужасно много времени уходить на иногда.
Здравствуйте!
Нажимаю правой кнопкой мыши на форму или кнопку "Просмотр кода", чтобы скопировать ID, в отличие от скрина, который у вас в объяснении у меня перед глазами немного другая картинка открывается (скрин прилагается). Так и не могу понять где этот загадочный ID. Помогите для тех кто в танке.
Всё сделал по описанию как понял, но и форма и кнопки остаются видимыми
Здравствуйте! Воспользуйтесь этим описанием:
Объясните пожалуйста, как поменять оформление диалогового окна?
Здравствуйте, Дмитрий! Для смены оформления можно подключить темы отсюда: http://jqueryui.com/themeroller/ (http://jqueryui.com/themeroller/). Размещать их придется на своем хостинге.
Здравствуйте., кнопка работает., форма открывается., но она также остается на странице. При удаление формы со страницы она удаляется и из всплывающего окна. Как убрать ее со страницы.? или хотя бы сделать невидимой.?
Здравствуйте! Всплывающая форма видима на странице в редакторе, чтобы Вы могли ее настроить, но при просмотре страницы она не будет видна и будет появляться только при нажатии на кнопку "Заказать звонок".
Здравствуйте! Есть несколько вопросов:
1) По ссылке находится скрипт, который отличается от того, что на скринах и в комментариях - так и должно быть?
2) При нажатии на кнопку "Заказать звонок" в режиме просмотра появляется пустое поле без формы и в верхнем левом углу "Связь с владельцем, счетчик мэйла и лайвинтернета"
Здравствуйте, Никита!
Код скрипта был модифицирован с учетом пожеланий пользователей, в данном скрипте учтены возможности добавления нескольких всплывающих окон, открытие всплывающей формы по нескольким кнопкам, а также возможность настроить ширину и высоту всплывающего окна. Вы можете это видеть по текстовым подсказкам в коде.
Удостоверьтесь, что Вы верно прописали ID для формы и ее кнопки в скрипте (это строки "Идентификатор формы" и "Кнопка формы").
Подскажите, почему у меня кликая на кнопку заказать звонок она отправляет на сайт указанный в URL, формы никакой не появляться(
спасибо
Здравствуйте! Скорее всего Вы перепутали ID , когда настраивали код. Удостоверьтесь, что верно указали id для элементов. Если не получится, укажите страницу, где пытаетесь сделать всплывающую форму, мы проверим код.
Здравствуйте! После нажатия "заказать звонок" появляется окно формы, всё хорошо, только после заполнения формы и отправки окно не исчезает. Как сделать, что бы оно исчезло? Спасибо.
Здравствуйте, Сергей!
Автоматическое закрытие окна невозможно сделать технически, т. к. подобная настройка может повредить отправке данных с формы.
Можете настроить результатом формы "Переход по URL" или переход на страницу благодарности. Тогда, после отправки лида, будет происходить редирект на какую-то страницу (например, на основной сайт или страницу благодарности).
Немогли бы вы рассказать кратко, как изменить вид popup формы используя указанный сайт.
Здравствуйте! Для этого достаточно заменить название темы оформления в коде на нужное Вам: http://awesomescreenshot.com/0921ns5ide
Тему можно выбрать на http://jqueryui.com/themeroller/
Скажите где можно посмотреть оставленную заявку на звонок, после отправки запроса?????????????? Вылазиет пустое прозрачное окно и всё!
Здравствуйте, Павел!
Данные с лид формы отправляются на e-mail автоматически в оповещении о вновь поступившем лиде, а также поступают в Ваш CRM-центр на вкладке "Лиды". Сейчас у Вас настроена отправка оповещений на тот адрес, на который зарегистрирован аккаунт.
Если Вам необходимо чтобы оповещения приходили на другой ящик, то измените адрес в поле "Электронная почта для оповещения о лидах" и подтвердите e-mail, перейдя по ссылке в письме, отправленном на основной почтовый ящик.
Чтобы пустое окно не появлялось, настройте результатом заполнения формы переход на страницу благодарности или показ сообщения.
Дорогого времени суток .Всё сделал как показано в скрин-шотах (проверял и перепроверял каждую строчку по нескольку раз), но форма остается видимой, и при нажатии кнопки "закатите звонок" меня кидает на сайт указанный в URL. Я несколько раз перекопировал скрипт указаный по адресу http://pastebin.com/VX1hMzis (http://pastebin.com/VX1hMzis) , я проверял правильно ли поставлен скрипт предотвращающий конфликт с библиотеками jQuery. При этом все как было на странице так и осталось, ничего не поменялось. Форму все также видно, при просмотре странице, а при нажатии кнопки " закажите ..." выкидывает на "не существующий сайт".
сайт еще не стоит на хостинге, это адрес вашего тестового хоста (http://testlpgenerator.ru/RedR)
моя почта invite-bm@mail.ru (http://e.mail.ru/messages/inbox/) (если есть решение проблемы то пожалуйста напишите мне)
Спасибо
(http://r.mail.ru/clb1214203/help.mail.ru/mail-help/auth/multiauth)
Здравствуйте! Вы ошиблись в указании ID элементов местами. Форма на странице http://lpgenerator.ru/var/150881/ (http://lpgenerator.ru/var/150881/) настроена: http://awesomescreenshot.com/0201os7z20
Как можно изменить размеры диалогового окна?
Здравствуйте, Виктория! Измените соответствующие параметры в скрипте формы:
height: 200, /* высота окна */
width: 300, /* ширина окна */
Доброе утро!
Почему нажимая на кнопку" заказать обратный звонок" вместо формы у меня страница переходит на сайт, указанный в URL кнопки.
Написано, вроде, что можно указать абсолютно любой URL
Здравствуйте! Скорее всего Вы ошиблись при указании ID элементов формы и кнопки в скрипте. Пришлите ссылку на страницу в редакторе, проверим настройки кода.
Здравствуйте!
Помогите)
Все сделала по инструкции, но нажимая на кнопку" заказать звонок" вместо формы у меня страница переходит на URL кнопки, фома не появляется.
вот сайт http://testlpgenerator.ru/vet-marketing/ (http://testlpgenerator.ru/vet-marketing/)
Нужна всплывающая форм с возможностью закрытия, которая от 4-х кнопок работает.
Здравствуйте! Вы ошиблись в месте указания вызывающих кнопок, прописали их в комментарии, а не самом коде. В остальном все верно. Сейчас все работает.
Спасибо)
Здравствуйте, у меня никак не привязывается несколько кнопок к одной форме - я пишу их через запятую, так как указано в инструкции, но срабатывает только одна - первая. Как быть?
Здравствуйте! Пришлите ссылку на страницу в редакторе, проверим код.