Формы
Формы
Форма - это раздел документа, позволяющий пользователю вводить информацию для последующей обработки системой. На платформе HotList.biz вы сможете создавать полноценные формы, с привязкой имен, id и class'ов для полей.
Данные формы можно отправить не только на ваш сайт, но и на любой сторонний сервер. Доступно использование автоответчика. В форме можно указать и тип отравляемых данных, и тип кодирования, и надписи для кнопок, и текст сообщений при ошибке или успешной обработке, и указать защитное изображение, и многое другое.
Поля формы можно гибко настраивать, указывать проверку на соответствие типу данных, обязательность заполнения, и многое другое.
В форме можно отравлять любые данные, а также файлы. При отправке файлов, возможно использовать массив данных, с использованием одного имени объекта. Такая функция может понадобиться при создании одного поля для прикрепления множества файлов при помощи JavaScript.
Как создать форму?
Для быстрого создания формы с автозаполнением основных полей, а также создания стиля для формы, воспользуйтесь кнопкой «Создать стандартную форму «Обратный звонок», «Задать вопрос» и др.». Такой способ позволит создать поля с присвоением заранее заданных имен для полей, которые используются для передачи данных в статистику продаж. Языки создаваемых форм вы можете выбрать после нажатия на кнопку быстрого создания формы. Стили для формы будут добавлены автоматически. Изменить стили вы можете в «Редакторе дизайна», во вкладке «CSS стили».Как редактировать форму?
В разделе «Мои формы» вы можете увидеть список всех ранее созданных форм. Нажмите «Редактировать» для изменения форм.Например, добавим код конверсии в форму. Откройте форму для редактирования. В пункте «Сообщение о результате» - «Успех», добавьте код конверсии, а также текст, которые будет отображаться покупателю. Например, «Данные успешно отправлены».
Как вставить форму на страницу?
Форма вставляется при помощи короткого кода «[FORM:XXX]», где XXX – ID формы.Как создать всплывающее окно с формой?
Полный список дополнительных атрибутов при создании всплывающих окон с формами:
Создание всплывающих форм и инструкции с атрибутамиКак создать кнопку «Быстрый заказ»?
Создайте блок/меню, в котором разместите код:
Code: Javascript
$(document).ready(function(){
$(".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="Быстрый заказ" data-dialog-title="Быстрый заказ" data-dialog-whatform="Быстрый заказ: '+$("#hotengine-content-shop .headh h1").text()+'" data-dialog-modify-text="" data-dialog-buttontext="Заказать" 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">Быстрый заказ</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(){
$(".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="Введите номер телефона"><div class="button_callback required_data_hotengine-form-constructor hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="250" data-mobile-width="300" data-dialog-min-width="300" data-dialog-form_title="Заказ в один клик '+$(".hotengine-shop-product-title").text()+'" data-dialog-title="Заказ в один клик" data-dialog-whatform="Быстрый заказ '+$(".hotengine-shop-product-title").text()+'" data-dialog-modify-text="" data-dialog-buttontext="Отправить" 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="Введите ваш номер телефона" data-dialog-form-hide-fields=".my_form_form_text, .my_form_form_name, .my_form_form_email"></div></div>');
});XXX - ID созданной ранее формы.
Стиль кнопки вы можете создать в «Редакторе дизайна», во вкладке «CSS стили».
Например:
Code: CSS
.hotengine-shop-product-desc-block .button_callback_input { display: inline-block;
text-align:left;
line-height: 22px;
width:97%;
max-width:300px;
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: 27px;
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;
}
.hotengine-shop-product-desc-block .button_callback { position:absolute;
right:0px;
bottom: 0px;
}
.hotengine-shop-product-desc-block .button_callback { position:absolute;
width:41px;
height:41px;
background:url(/templates/styles/shop_callback_icon/button_callback.png) no-repeat;
cursor:pointer;
}
.hotengine-shop-product-desc-block.button_callback_input:active { top:1px;
}