Only the users are allowed to enter the Central Administration. Login

Form - Popups

My FormsAdd FormForm - Popups?
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). :
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script>

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».


Result (link):



Result (span item):



Please specify options for the popup:

Form ID You need to create a form
 Class for button decoration Window Title Text of the window close button
(only displayed if a value is specified) Text for the `Submit` button; Link/button text for opening a window Window Width Window Height Auto Width and Height Automatic width and height takes precedence over the original width and height Auto-width of the window (value indicates the minimum possible width) Automatic window height (value indicates the lowest possible height) Minimal width and height You can limit the maximum opening of the window even if you are using automatic width and height. Minimal window width Minimal window height Width of the mobile window
(if the window is smaller than the specified size, then it is set to the specified width) Additional parameters Shape note
note about order added to sales statistics.
Functional names contain a predefined set of hidden fields. Several functional names:
  • `Callback`- Callback. Additional fields are hidden. Only `Name` and `Phone number` remain. Additionally, you can add the `data-dialog-productid` parameter with the identifier of the product being viewed.
  • `Consultation` - Ask a question. The comment field is hidden. Text is added above the form `Enter your contact details, we will contact you and answer all your questions.`. Additionally, it is recommended to add the `data-dialog-productid` parameter with the identifier of the product being viewed.
  • `Ask price` - Get the price. The comment field is hidden. Additionally, it is recommended to add the `data-dialog-productid` parameter with the ID of the product being viewed.
  • `Quick order` - Quick order. The field with comment, e-mail and phone is hidden. Additionally, it is recommended to add the `data-dialog-productid` parameter with the identifier of the product being viewed.

You can specify your own notes, and specify the hidden fields using the `data-dialog-form-hide-fields` parameter. Hide fields
Hide form elements (list, delimiter `|`).   Done   No additional fields specified in the constructor: data-dialog-productid, data-dialog-product_num, data-dialog-varietyid, data-dialog-formprice, data-dialog-modify-text, data-dialog-form-autosubmit, data-dialog-form-required-class, data-dialog-form-autosubmit-replace-class, data-dialog-form-required-class-alert; These fields can be used to auto-complete a form, send a cost or product ID, specify required fields, and pop-up remarks if they are missing. The instruction is below.



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).
 Code: html 
<script type="text/javascript" defer src="/templates/scripts/code_form_scripts.js" async></script>

When automatically creating a form, a code will also be added (a Block/Menu named CODE_FORM_SCRIPTS_FILE) with a code for pop-up windows, with different options for fields for sending data to the created form. The path to the file with the code is <script type="text/javascript" src="/templates/scripts/code_form_scripts.js" async></script>. If you need to change the file, open it and copy the code into the Block/Menu created earlier in tags <script>CODE</script>. For the built-in functions to work, for example, pop-up odds in the Mobile version, you must install the above code.

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-dialog-modify-text" - auto-change of the request (comment) text. Used to send additional information that can be preformed using Javascript.
  • "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

My FormsBack