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="Senden">Rückruf</div>

<div class="hotengine-form-constructor" data-dialog-form_id="XXX" data-dialog-width="370" data-dialog-height="490" data-dialog-form_title="Eine Frage stellen" data-dialog-title="Eine Frage stellen" data-dialog-whatform="Form Ask a question from a button in ... site" data-dialog-buttontext="Senden">Eine Frage stellen</div>

• "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.
• data-dialog-callback - The data-dialog-callback attribute allows you to specify the name of a function that will be executed after the popup window is opened.
  Example

  Code: html

  <a href="#" class="hotengine-script-popup" data-dialog-callback="myCustomFunction">Open</a>
  <script>
  function myCustomFunction() {
      console.log("Callback executed!");
  }
  </script>

• data-dialog-button-callback - The data-dialog-button-callback attribute allows you to specify callback functions for popup window buttons. Format: ButtonName:callbackFunctionBtn, multiple buttons are separated by commas. Functions can be defined before or after the popup is opened — they will be executed when the corresponding button is clicked, if the function exists.
  Example

  Code: html

  
  <a href="#" class="hotengine-script-popup" data-dialog-button-callback="Ok:callbackFunctionBtn1">Open</a>
  
  <script>
  window.callbackFunctionBtn1 = function() {
      console.log("Ok button clicked");
  };
  </script>