HotList.biz
Platform news Step by Step Video:How to make a website? Templates
ENENPLRUUA [Logout]
SAAS Platform News HotList.biz CMS
Updates on the platform for creating sites and online stores HotList.biz

Forms


Forms

A form is a section of a document that allows the user to enter information for later processing by the system. On the HotList.biz platform, you can create full-fledged forms, with binding of names, id and class'ov for fields.

Form data can be sent not only to your site, but also to any third-party server. An autoresponder is available. In the form, you can specify the type of data to be sent, and the type of encoding, and labels for the buttons, and the text of messages in case of an error or successful processing, and specify a security image, and much more.

Form fields can be flexibly configured, check for compliance with the data type, mandatory filling, and much more.

In the form, you can poison any data, as well as files. When sending files, it is possible to use an array of data using a single object name. Such a function may be needed when creating a single field for attaching multiple files using JavaScript.



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

To quickly create a form with auto-completion of the main fields, as well as create a style for the form, use the button "Create a standard form "Callback", "Ask a question", etc.". This method will allow you to create fields with predefined names for the fields that are used to transfer data to sales statistics. You can select the languages of the created forms after clicking the quick form creation button. Styles for the form will be added automatically. You can change the styles in the "Design Editor", in the "CSS Styles" tab.



How to edit a form?

In the "My Forms" section, you can see a list of all previously created forms. Click "Edit" to change the forms.
For example, let's add a conversion code to a form. Open the form for editing. In the "Result Message" - "Success" section, add the conversion code, as well as the text that will be displayed to the buyer. For example, "Data sent successfully".


How to insert a form on the page?

The form is inserted using the short code "[FORM:XXX]", where XXX is the ID of the form.


How to create a popup window with a form?




When the form is automatically created, a code will also be added (block / menu named CODE_FORM_SCRIPTS_FILE) with code for pop-up windows, with different field options for sending data to the created form. Path to the code file -
 Code: HTML
<script type="text/javascript" src="/templates/scripts/code_form_scripts.js"></script>

If this does not happen, then create such a block and place the code from the example above. For built-in functions to work, for example, pop-up handicaps in the Mobile version, it is necessary to install the above code.
If you need to change the file, then open it and copy the code to the previously created Block/Menu by checking the "JavaScript" checkbox.
This code allows you to create buttons with pop-up forms, specify the fields to hide, the title of the dialog box, and also replace the text inside the form, if necessary.

Full list of additional attributes when creating popup windows with forms:

Creating popup forms and instructions with attributes



How to create a Quick Order button?



Create a block/menu where you mark up the code:
 Code: Javascript
$(document).ready(function(){
$(".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon").after('<div class="button_quickorder 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="Quick order" data-dialog-title="Quick order" data-dialog-whatform="Quick order: '+$("#hotengine-content-shop .headh h1").text()+'" data-dialog-modify-text="" data-dialog-buttontext="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">Quick order</div>'); 
});



XXX - ID of the previously created form.
Check the "JavaScript" box, so the code from the example above will automatically be saved to a file and cached by the browser to speed up loading. If the checkbox is not checked, be sure to add the tag <script>CODE</script>
In this example, the name for the pop-up window is specified, as well as the transfer of data about the product in which the click is made. The code will add a button after the ".hotengine-shop-product-desc-block .hotengine-shop-product-cart_icon" element - the "Add to Cart" button. The class that calls the popup button is "form_constructor". Additionally, for the subsequent creation of the style of the button, the class "button_quickorder" is added.

You can style the button in the Design Editor, in the CSS Styles tab.
For example:
 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;
}



You can hide required fields after the popup form has been called ("data-dialog-form-hide-fields" parameter), enable required fields ("data-dialog-form-required-class" parameter), and even enable automatic form submission ( parameter "data-dialog-form-autosubmit").

Как создать поле и кнопку для автоотправки данных в форму?

You can add an <input> element to populate it without first calling the pop-up window, and auto-submit the form using the data from this element using additional parameters: "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="Enter phone number"><div class="button_callback required_data_form_constructor 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="One click order '+$(".hotengine-shop-product-title").text()+'" data-dialog-title="One click order" data-dialog-whatform="Quick order '+$(".hotengine-shop-product-title").text()+'" data-dialog-modify-text="" data-dialog-buttontext="Send" 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="Enter your phone number" data-dialog-form-hide-fields=".my_form_form_text, .my_form_form_name, .my_form_form_email"></div></div>');
});

XXX - ID of the previously created form.
You can style the button in the Design Editor, in the CSS Styles tab.
For example:
 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;
}

Video instructions for importing goods to Hotlist.biz.
Online payment
Page Management