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

Form - Popups

My FormsAdd FormForm - PopupsPopups?



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 Fix window title Close the window when clicking outside of it 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:


Sample Button Code for Submit Forms:

<div class="hotengine-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="hotengine-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-header-fix" - Close the window when clicking outside of it
  • "data-close-overlay" - Enable/Disable closing the window when clicking outside of it (additional attribute. Values: «1» (enable), «0» (disable)).
  • "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 - hotengine-script-forms-popup.js

My FormsBack