Формы
Форма - это раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. На платформе HotList.biz вы сможете создавать полноценные формы, с привязкой имен, id и class'ов для полей.

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

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

Создайте блок/меню, в котором разместите код:
(function(){
document.addEventListener("DOMContentLoaded", function() {
let lMeta = document.querySelector("meta[http-equiv='content-language']");
let $l = lMeta ? lMeta.getAttribute("content") : "en";
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;
const cartIcons = document.querySelectorAll(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon");
cartIcons.forEach(icon => {
const headH1 = document.querySelector("#hotengine-content-shop .headh h1");
const productMarking = document.querySelector("#page_content .hotengine-marking");
const productPriceMarking = document.querySelector("#page_content .hotengine-marking[data-hotengine-marking-type='shop_catalog_page']");
const div = document.createElement("div");
div.className = "button_quickorder hotengine-form-constructor";
div.setAttribute("data-dialog-form_id", "XXX");
div.setAttribute("data-dialog-width", "370");
div.setAttribute("data-dialog-height", "300");
div.setAttribute("data-mobile-width", "300");
div.setAttribute("data-dialog-min-height", "300");
div.setAttribute("data-dialog-min-width", "300");
div.setAttribute("data-dialog-form_title", lang.quickOrder);
div.setAttribute("data-dialog-title", lang.quickOrder);
div.setAttribute("data-dialog-whatform", `${lang.quickOrder}: ${headH1 ? headH1.textContent : ""}`);
div.setAttribute("data-dialog-modify-text", "");
div.setAttribute("data-dialog-buttontext", lang.order);
div.setAttribute("data-dialog-productid", productMarking ? productMarking.getAttribute("data-hotengine-marking-shop_catalog_page_id") : "");
div.setAttribute("data-dialog-formprice", productPriceMarking ? productPriceMarking.getAttribute("data-hotengine-marking-shop_catalog_page_price") : "");
div.setAttribute("data-dialog-form-hide-fields", ".my_form_form_text, .my_form_form_name, .my_form_form_email");
div.textContent = lang.quickOrder;
icon.insertAdjacentElement("afterend", 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".
Пример.
(function(){
document.addEventListener("DOMContentLoaded", function() {
let lMeta = document.querySelector("meta[http-equiv='content-language']");
let $l = lMeta ? lMeta.getAttribute("content") : "en";
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;
const cartIcons = document.querySelectorAll(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon");
const productTitle = document.querySelector(".hotengine-shop-product-title");
const productMarking = document.querySelector("#page_content .hotengine-marking [data-hotengine-marking-type='shop_catalog_page']");
const varietyEl = document.querySelector("#page_content .hotengine-shop-product-cart_icon");
cartIcons.forEach(icon => {
const divWrapper = document.createElement("div");
divWrapper.className = "button_callback_input";
const input = document.createElement("input");
input.type = "text";
input.name = "input_callback";
input.className = "input_callback";
input.placeholder = lang.callbackPlaceholder;
const buttonDiv = document.createElement("div");
buttonDiv.className = "button_callback required_data_hotengine-form-constructor hotengine-form-constructor";
buttonDiv.setAttribute("data-dialog-form_id", "XXX");
buttonDiv.setAttribute("data-dialog-width", "370");
buttonDiv.setAttribute("data-dialog-height", "250");
buttonDiv.setAttribute("data-mobile-width", "300");
buttonDiv.setAttribute("data-dialog-min-width", "300");
buttonDiv.setAttribute("data-dialog-form_title", `${lang.quickOrder} ${productTitle ? productTitle.textContent : ""}`);
buttonDiv.setAttribute("data-dialog-title", lang.quickOrder);
buttonDiv.setAttribute("data-dialog-whatform", `${lang.quickOrderText} ${productTitle ? productTitle.textContent : ""}`);
buttonDiv.setAttribute("data-dialog-modify-text", "");
buttonDiv.setAttribute("data-dialog-buttontext", lang.order);
buttonDiv.setAttribute("data-dialog-varietyid", varietyEl ? varietyEl.getAttribute("data-variety") : "");
buttonDiv.setAttribute("data-dialog-productid", productMarking ? productMarking.getAttribute("data-hotengine-marking-shop_catalog_page_id") : "");
buttonDiv.setAttribute("data-dialog-formprice", productMarking ? productMarking.getAttribute("data-hotengine-marking-shop_catalog_page_price") : "");
buttonDiv.setAttribute("data-dialog-form-autosubmit", "1");
buttonDiv.setAttribute("data-dialog-form-required-class", ".input_callback");
buttonDiv.setAttribute("data-dialog-form-autosubmit-replace-class", ".form_phone");
buttonDiv.setAttribute("data-dialog-form-required-class-alert", lang.enterPhoneAlert);
buttonDiv.setAttribute("data-dialog-form-hide-fields", ".my_form_form_text, .my_form_form_name, .my_form_form_email");
divWrapper.appendChild(input);
divWrapper.appendChild(buttonDiv);
icon.insertAdjacentElement("afterend", divWrapper);
});
});
})();
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;}