Формы
Формы
Форма - это раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. На платформе HotList.biz вы сможете создавать полноценные формы, с привязкой имен, id и class'ов для полей.
Данные формы можно отправить не только на ваш сайт, но и на любой сторонний сервер. Доступно использование автоответчика. В форме можно указать и тип отравляемых данных, и тип кодирования, и надписи для кнопок, и текст сообщений при ошибке или успешной обработке, и указать защитное изображение, и многое другое.
Поля формы можно гибко настраивать, указывать проверку на соответствие типу данных, обязательность заполнения, и многое другое.
В форме можно отравлять любые данные, а также файлы. При отправке файлов, возможно использовать массив данных, с использованием одного имени объекта. Такая функция может понадобиться при создании одного поля для прикрепления множества файлов при помощи JavaScript.
Как создать форму?
Для быстрого создания формы с автозаполнением основных полей, а также создания стиля для формы, воспользуйтесь кнопкой «Создать стандартную форму «Обратный звонок», «Задать вопрос» и др.». Такой способ позволит создать поля с присвоением заранее заданных имен для полей, которые используются для передачи данных в статистику продаж. Языки создаваемых форм вы можете выбрать после нажатия на кнопку быстрого создания формы. Стили для формы будут добавлены автоматически. Изменить стили вы можете в «Редакторе дизайна», во вкладке «CSS стили».Как редактировать форму?
В разделе «Мои формы» вы можете увидеть список всех ранее созданных форм. Нажмите «Редактировать» для изменения форм.Например, добавим код конверсии в форму. Откройте форму для редактирования. В пункте «Сообщение о результате» - «Успех», добавьте код конверсии, а также текст, которые будет отображаться покупателю. Например, «Данные успешно отправлены».
Как вставить форму на страницу?
Форма вставляется при помощи короткого кода «[FORM:XXX]», где XXX – ID формы.Как создать всплывающее окно с формой?

Полный список дополнительных атрибутов при создании всплывающих окон с формами:
Создание всплывающих форм и инструкции с атрибутамиКак создать кнопку «Быстрый заказ»?

