Формы

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

Данные формы можно отправить не только на ваш сайт, но и на любой сторонний сервер. Доступно использование автоответчика. В форме можно указать и тип отравляемых данных, и тип кодирования, и надписи для кнопок, и текст сообщений при ошибке или успешной обработке, и указать защитное изображение, и многое другое.

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

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

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

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

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

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

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

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

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

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

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

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

Создайте блок/меню, в котором разместите код:

Code: Javascript

$(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 стили».
Например:

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

$(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 стили».
Например:

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;}

Видеоинструкция по импорту товаров на Hotlist.biz.
Добавление товаров
Оплата онлайн

Мы на Facebook