Только пользователям разрешено входить в центр администрирования. Войти

Формы - Всплывающие окна

Мои формыДобавить формуФормы - Всплывающие окна?
Внимание! Для работы всплывающих окон с формами необходимо разместить код скрипта 1 раз. Создайте «Блок/Меню» (разметив в Шапке/Hedaer, служебных тегах или Footer сайта). :
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script>

Данный скрипт не установлен по умолчанию для увеличения производительности и большей гибкости сайтов.
После установки скрипта вы можете сгенерировать ссылку для всплывающего окна.
Рекомендуем вставить данный код в «Блок/Меню» с вашими другими скриптами.

Внимание! При создании Стандартной формы упрощенным способом, данный код будет установлен автоматически, в «Блок/Меню» с именем «CODE_FORM_SCRIPT_FILE».


Результат (ссылка):



Результат (span элемент):



Укажите параметры для всплывающего окна:

ID Формы Необходимо создать форму
 Class для оформления кнопки Заголовок окна Текст кнопки закрытия окна
(отображается только если указано значение) Текст кнопки `Отправить` Текст ссылки/кнопки открытия окна Ширина окна Высота окна Автоматическая ширина и высота Автоматическая ширина и высота имеет больший приоритет чем изначальное значение ширины и высоты Автоматическая ширина окна (значение указывает минимальную возможную ширину) Автоматическая высота окна (значение указывает минимальную возможную высоту) Минимальная ширина и высота Вы можете ограничить максимальный развер окна, даже если используете автоматическую ширину и высоту. Минимальная ширина окна Минимальная высота окна Ширина мобильного окна
(если окно меньше указанного размера, то для него устанавливается указанное значение ширины) Дополинелеьные параметры Примечание о форме
примечание о заявке, добавляется в статистику продаж.
Функциональные названия содержат предопределённый набор скрываемых полей. Несколько функциональных названий:
  • `Callback`- Обратный звонок. Выполняется скрытие дополнительных полей. Остаются только `Имя` и `Номер телефона`. Дополнительно можно добавить параметр `data-dialog-productid` с идентификатором просматриваемого товара.
  • `Consultation` - Задать вопрос. Выполняется скрытие поля с комментарием. Добавляется текст над формой `Введите ваши контактные данные, мы с вами свяжемся и ответим на все вопросы.`. Дополнительно рекомендуется добавить параметр `data-dialog-productid` с идентификатором просматриваемого товара.
  • `Ask price` - Узнать цену. Выполняется скрытие поля с комментарием. Дополнительно рекомендуется добавить параметр `data-dialog-productid` с идентификатором просматриваемого товара.
  • `Quick order` - Быстрый заказ. Выполняется скрытие поля с комментарием, e-mail и телефоном. Дополнительно рекомендуется добавить параметр `data-dialog-productid` с идентификатором просматриваемого товара.

Вы можете указать собственные примечания, а скрывающиеся поля указать при помощи параметра `data-dialog-form-hide-fields`. Скрыть поля
Скрыть елементы в форме (список, разделитель `|`).   Готово   В конструкторе не указаны дополнительные поля: data-dialog-productid, data-dialog-product_num, data-dialog-varietyid, data-dialog-formprice, data-dialog-modify-text, data-dialog-form-autosubmit, data-dialog-form-required-class, data-dialog-form-autosubmit-replace-class, data-dialog-form-required-class-alert; Данные поля можно использовать для автозаполнения формы, передачи стоимости или идентификатора товара, указать обязательнные для заполнения поля, а также всплыващие замечания при их отсутствии. Инструкция находится ниже.



Инструкция:

Внимание! Для работы всплывающих окон с формами необходимо разместить код скрипта 1 раз. Создайте «Блок/Меню» (разметив в Шапке/Hedaer, служебных тегах или Footer сайта).
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script>

При автоматическом создании формы так же будет добавлен код (блок/меню с именем CODE_FORM_SCRIPTS_FILE) с кодом для всплывающих окон, с разными вариантами полей для отправки данных в созданную форму. Путь к файлу с кодом - <script type="text/javascript" src="/templates/scripts/code_form_scripts.js" async></script>. Если вам необходимо изменить файл, то откройте его и скопируйте код в созданный ранее Блок/Меню в теги <script>CODE</script>. Для работы встроенных функций, например, всплывающие форы в Мобильной версии, обязательно необходимо установить указанный выше код.

Пример кода кнопок для вслывающих форм:

<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="280" data-dialog-form_title="Callback" data-dialog-title="Заказать обратный звонок" data-dialog-whatform="Форма заказать обратный звонок с кнопки в ... сайта" data-dialog-buttontext="Отправить">Обратный звонок</div>

<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="490" data-dialog-form_title="Задать вопрос" data-dialog-title="Задать вопрос" data-dialog-whatform="Форма Задать вопрос с кнопки в ... сайта" data-dialog-buttontext="Отправить">Задать вопрос</div>


Изменяя или дополняя следующие значения, при отправке формы, будут указаны соответствующие данные.
Данные необходимо указывать у кнопок, вызывающих всплывающие окошки.
  • "data-dialog-form_id" - ID формы
  • "data-dialog-width" - ширина всплывающего окна
  • "data-dialog-height" - высота всплывающего окна
  • "data-dialog-title" - заголовок диалогового окна
  • "data-dialog-form_title" - примечание о заявке, добавляется в статистику продаж
  • "data-dialog-whatform" - с какой формы заявка (положение или свои данные)
  • "data-dialog-productid" - ID товара, если заявка о конкретном продукте.
  • "data-dialog-product_num" - количество добавляемого товара, если заявка о конкретном продукте.
  • "data-dialog-varietyid" - разновидность товара, если заявка о конкретном продукте.
  • "data-dialog-formprice" - цена заявки или товара
  • "data-dialog-buttontext" - текст кнопки внутри окна
  • "data-dialog-modify-text" - автозамена текста заявки (комментария). Используется для отправки дополнительной информации, которую можно предваритиельно сформировать с помощью Javascript.
  • "data-close-button" - текст кнопки закрытия окна (отображается только если указано значение)
  • "data-dialog-form-hide-fields" - Скрыть елементы в форме (список, разделитель `|`)
  • Дополнительные параметры (автозаполнение формы):
    • "data-dialog-form-autosubmit" - 1-включить
    • "data-dialog-form-required-class" - обязательные поля для заполнения (список, разделитель `|`) (**)
    • "data-dialog-form-autosubmit-replace-class" - (список, разделитель `|`) (***)
    • "data-dialog-form-required-class-alert" - сообщения об ошибке если не заполнено поле data-dialog-form-required-class (**) (список, разделитель `|`)

    • *** - Например значения полей data-dialog-form-required-class (**) будут перезаписаны найденными значениями на странице, элементами из списка data-dialog-form-autosubmit-replace-class (***).
      Если поля data-dialog-form-required-class (**) не заполнены, то всплывает сообщение указанное в поле data-dialog-form-required-class-alert.
      Данная функция полезна в том случае, когда вы хотите создать поле для заполнения, при нажатии на которое будет всплывать форма и сразу отправляться с заменой данных из созданного ранее поля.

Пример кода - code_form_scripts.js

Мои формыНазад