Форми

Форми

Форма — це розділ документа, який дозволяє користувачеві вводити інформацію для подальшої обробки системою. На платформі BooStore.pro ви зможете створювати повноцінні форми з прив'язкою імен, 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 [data-hotengine-marking-type]");
        const productPriceMarking = document.querySelector("#page_content [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 [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;}


▶️ Структура платформи BooStore.pro — відеоогляд: основи розробки сайтів, робота з віджетами та елементами
Доставка
Блок/Меню