Создайте блок/меню, в котором разместите код:
$(document).ready(function() {
let $l = $("meta[http-equiv='content-language']").attr("content");
const translations = {
ru: {
quickOrder: "Быстрый заказ",
order: "Заказать"
},
pl: {
quickOrder: "Szybkie zamówienie",
order: "Zamów"
},
en: {
quickOrder: "Quick Order",
order: "Order"
},
uk: {
quickOrder: "Швидке замовлення",
order: "Замовити"
},
fr: {
quickOrder: "Commande rapide",
order: "Commander"
},
de: {
quickOrder: "Schnelle Bestellung",
order: "Bestellen"
},
es: {
quickOrder: "Pedido rápido",
order: "Pedir"
}
};
const lang = translations[$l] || translations.en;
$(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon").after(`
<div class="button_quickorder hotengine-form-constructor"
data-dialog-form_id="XXX"
data-dialog-width="370"
data-dialog-height="300"
data-mobile-width="300"
data-dialog-min-height="300"
data-dialog-min-width="300"
data-dialog-form_title="${lang.quickOrder}"
data-dialog-title="${lang.quickOrder}"
data-dialog-whatform="${lang.quickOrder}: ${$("#hotengine-content-shop .headh h1").text()}"
data-dialog-modify-text=""
data-dialog-buttontext="${lang.order}"
data-dialog-productid="${$("#page_content .hotengine-marking").attr("data-hotengine-marking-shop_catalog_page_id")}"
data-dialog-formprice="${$("#page_content .hotengine-marking[data-hotengine-marking-type='shop_catalog_page']").attr("data-hotengine-marking-shop_catalog_page_price")}"
data-dialog-form-hide-fields=".my_form_form_text, .my_form_form_name, .my_form_form_email">
${lang.quickOrder}
</div>
`);
});
XXX - ID созданной ранее формы.
Установите галочку «JavaScript», таким образом код из примера выше, автоматически будет сохраняться в файл и кэшироваться браузером, для ускорения загрузки. Если галочка не установлена, обязательно добавляйте тег <script>CODE</script>
В данном примере указано название для всплывающего окна, а также передача данных о товаре, в котором осуществляется нажатие. Код осуществит добавление кнопки после элемента «.hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon» - кнопка «Добавить в корзину». Class который осуществляет вызов всплывающей кнопки - «hotengine-form-constructor». Дополнительно, для последующего создания стиля кнопки, добавлен class «button_quickorder».
Стиль кнопки вы можете создать в «Редакторе дизайна», во вкладке «CSS стили».
Например:
.button_quickorder{display:inline-block;
text-decoration:none;
background:#FFFFFF;
padding:0px;
line-height:44px;
white-space:nowrap;
text-align:center;
height:auto;
margin:5px;
width:160px;
border:1px solid #dedede;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}

Вы можете скрывать необходимые поля после вызова всплывающей формы (параметр «data-dialog-form-hide-fields»), включить обязательные поля для заполнения (параметр «data-dialog-form-required-class») и даже включить автоматическую отправку формы (параметр «data-dialog-form-autosubmit»).
Как создать поле и кнопку для автоотправки данных в форму?
Вы можете добавить элемент <input>, для его заполнения без предварительного вызова всплывающего окна, и выполнить автоотправку формы, с использованием данных из данного элемента, с помощью дополнительных параметров:"data-dialog-form-autosubmit","data-dialog-form-required-class","data-dialog-form-autosubmit-replace-class","data-dialog-form-required-class-alert".
Пример.
$(document).ready(function() {
let $l = $("meta[http-equiv='content-language']").attr("content");
const translations = {
ru: {
callbackPlaceholder: "Введите номер телефона",
quickOrder: "Заказ в один клик",
order: "Отправить",
quickOrderText: "Быстрый заказ",
enterPhoneAlert: "Введите ваш номер телефона"
},
pl: {
callbackPlaceholder: "Wprowadź numer telefonu",
quickOrder: "Zamówienie jednym kliknięciem",
order: "Wyślij",
quickOrderText: "Szybkie zamówienie",
enterPhoneAlert: "Wprowadź swój numer telefonu"
},
en: {
callbackPlaceholder: "Enter phone number",
quickOrder: "One-click order",
order: "Send",
quickOrderText: "Quick order",
enterPhoneAlert: "Enter your phone number"
},
uk: {
callbackPlaceholder: "Введіть номер телефону",
quickOrder: "Замовлення в один клік",
order: "Відправити",
quickOrderText: "Швидке замовлення",
enterPhoneAlert: "Введіть ваш номер телефону"
},
fr: {
callbackPlaceholder: "Entrez le numéro de téléphone",
quickOrder: "Commande en un clic",
order: "Envoyer",
quickOrderText: "Commande rapide",
enterPhoneAlert: "Entrez votre numéro de téléphone"
},
de: {
callbackPlaceholder: "Geben Sie die Telefonnummer ein",
quickOrder: "Bestellung mit einem Klick",
order: "Senden",
quickOrderText: "Schnelle Bestellung",
enterPhoneAlert: "Geben Sie Ihre Telefonnummer ein"
},
es: {
callbackPlaceholder: "Introduce el número de teléfono",
quickOrder: "Pedido en un clic",
order: "Enviar",
quickOrderText: "Pedido rápido",
enterPhoneAlert: "Introduzca su número de teléfono"
}
};
const lang = translations[$l] || translations.en;
$(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon").after(`
<div class="button_callback_input">
<input type="text" name="input_callback" class="input_callback" placeholder="${lang.callbackPlaceholder}">
<div class="button_callback required_data_hotengine-form-constructor hotengine-form-constructor"
data-dialog-form_id="<strong>XXX</strong>"
data-dialog-width="370"
data-dialog-height="250"
data-mobile-width="300"
data-dialog-min-width="300"
data-dialog-form_title="${lang.quickOrder} ${$(".hotengine-shop-product-title").text()}"
data-dialog-title="${lang.quickOrder}"
data-dialog-whatform="${lang.quickOrderText} ${$(".hotengine-shop-product-title").text()}"
data-dialog-modify-text=""
data-dialog-buttontext="${lang.order}"
data-dialog-varietyid="${$("#page_content .hotengine-shop-product-cart_icon").attr("data-variety")}"
data-dialog-productid="${$("#page_content .hotengine-marking [data-hotengine-marking-type='shop_catalog_page']").attr("data-hotengine-marking-shop_catalog_page_id")}"
data-dialog-formprice="${$("#page_content .hotengine-marking [data-hotengine-marking-type='shop_catalog_page']").attr("data-hotengine-marking-shop_catalog_page_price")}"
data-dialog-form-autosubmit="1"
data-dialog-form-required-class=".input_callback"
data-dialog-form-autosubmit-replace-class=".form_phone"
data-dialog-form-required-class-alert="${lang.enterPhoneAlert}"
data-dialog-form-hide-fields="<strong>.my_form_form_text, .my_form_form_name, .my_form_form_email</strong>">
</div>
</div>
`);
});
XXX - ID созданной ранее формы.
Стиль кнопки вы можете создать в «Редакторе дизайна», во вкладке «CSS стили».
Например:
.hotengine-shop-product-desc-block .button_callback_input {
vertical-align:top;
display: inline-block;
text-align:left;
line-height: 22px;
width:97%; max-width:260px;
position:relative;
margin:5px 10px 20px 0px;
-webkit-border-radius: 24px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 24px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 24px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.hotengine-shop-product-desc-block .button_callback_input input { line-height: 31px; padding: 5px 0px;
-webkit-border-radius: 24px;
-webkit-border-top-left-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius: 24px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
border-radius: 24px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
text-indent:10px;
width:100%;
border: 2px solid #b7b7b7;
vertical-align:top;
}
.hotengine-shop-product-desc-block .button_callback{ background:#fff; border:2px solid #b7b7b7; border-radius:50%; position:absolute; right:0px; top: 0px; width:45px; height:45px; vertical-align:top;}
.hotengine-shop-product-desc-block .button_callback:after { width:45px; height:45px; content:""; background:#555; display:inline-block; position:absolute; left:-1px; top:-1px; -webkit-mask:url("/templates/styles/shop_callback_icon/button_callback.svg") no-repeat center center; -webkit-mask-size:29px; cursor:pointer;}
.hotengine-shop-product-desc-block .button_callback:active { top:1px;}