Формы


Формы

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

Поля формы можно гибко настраивать, указывать проверку на соответствие типу данных, обязательность заполнения, и многое другое.

В форме можно отравлять любые данные, а также файлы. При отправке файлов, возможно использовать массив данных, с использованием одного имени объекта. Такая функция может понадобиться при создании одного поля для прикрепления множества файлов при помощи JavaScript.




Как создать форму?

Для быстрого создания формы с автозаполнением основных полей, а также создания стиля для формы, воспользуйтесь кнопкой «Создать стандартную форму «Обратный звонок», «Задать вопрос» и др.». Такой способ позволит создать поля с присвоением заранее заданных имен для полей, которые используются для передачи данных в статистику продаж. Языки создаваемых форм вы можете выбрать после нажатия на кнопку быстрого создания формы. Стили для формы будут добавлены автоматически. Изменить стили вы можете в «Редакторе дизайна», во вкладке «CSS стили».




Как редактировать форму?

В разделе «Мои формы» вы можете увидеть список всех ранее созданных форм. Нажмите «Редактировать» для изменения форм.
Например, добавим код конверсии в форму. Откройте форму для редактирования. В пункте «Сообщение о результате» - «Успех», добавьте код конверсии, а также текст, которые будет отображаться покупателю. Например, «Данные успешно отправлены».



Как вставить форму на страницу?

Форма вставляется при помощи короткого кода «[FORM:XXX]», где XXX – ID формы.



Как создать всплывающее окно с формой?


Формы



Полный список дополнительных атрибутов при создании всплывающих окон с формами:

Создание всплывающих форм и инструкции с атрибутами




Как создать кнопку «Быстрый заказ»?


Формы
Создайте блок/меню, в котором разместите код:
 Code: JavaScript
(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 стили».
Например:
 Code: 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".

Формы
Пример.
 Code: JavaScript
(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 стили».
Например:
 Code: 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;}


Подключение платежной системы Hutko.org на Hotlist.biz
Категории магазина
Каталог статей