Видеоруководство вы можете посмотреть здесь!
По многочисленным просьбам пользователей мы нашли частное решение для реализации “всплывающей” формы (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-скрипте, в предпоследней строчке текста есть это:
height: 200, modal: true
надо сделать правки значения ширины и высоты, height - это и есть ширина = 200, а высоту вписываем словом width, то есть на выходе получаем:
height: 400, width: 400, modal: true
в данном примере увеличили размер окна в 2 раза (400 вместо 200), а дальше сохраняем и подбираем размер вручную методом тыка этими значениями.
P.S. Надеюсь Денис и Наталья добавят это в общее описание, так как это оч.просто. Уверен, что и закрытие окна после отправки формы - тоже очень просто и ребята админы всё же уделят с десяток минут, чтобы найти и описать этот процесс. Все реально скажут большое спасибо :)
Большое спасибо, Сергей!
Про размеры все верно написали.
С закрытием окна проблема. Сейчас это технически невозможно сделать, чтобы не повредить отправки данных с формы. Быстрым решением могу предложить ставить редирект в результатах формы.
Здравствуйте! Все сделал по инструкции, и когда нажимаю на кнопку, форма не появляется, и пишет ФИО обязательная форма. Что делать?
Скорее всего Вы перепутали кнопки форм, размещенных на страницы. Пришлите нам свои данные через форму обратной связи на странице: http://lpgenerator.ru/help/ (http://lpgenerator.ru/help/), проверим Вашу страницу.
6.2 В строке 2 на скриншоте вам нужно вписать ID кнопки, связанной с формой.
6.3 В строке 3 на скриншоте - ID кнопки, которая будет отображаться на странице.
что надо сделать???
ID - (IDentifier, идентификатор) - это уникальный порядковый номер, присваиваемый элементу.
6.2. Вам нужно кликнуть правой кнопкой мыши по кнопке, связанной с формой (эта кнопка создается автоматически при создании формы, чаще всего на ней есть надпись "Отправить") и в выпадающем меню выбрать пункт "Просмотр кода элемента". Скопировать этот код и вставить, как показано на скриншоте, в скрипт вместо значения, выделенного под цифрой 2.
6.3. Вам нужно кликнуть правой кнопкой мыши по кнопке, которую Вы создали в п.1 и назвали, например, "Заказать звонок", в выпадающем меню выбрать пункт "Просмотр кода элемента". Скопированный код вставить, как показано на скриншоте, вместо значения выделенного под цифрой 3.
Не пойму) Все сделал по инструкции. 10 раз перепроверил все idшники. Но когда нажимаю на кнопку - форма появляется и сразу исчезает. В чем проблема, ткните носом?)
Сделал так: скопировал страницу. сделал кнопку на ссылку на главную страницу, сделал её прозрачной и растянул на весь экран. по верх её поставил форму на копии страницы и скрепил ссылками. вот что получилось (заказать обратный звонок)
drevoplit.ru
Сделал так: скопировал страницу. сделал кнопку на ссылку на главную страницу, сделал её прозрачной и растянул на весь экран. по верх её поставил форму на копии страницы и скрепил ссылками. вот что получилось (заказать обратный звонок)
drevoplit.ru
Здравствуйте!
Укажите, пожалуйста, страницу, где у вас не работает форма, либо воспользуйтесь формой обратной связи на странице: http://lpgenerator.ru/help/ (http://lpgenerator.ru/help/), проверим Вашу страницу.
Здравствуйте, Павел!
Почему такое решение? У Вас не получилось связать кнопку с всплывающей формой или Вы хотите сделать именно редирект на страницу заказов при клике на эту кнопку?
я наоборот говорю что получилось. Всё проще чем вы описываете. просто кнопка на доп страницу с формой и прозрачная кнопка на весь экран для возврата на главную
"По желанию, вы можете изменить внешний вид диалогового окна (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/ найти эти данные для конкретного стиля?
Сергей: «Здравствуйте, можно ли сделать несколько 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; // не даем кнопке сработать как ссылке
});
})
Dim0n-RMZ, красавчик! Спасибо тебе огромное! :)
Добрый день.
Видел в самом начале списка комментариев этот вопрос, но ответа не нашел.
Видимо не у одного меня такая проблема.
У меня на верхней панели отсутствует кнопка "СКРИПТ".
Что делать? Что я делаю не так?
Спасибо.
Здравствуйте! Скажите, если нельзя закрыть всплывающее окно после отправки, то можно ли поместить на передний план всплывающее сообщение формы (например "спасибо за информацию") ? Спасибо!
Здравствуйте!
Как уже говорилось выше - сделать форму закрывающейся автоматически, к сожалению, нельзя. Поэтому окно с сообщением будет всегда под формой (форму нужно закрывать вручную).
Выход из этой ситуации - редирект на внешнюю страницу или страницу благодарности.
Скажите пожалуйста,где искать кнопку СКРИПТ?
Скажите про ID: после нажатия на правую клавишу на кнопку- нет поля просмотреть ID???
где искать кнопку СКРИПТ?
почему у меня в редакторе страниц на верхней панели нет кнопок МЕТА-ТЕГИ, СКРИПТЫ, ЦЕЛИ КОНВЕРСИИ, которые отображены на ваших рисунках обучающего материала???
Здравствуйте!
Уменьшите масштабирование в браузере, чтобы стали видны все кнопки. Это можно сделать через настройки браузера или нажав комбинацию клавиш CTRL+дефис (минус).
Благодарю!
Мне не понятно почему эта функция не является приоритетом для разработки? Ведь это одна из важнейших функций! К примеру разместить на странице товар с кнопкой купить, как? Нужно кнопку заказать и к ней всплывающую форму. Страница получается бестолковая с одной только стандартной формой заказа. Ни кнопок "Заказать", ни кнопок "Обратный звонок". Возможно из-за этого придется отказываться от такого замечательного сервиса так как эффективная страница захвата должна содержать все три этих триггера а не один из трех как сейчас.
Скажите, в ваших готовых шаблонах (на продажу) реализованы такие функции как заказать звонок и слайдер отзывов. Значит методами LPG это сделать возможно. Почему не добавить инструменты для этих триггеров в конструктор? Или мне чтобы добавить нормальную форму "Заказать звонок" придется покупать шаблон?
Здравствуйте!
Добавление дополнительных инструментов, таких как галерея и др., находится в разработке, и возможно, в будущем появится. Чтобы добавить всплывающую форму, Вам не обязательно покупать шаблон, можно воспользоваться любым из имеющихся здесь http://lpgenerator.ru/pages/add/ и добавить скрипт формы туда.
Сделала форму обратного звонка, все появляется. Хотелось бы изменить стиль формы.
Подскажите, пожалуйста, как это сделать:
1) Поля в форме обратной связи сделать по центру
2) Сделать кнопку по центру
3) Сделать заголовок формы
4) Поменять цвет поля формы.
Буду премного благодарен.
уважаемые форумчане!
может у кого-то возникала ошибка "Ошибка сохранения: error. Обратитесь в службу поддержки." при попытке сохранить страницу?
надеюсь на помощь, т.к. ничего нового добавить не могу - страница не сохраняется!
спасибо заранее!