Form - Popups
This script is not installed by default to increase performance and make sites more flexible.
After installing the script, you can generate a link for the popup window.
We recommend that you insert this code in the «Block / Menu» with your other scripts.
Attention! When creating a Standard form in a simplified way, this code will be set automatically, in the «Block / Menu» named «CODE_FORM_SCRIPT_FILE».
Instruction:Attention! For pop-up windows to work with forms, you need to place the script code 1 time. Create a «Block/Menu» (by marking in the Header / Hedaer, service tags or the Footer of the site).
Sample Button Code for Submit Forms:
<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="280" data-dialog-form_title="Callback" data-dialog-title="Callback request" data-dialog-whatform="Form to order a call back from a button in ... site" data-dialog-buttontext="Submit">Callback</div>
<div class="form_constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="490" data-dialog-form_title="Ask a question" data-dialog-title="Ask a question" data-dialog-whatform="Form Ask a question from a button in ... site" data-dialog-buttontext="Submit">Ask a question</div>
By changing or adding the following values, when submitting the form, the corresponding data will be indicated.
The data must be specified for buttons that cause pop-up windows.
- "data-dialog-form_id" - Form ID
- "data-dialog-width" - popup width
- "data-dialog-height" - popup height
- "data-dialog-title" - dialog title
- "data-dialog-form_title" - note about order added to sales statistics
- "data-dialog-whatform" - from which form the application (position or personal data)
- "data-dialog-productid" - Item ID, if the request is for a specific product.
- "data-dialog-product_num" - quantity of added product, if the request is about a specific product.
- "data-dialog-varietyid" - kind of product, if the request is for a specific product.
- "data-dialog-formprice" - order or product price
- "data-dialog-buttontext" - text of the button inside the window
- "data-close-button" - text of the window close button (displayed only if a value is specified)
- "data-dialog-form-hide-fields" - Hide form elements (list, delimiter `|`)
Additional options (form autocomplete):
- "data-dialog-form-autosubmit" - 1-enable
- "data-dialog-form-required-class" - required fields to fill in (list, delimiter `|`) (**)
- "data-dialog-form-autosubmit-replace-class" - (list, separator `|`) (***)
- "data-dialog-form-required-class-alert" - error messages if the data-dialog-form-required-class (**) field is not filled (list, separator `|`)
*** - For example, data-dialog-form-required-class (**) field values will be overwritten with found values on the page, items from the data-dialog-form-autosubmit-replace-class (*) list **).
If the data-dialog-form-required-class (**) fields are not filled, then the message specified in the data-dialog-form-required-class-alert field pops up.
This function is useful when you want to create a field for filling, when you click on it, the form will pop up and be sent immediately with the replacement of data from the previously created field.
Sample Code - code_form_scripts.js