\r\n \r\n
\r\n `;\r\n break;\r\n\r\n case 'hidden':\r\n fieldHtml += `\r\n \r\n `;\r\n break;\r\n\r\n case 'textarea':\r\n fieldHtml += `\r\n \r\n ![\"${field.label}\"](\"${field.src}\")
\r\n
\r\n \r\n ${getLabel(field)}\r\n \r\n
\r\n `;\r\n break;\r\n\r\n case 'file':\r\n fieldHtml += `\r\n \r\n ${getLabel(field)}\r\n \r\n
\r\n `;\r\n break;\r\n\r\n case 'heading':\r\n fieldHtml += `\r\n \r\n <${field.headingtype} class=\"${field.className}\">${field.content}\r\n
\r\n `;\r\n break;\r\n \r\n case 'label':\r\n fieldHtml += `\r\n \r\n \r\n
\r\n `;\r\n break;\r\n case 'link':\r\n fieldHtml += `\r\n \r\n ${getLabel(field)}\r\n ${field.content}\r\n
\r\n `;\r\n break;\r\n case 'video':\r\n fieldHtml += `\r\n \r\n \r\n ${field.content}\r\n \r\n
\r\n `;\r\n break;\r\n case 'audio':\r\n fieldHtml += `\r\n \r\n \r\n ${field.content}\r\n \r\n
\r\n `;\r\n break;\r\n\r\n case 'iframe':\r\n fieldHtml += `\r\n \r\n \r\n ${field.content}\r\n \r\n
\r\n `;\r\n break;\r\n\r\n case 'esignature':\r\n fieldHtml += `\r\n \r\n ${getLabel(field)}\r\n
\r\n `;\r\n break;\r\n\r\n // Never change the class name from editor sf-turnstile-container \r\n case 'cloudflare': \r\n fieldHtml += `\r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n `;\r\n break;\r\n\r\n case 'customcaptcha':\r\n // Generate two random values and an operator\r\n const value1 = Math.floor(Math.random() * 10) + 1;\r\n const value2 = Math.floor(Math.random() * 10) + 1;\r\n const operators = ['+', '-', '*'];\r\n const operator = operators[Math.floor(Math.random() * operators.length)];\r\n \r\n // Calculate the correct answer\r\n let correctAnswer;\r\n switch (operator) {\r\n case '+': correctAnswer = value1 + value2; break;\r\n case '-': correctAnswer = value1 - value2; break;\r\n case '*': correctAnswer = value1 * value2; break;\r\n default: break;\r\n }\r\n \r\n fieldHtml += `\r\n \r\n
\r\n \r\n ${getLabel(field)}\r\n
\r\n `;\r\n break;\r\n\r\n case 'checkbox':\r\n const isRequired = field.required === true || field.required === \"true\";\r\n let requiredIndicator = isRequired ? '*' : '';\r\n\r\n if (field.toggle === 'true') {\r\n // Render toggle checkbox\r\n fieldHtml += `\r\n \r\n ${value1} ${operator} ${value2} = \r\n \r\n \r\n
\r\n \r\n \r\n
`;\r\n } else {\r\n // Render standard checkboxes\r\n fieldHtml += `\r\n \r\n `;\r\n field.options.forEach((option) => {\r\n fieldHtml += `\r\n
`;\r\n }\r\n break;\r\n \r\n case 'radio':\r\n const radioIsRequired = field.required === true || field.required === \"true\";\r\n let radioRequiredIndicator = radioIsRequired ? '*' : '';\r\n\r\n fieldHtml += `\r\n \r\n \r\n \r\n
`;\r\n });\r\n fieldHtml += `\r\n \r\n `;\r\n field.options.forEach((option) => {\r\n fieldHtml += `\r\n
`;\r\n break;\r\n\r\n case 'select':\r\n fieldHtml += `\r\n \r\n
`;\r\n });\r\n fieldHtml += `\r\n \r\n ${getLabel(field)}\r\n \r\n
\r\n `;\r\n break;\r\n\r\n case 'submit':\r\n fieldHtml += `\r\n \r\n \r\n
\r\n `;\r\n hasSubmitButton = true;\r\n break;\r\n\r\n case 'number':\r\n fieldHtml += `\r\n \r\n ${getLabel(field)}\r\n \r\n
\r\n `;\r\n break;\r\n\r\n // Handle standard input types\r\n case 'text':\r\n case 'number':\r\n case 'email':\r\n case 'button':\r\n case 'color':\r\n case 'date':\r\n case 'datetime-local':\r\n case 'month':\r\n case 'password':\r\n case 'range':\r\n case 'reset':\r\n case 'search':\r\n case 'tel':\r\n case 'time':\r\n case 'url':\r\n fieldHtml += `\r\n \r\n ${getLabel(field)}\r\n \r\n
\r\n `;\r\n break;\r\n\r\n default:\r\n break;\r\n }\r\n\r\n return fieldHtml;\r\n }\r\n \r\n // Function to get theme-specific styles - mainly its used here but maxium style maintain from frontend.scss \r\n function getThemeStyles(theme) {\r\n switch (theme) {\r\n case 'theme-1':\r\n return `\r\n \r\n `;\r\n \r\n case 'theme-2':\r\n return `\r\n \r\n `;\r\n case 'theme-3':\r\n return `\r\n \r\n `;\r\n case 'theme-4':\r\n return `\r\n \r\n `;\r\n case 'theme-5':\r\n return `\r\n \r\n `;\r\n case 'theme-6':\r\n return `\r\n \r\n `;\r\n case 'theme-7':\r\n return `\r\n \r\n `;\r\n \r\n default:\r\n return '';\r\n }\r\n }\r\n}\r\n\r\n\r\n /**\r\n * Load Form and new page break add.\r\n * Load Form with page break\r\n */\r\n\r\n document.addEventListener('DOMContentLoaded', function () {\r\n var formContainers = document.querySelectorAll('.simple_form_container');\r\n\r\n formContainers.forEach(function (container) {\r\n var formId = container.getAttribute('data-form-id');\r\n var formTheme = container.getAttribute('data-form-theme');\r\n // console.log(formTheme)\r\n var nonce = container.getAttribute('data-nonce');\r\n var cf7 = container.getAttribute('data-cf7');\r\n // var markupId = container.querySelector('.simple_form_loader').id;\r\n var markupId = '';\r\n var simpleFormLoader = container.querySelector('.simple_form_loader');\r\n if (simpleFormLoader) {\r\n var markupId = simpleFormLoader.id;\r\n }\r\n var submitBtn = container.querySelector('.submit-button');\r\n\r\n var isFloatingForm = container.querySelector('.floating-form-container') !== null;\r\n // console.log(isFloatingForm);\r\n\r\n var theme = isFloatingForm ? 'theme-off' : formTheme; // 1 to 7\r\n // var theme = isFloatingForm ? 'theme-off' : 'theme-7'; // 1 to 7\r\n\r\n fetch(front_end_data.admin_ajax + '?action=simpleform_table_html&nonce=' + nonce + '&id=' + formId + '&iscf7=' + cf7)\r\n .then(function (response) {\r\n if (!response.ok) {\r\n throw new Error('Network response was not ok');\r\n }\r\n return response.json();\r\n })\r\n .then(function (data) {\r\n // console.log(data.data.cf7_render)\r\n if(cf7 === 'false'){\r\n const code = document.getElementById(markupId);\r\n const formData = data.data.table_settings;\r\n const isPro = front_end_data.isProActive; \r\n const renderedFormHTML = generateRenderedForm(formData, isPro, theme);\r\n code.innerHTML = renderedFormHTML;\r\n\r\n /**\r\n * Initilize all required function for fields \r\n */\r\n\r\n //Signature \r\n canvasSignature(code);\r\n\r\n // Set up reset button click handlers\r\n setupResetButtons(code);\r\n\r\n // Initialize the form slider : Keep it below of all \r\n initializeFormSlider(code, submitBtn);\r\n\r\n }\r\n // No need to render through JS as direct shortcode used to render \r\n /* else{\r\n const code = document.getElementById(markupId);\r\n const formData = data.data.cf7_render;\r\n code.innerHTML = formData;\r\n } */\r\n\r\n })\r\n .catch(function (error) {\r\n // console.log('SForm', formId, 'Error:', error.message);\r\n });\r\n });\r\n});\r\n\r\n/**\r\n * Signature \r\n */\r\n\r\nfunction canvasSignature(formContainer) {\r\n var pages = formContainer.querySelectorAll('.page');\r\n\r\n pages.forEach(function (page) {\r\n const signatureCanvases = page.querySelectorAll('.signature-canvas');\r\n signatureCanvases.forEach(function (canvas) {\r\n const context = canvas.getContext('2d');\r\n let isDrawing = false;\r\n\r\n // Handle mouse events\r\n canvas.addEventListener('mousedown', function (e) {\r\n isDrawing = true;\r\n drawStart(e, context);\r\n });\r\n\r\n canvas.addEventListener('mousemove', function (e) {\r\n if (isDrawing) {\r\n draw(e, context);\r\n }\r\n });\r\n\r\n canvas.addEventListener('mouseup', function () {\r\n if (isDrawing) {\r\n isDrawing = false;\r\n drawEnd(context);\r\n }\r\n });\r\n\r\n canvas.addEventListener('mouseout', function () {\r\n if (isDrawing) {\r\n isDrawing = false;\r\n drawEnd(context);\r\n }\r\n });\r\n\r\n // Handle touch events\r\n canvas.addEventListener('touchstart', function (e) {\r\n e.preventDefault();\r\n isDrawing = true;\r\n const touch = e.touches[0];\r\n const simulatedEvent = new MouseEvent('mousedown', {\r\n clientX: touch.clientX,\r\n clientY: touch.clientY\r\n });\r\n canvas.dispatchEvent(simulatedEvent);\r\n });\r\n\r\n canvas.addEventListener('touchmove', function (e) {\r\n e.preventDefault();\r\n if (isDrawing) {\r\n const touch = e.touches[0];\r\n const simulatedEvent = new MouseEvent('mousemove', {\r\n clientX: touch.clientX,\r\n clientY: touch.clientY\r\n });\r\n canvas.dispatchEvent(simulatedEvent);\r\n }\r\n });\r\n\r\n canvas.addEventListener('touchend', function () {\r\n e.preventDefault();\r\n if (isDrawing) {\r\n isDrawing = false;\r\n drawEnd(context);\r\n }\r\n });\r\n\r\n canvas.addEventListener('touchcancel', function () {\r\n e.preventDefault();\r\n if (isDrawing) {\r\n isDrawing = false;\r\n drawEnd(context);\r\n }\r\n });\r\n });\r\n });\r\n}\r\n\r\n\r\nfunction drawStart(e, context) {\r\n context.beginPath();\r\n draw(e, context);\r\n}\r\n\r\nfunction drawEnd(context) {\r\n context.closePath();\r\n}\r\n\r\nfunction draw(e, context) {\r\n const rect = e.target.getBoundingClientRect();\r\n const mouseX = e.clientX - rect.left;\r\n const mouseY = e.clientY - rect.top;\r\n\r\n context.lineWidth = 2;\r\n context.lineCap = 'round';\r\n\r\n context.lineTo(mouseX, mouseY);\r\n context.stroke();\r\n context.moveTo(mouseX, mouseY);\r\n}\r\n\r\n\r\n/**\r\n * \r\n * Reset Canvas\r\n */\r\n\r\nfunction setupResetButtons(formContainer) {\r\n const resetButtons = formContainer.querySelectorAll('.reset-signature');\r\n // console.log(resetButtons)\r\n resetButtons.forEach(function (button) {\r\n button.addEventListener('click', function () {\r\n const canvasId = button.getAttribute('data-canvas-id');\r\n resetSignatureCanvas(canvasId);\r\n });\r\n });\r\n}\r\n\r\nfunction resetSignatureCanvas(canvasId) {\r\n\r\n const canvas = document.getElementById(canvasId);\r\n const context = canvas.getContext('2d');\r\n \r\n // Clear the canvas\r\n context.clearRect(0, 0, canvas.width, canvas.height);\r\n\r\n // Additional code for resetting any other related state or variables\r\n}\r\n\r\n/**\r\n * \r\n Slider form for next and prev page\r\n */\r\nfunction initializeFormSlider(formContainer, submitBtn) {\r\n\r\n var pages = formContainer.querySelectorAll('.page');\r\n var currentPage = 1;\r\n\r\n // console.log(formContainer)\r\n // console.log(\"initializeFormSlider is running!\");\r\n\r\n function showPage(pageNumber) {\r\n pages.forEach(function (page) {\r\n page.style.display = 'none';\r\n });\r\n\r\n var currentPageElement = formContainer.querySelector('.page[data-page=\"' + pageNumber + '\"]');\r\n if (currentPageElement) {\r\n currentPageElement.style.display = 'block';\r\n }\r\n\r\n // Toggle the visibility of the submit button based on the presence of the next button.\r\n var isNext = currentPageElement.querySelector('.next-btn') !== null;\r\n \r\n if (submitBtn) {\r\n // submitBtn.style.display = isNext ? 'none' : 'inline-block';\r\n submitBtn.style.display = isNext ? 'none' : 'flex';\r\n }else{\r\n console.log(\"Button not found\")\r\n }\r\n }\r\n\r\n /**\r\n * Page next and prev button visibility\r\n */\r\n function updateButtonsVisibility() {\r\n var prevButton = formContainer.querySelector('.prev-btn');\r\n var nextButton = formContainer.querySelector('.next-btn');\r\n\r\n if (currentPage === 1) {\r\n prevButton.style.display = 'none';\r\n } else {\r\n prevButton.style.display = 'inline-block';\r\n }\r\n\r\n if (currentPage === pages.length) {\r\n nextButton.style.display = 'none';\r\n } else {\r\n nextButton.style.display = 'inline-block';\r\n }\r\n }\r\n\r\n // Initial setup\r\n showPage(currentPage);\r\n updateButtonsVisibility();\r\n\r\n // Event listeners for next and previous buttons\r\n formContainer.addEventListener('click', function (event) {\r\n var target = event.target;\r\n\r\n if (target.classList.contains('next-btn')) {\r\n // Do not proceed if required fields are not filled\r\n if (!validateRequiredFields(currentPage)) {\r\n return;\r\n }\r\n //IF all ok move next \r\n currentPage++;\r\n\r\n } else if (target.classList.contains('prev-btn')) {\r\n currentPage--;\r\n }\r\n showPage(currentPage);\r\n updateButtonsVisibility();\r\n });\r\n\r\n\r\n /**\r\n * Validation of next button move\r\n */\r\n function validateRequiredFields(pageNumber) {\r\n var currentPageElement = formContainer.querySelector('.page[data-page=\"' + pageNumber + '\"]');\r\n var requiredFields = currentPageElement.querySelectorAll('[required]');\r\n var isValid = true;\r\n \r\n requiredFields.forEach(function (field) {\r\n if (field.value.trim() === '') {\r\n field.style.border = '1px solid red';\r\n isValid = false;\r\n } else {\r\n field.style.border = '';\r\n }\r\n });\r\n \r\n var errorMessage = currentPageElement.querySelector('.blank-filled-error-message');\r\n \r\n if (!isValid) {\r\n // Display an error message below the \"text-fields\" div\r\n if (!errorMessage) {\r\n errorMessage = document.createElement('div');\r\n errorMessage.className = 'blank-filled-error-message';\r\n errorMessage.style.color = 'red';\r\n errorMessage.textContent = 'Please fill out all required fields.';\r\n currentPageElement.querySelector('.text-fields').appendChild(errorMessage);\r\n }\r\n } else {\r\n // Remove the error message if fields are valid\r\n if (errorMessage) {\r\n errorMessage.remove();\r\n }\r\n }\r\n \r\n return isValid;\r\n }\r\n\r\n}\r\n\r\n// Modal --------------------\r\n// Custom modal implementation to replace SweetAlert\r\n// Add this to your existing JavaScript file\r\n\r\nfunction showCustomModal(title, message, duration = 3000) {\r\n // Create modal container\r\n const modalOverlay = document.createElement('div');\r\n modalOverlay.className = 'custom-modal-overlay';\r\n \r\n // Create modal content\r\n const modalContent = document.createElement('div');\r\n modalContent.className = 'custom-modal';\r\n \r\n // Create header with title\r\n const modalHeader = document.createElement('div');\r\n modalHeader.className = 'custom-modal-header';\r\n \r\n const modalTitle = document.createElement('h3');\r\n modalTitle.textContent = title;\r\n modalHeader.appendChild(modalTitle);\r\n \r\n // Create message content\r\n const modalBody = document.createElement('div');\r\n modalBody.className = 'custom-modal-body';\r\n modalBody.innerHTML = message;\r\n \r\n // Create progress bar\r\n const progressBar = document.createElement('div');\r\n progressBar.className = 'custom-modal-progress';\r\n \r\n const progressIndicator = document.createElement('div');\r\n progressIndicator.className = 'custom-modal-progress-indicator';\r\n progressBar.appendChild(progressIndicator);\r\n \r\n // Assemble the modal\r\n modalContent.appendChild(modalHeader);\r\n modalContent.appendChild(modalBody);\r\n modalContent.appendChild(progressBar);\r\n modalOverlay.appendChild(modalContent);\r\n \r\n // Add to document\r\n document.body.appendChild(modalOverlay);\r\n \r\n // Show modal with animation\r\n setTimeout(() => {\r\n modalOverlay.classList.add('visible');\r\n progressIndicator.style.transition = `width ${duration}ms linear`;\r\n progressIndicator.style.width = '100%';\r\n }, 10);\r\n \r\n // Auto close after duration\r\n setTimeout(() => {\r\n modalOverlay.classList.remove('visible');\r\n setTimeout(() => {\r\n document.body.removeChild(modalOverlay);\r\n }, 300); // Wait for fade out animation\r\n }, duration);\r\n \r\n // Allow clicking outside to close\r\n modalOverlay.addEventListener('click', (e) => {\r\n if (e.target === modalOverlay) {\r\n modalOverlay.classList.remove('visible');\r\n setTimeout(() => {\r\n document.body.removeChild(modalOverlay);\r\n }, 300);\r\n }\r\n });\r\n}\r\n\r\n\r\n/**\r\n * Submit Form data get and store in DB and other form submission task here\r\n */\r\n\r\nwindow.addEventListener('load', function () {\r\n var formContainers = document.querySelectorAll('.simple_form_container');\r\n const formContent = document.querySelector('.form-content');\r\n\r\n formContainers.forEach(function (formContainer) {\r\n var formId = formContainer.dataset.formId;\r\n var nonce = formContainer.dataset.nonce;\r\n\r\n // Find the submit button within the current form container\r\n var submitButton = formContainer.querySelector('.submit-button');\r\n\r\n\r\n if(!submitButton){\r\n return; \r\n }\r\n\r\n\r\n // Store the original button text\r\n var originalButtonText = submitButton.innerText;\r\n\r\n // Create a div for displaying error messages\r\n var errorDiv = document.createElement('div');\r\n errorDiv.className = 'error-message';\r\n errorDiv.style.color = 'red';\r\n formContainer.appendChild(errorDiv);\r\n \r\n\r\n submitButton.addEventListener('click', function (event) {\r\n\r\n // Prevent the default form submission behavior\r\n event.preventDefault();\r\n\r\n // Change button text to \"Sending...\"\r\n submitButton.innerText = 'Sending...';\r\n\r\n // Get all form elements within the form\r\n var formElements = formContainer.querySelectorAll('input, select, textarea');\r\n\r\n // Create an object to store the form data\r\n var formDataObject = {};\r\n\r\n // Create a flag to track if there are any required fields that are empty\r\n var hasEmptyRequiredFields = false;\r\n var errorMessage = '';\r\n\r\n formElements.forEach(function (element) {\r\n // Check if the element has the \"simple-form-checkbox-toggle\" class\r\n var isToggleCheckbox = element.closest('.simple-form-checkbox-toggle') !== null;\r\n\r\n // Handle checkboxes with the \"simple-form-checkbox-toggle\" class\r\n if (isToggleCheckbox && element.type === 'checkbox') {\r\n formDataObject[element.name] = element.checked ? 'on' : 'off';\r\n } else {\r\n formDataObject[element.name] = element.value;\r\n }\r\n\r\n // Check if the field is required and empty\r\n if (element.hasAttribute('required') && formDataObject[element.name].trim() === '') {\r\n // Add a red border to indicate the required field is empty\r\n element.style.border = '1px solid red';\r\n hasEmptyRequiredFields = true;\r\n } else {\r\n // Remove any red border if the field is not empty\r\n element.style.border = '';\r\n }\r\n\r\n // Add email validation\r\n if (element.type === 'email' && !isValidEmail(element.value)) {\r\n // Add a red border to indicate an invalid email\r\n element.style.border = '1px solid red';\r\n errorMessage = 'Email is not correct.';\r\n hasEmptyRequiredFields = true;\r\n }\r\n\r\n // Add number validation\r\n if (element.type === 'number') {\r\n const min = element.getAttribute('min');\r\n const max = element.getAttribute('max');\r\n \r\n if (!isValidNumber(element.value, min, max)) {\r\n // Add a red border to indicate an invalid number\r\n element.style.border = '1px solid red';\r\n \r\n if (element.value === '') {\r\n errorMessage = 'Please fillup required field and maintain its format.';\r\n } else if (!(/^\\d+$/.test(element.value))) {\r\n errorMessage = 'Please enter a valid number (digits only).';\r\n } else if (min !== '' || max !== '') {\r\n if (min !== '' && max !== '') {\r\n errorMessage = `Number must be between ${min} and ${max}.`;\r\n } else if (min !== '') {\r\n errorMessage = `Number must be at least ${min}.`;\r\n } else {\r\n errorMessage = `Number must not exceed ${max}.`;\r\n }\r\n }\r\n \r\n hasEmptyRequiredFields = true;\r\n }\r\n }\r\n\r\n //custom captch\r\n if (element.name.endsWith('_correct')) {\r\n const captchaFieldName = element.name.replace('_correct', '');\r\n const captchaUserAnswer = formDataObject[captchaFieldName];\r\n const captchaCorrectAnswer = element.value;\r\n \r\n if (captchaUserAnswer !== captchaCorrectAnswer) {\r\n // Display an error message for the custom captcha\r\n errorMessage = 'Wrong captcha, please fill in the correct answer.';\r\n hasEmptyRequiredFields = true;\r\n }\r\n }\r\n\r\n //Canvas to image create to store the image in databse as a link\r\n if (element.classList.contains('signature-data')) {\r\n var canvasId = element.dataset.canvasId;\r\n var signatureCanvas = document.getElementById(canvasId);\r\n // console.log(signatureCanvas);\r\n // Capture signature data as a base64-encoded PNG image\r\n var signatureData = signatureCanvas.toDataURL('image/png');\r\n // console.log(signatureData)\r\n formDataObject[element.name] = encodeURIComponent(signatureData); // it keep the + before sending to network\r\n // console.log(formDataObject[element.name]);\r\n }\r\n \r\n });\r\n\r\n \r\n // If there are empty required fields, prevent form submission\r\n if (hasEmptyRequiredFields || errorMessage) {\r\n submitButton.innerText = originalButtonText;\r\n // alert('Please fill out all required fields.');\r\n errorDiv.textContent = errorMessage || 'Please fill out all required fields.';\r\n return;\r\n }else{\r\n // Clear the error message if there are no errors\r\n errorDiv.textContent = '';\r\n }\r\n\r\n // Create an AJAX request for the form submission\r\n var xhr = new XMLHttpRequest();\r\n xhr.open('POST', front_end_data.admin_ajax, true);\r\n xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');\r\n\r\n var data = \"action=simpleform_get_submit_data\" + \"&nonce=\" + encodeURIComponent(nonce) + \"&id=\" + encodeURIComponent(formId) + \"&form_data=\" + JSON.stringify(formDataObject) + \"¤t_page_url=\" + encodeURIComponent(window.location.href);\r\n\r\n xhr.onreadystatechange = function () {\r\n if (xhr.readyState === 4) {\r\n \r\n // Set button text back to the original text\r\n submitButton.innerText = originalButtonText;\r\n\r\n if (xhr.status === 200) {\r\n var responseData = JSON.parse(xhr.responseText);\r\n\r\n // console.log('Response:', responseData);\r\n\r\n // Check if the form should be closed after submission\r\n \r\n var shouldCloseForm = formContainer.dataset.close === \"true\";\r\n \r\n if (responseData.success) {\r\n // Clear the form fields\r\n var form = formContainer.querySelector('.simple_form');\r\n form.reset();\r\n\r\n\r\n // Close the form if required\r\n if (shouldCloseForm) {\r\n formContent.classList.remove('active');\r\n formContent.style.height = '0';\r\n }\r\n \r\n\r\n //Rest captch and add new value \r\n var captchaField = form.querySelector('[name^=\"custom-captcha-input\"]');\r\n var captchaCorrectField = form.querySelector('[name^=\"custom-captcha-input-\"][name$=\"_correct\"]');\r\n // Generate a random operation and operands\r\n var captchaOperation = generateRandomOperation();\r\n // console.log(captchaOperation);\r\n // Update the UI with the new captcha operation\r\n var captchaSpan = form.querySelector('[class^=\"question-\"]');\r\n\r\n if(captchaSpan){\r\n captchaSpan.textContent = `${captchaOperation.operand1} ${captchaOperation.operation} ${captchaOperation.operand2} =`;\r\n // Set the correct value\r\n captchaCorrectField.value = eval(`${captchaOperation.operand1} ${captchaOperation.operation} ${captchaOperation.operand2}`);\r\n // Clear the user's input\r\n captchaField.value = '';\r\n }\r\n \r\n \r\n /**\r\n * WhatsApp redirection\r\n */\r\n const scf_json = getCookie(\"simple_form_whatsapp_data\");\r\n if(scf_json){\r\n const scf_opt = JSON.parse(scf_json);\r\n \r\n if (scf_opt && scf_opt.simple_form_whatsapp_number) {\r\n const newTab = scf_opt.simple_form_new_tab === \"true\";\r\n const target = newTab ? \"_blank\" : \"_self\";\r\n const number = scf_opt.simple_form_whatsapp_number;\r\n \r\n // Convert the simple_form_whatsapp_data object to a formatted string\r\n const text = Object.keys(scf_opt.simple_form_whatsapp_data)\r\n .map(key => `${key}: ${scf_opt.simple_form_whatsapp_data[key]}`)\r\n .join(\"\\n\");\r\n\r\n const mobileurl = `https://wa.me/${number}?text=${encodeURIComponent(text)}`;\r\n const weburl = `https://web.whatsapp.com/send?phone=${number}&text=${encodeURIComponent(text)}`;\r\n\r\n const url = window.innerWidth > 1024 ? weburl : mobileurl;\r\n window.open(url, target);\r\n\r\n eraseCookie(\"simple_form_whatsapp_data\");\r\n }\r\n // END \r\n }\r\n \r\n showCustomModal(\r\n 'Thanks for your submission', \r\n 'We will contact you soon Have a nice day.',\r\n 3000 // Duration in milliseconds (3 seconds)\r\n );\r\n \r\n } else{\r\n console.log(responseData.data.message); \r\n errorDiv.textContent = \"Don't try it again! You silly human!\"\r\n }\r\n\r\n } else {\r\n // Handle the error for this form\r\n console.log('Form', formId, 'Error:', xhr.statusText);\r\n }\r\n }\r\n };\r\n\r\n xhr.send(data);\r\n });\r\n });\r\n});\r\n\r\n\r\n//after submit rest and add new vlaue to captch\r\nfunction generateRandomOperation() {\r\n const operations = ['+', '-', '*'];\r\n // const operations = ['+', '-', '*', '/'];\r\n const operation = operations[Math.floor(Math.random() * operations.length)];\r\n\r\n let operand1, operand2;\r\n if (operation === '/') {\r\n operand2 = Math.floor(Math.random() * 9) + 1; // Ensure operand2 is not zero\r\n operand1 = operand2 * (Math.floor(Math.random() * 9) + 1);\r\n } else {\r\n operand1 = Math.floor(Math.random() * 10);\r\n operand2 = Math.floor(Math.random() * 10);\r\n }\r\n\r\n return { operation, operand1, operand2 };\r\n}\r\n\r\n\r\n// Helper function to validate email\r\nfunction isValidEmail(email) {\r\n var emailPattern = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\r\n return emailPattern.test(email);\r\n}\r\n\r\n// Helper function to validate number\r\n/* function isValidNumber(number) {\r\n var numberPattern = /^\\d+$/;\r\n return numberPattern.test(number);\r\n} */\r\n\r\nfunction isValidNumber(value, min, max) {\r\n // First check if it matches your number pattern (digits only)\r\n var numberPattern = /^\\d+$/;\r\n if (!numberPattern.test(value)) {\r\n return false;\r\n }\r\n \r\n // Convert to number for min/max comparison\r\n const numValue = parseFloat(value);\r\n \r\n // Check min constraint if present\r\n if (min !== undefined && min !== '' && numValue < parseFloat(min)) {\r\n return false;\r\n }\r\n \r\n // Check max constraint if present\r\n if (max !== undefined && max !== '' && numValue > parseFloat(max)) {\r\n return false;\r\n }\r\n \r\n return true;\r\n}\r\n\r\n\r\nfunction setCookie(name, value, days) {\r\n let expires = \"\";\r\n\r\n if (days) {\r\n const date = new Date();\r\n date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\r\n expires = `; expires=${date.toUTCString()}`;\r\n }\r\n\r\n document.cookie = `${name}=${value || \"\"}${expires}; path=/`;\r\n}\r\n\r\nfunction getCookie(name) {\r\n const cookieStr = decodeURIComponent(document.cookie);\r\n const cookies = cookieStr.split(\"; \");\r\n\r\n for (let i = 0; i < cookies.length; i++) {\r\n const cookie = cookies[i];\r\n\r\n if (cookie.startsWith(`${name}=`)) {\r\n return cookie.substring(name.length + 1);\r\n }\r\n }\r\n return \"\";\r\n}\r\n\r\nfunction eraseCookie(name) {\r\n setCookie(name, \"\", -1);\r\n}\r\n\r\n// END ---------------------------------------------------\r\n\r\n\r\n/**\r\n * Floating form action \r\n */\r\nwindow.addEventListener('load', function () {\r\n // Get references to the WhatsApp icon and the form content\r\n const whatsappIcon = document.querySelector('.whatsapp-icon');\r\n const formContent = document.querySelector('.form-content');\r\n const closeButton = document.querySelector('.sf-close');\r\n const containerFloat = document.querySelector('.simple_form_container_floating');\r\n\r\n // Toggle the \"active\" class and adjust the height of the form content when the icon is clicked\r\n if(whatsappIcon){\r\n whatsappIcon.addEventListener('click', function () {\r\n formContent.classList.toggle('active');\r\n adjustFormHeight(formContent);\r\n });\r\n }\r\n\r\n // Close the form when the close button is clicked\r\n if (closeButton) {\r\n closeButton.addEventListener('click', function () {\r\n formContent.classList.remove('active');\r\n formContent.style.height = '0';\r\n });\r\n }\r\n\r\n // Check if the form should be initially open\r\n\r\n if(containerFloat){\r\n var OpenForm = containerFloat.dataset.open === \"true\";\r\n // console.log(containerFloat.dataset)\r\n if (OpenForm) {\r\n formContent.classList.add('active');\r\n adjustFormHeight(formContent);\r\n }\r\n }\r\n \r\n \r\n\r\n function adjustFormHeight(element) {\r\n const isActive = element.classList.contains('active');\r\n if (isActive) {\r\n // Calculate the full height of the form content\r\n // element.style.height = element.scrollHeight + 'px'; // prev used\r\n element.style.height = 'auto';\r\n element.style.maxHeight = '520px';\r\n\r\n if (containerFloat) {\r\n containerFloat.style.overflowY = 'auto';\r\n containerFloat.style.maxHeight = '465px';\r\n }\r\n\r\n } else {\r\n // Set the height back to 0 for collapsing effect\r\n element.style.height = '0';\r\n }\r\n }\r\n \r\n});\r\n\r\n\r\n// Function to restart the animation\r\nfunction restartAnimation() {\r\n const whatsappIcon = document.getElementById('jumping-whatsapp');\r\n if(whatsappIcon){\r\n whatsappIcon.style.animation = 'none';\r\n // Trigger reflow\r\n void whatsappIcon.offsetWidth; \r\n // Set animation duration to 5 seconds\r\n whatsappIcon.style.animation = 'jumpAnimation 0.9s ease-in-out'; \r\n }\r\n \r\n}\r\n\r\n// Initially, trigger the animation 4-5 times with a delay\r\nlet initialAnimationCount = 0;\r\n// Random value between 4 and 5\r\nconst maxInitialAnimationCount = Math.floor(Math.random() * 2) + 1; \r\n\r\nfunction initialAnimations() {\r\n if (initialAnimationCount < maxInitialAnimationCount) {\r\n restartAnimation();\r\n initialAnimationCount++;\r\n setTimeout(initialAnimations, 200); // Adjust the delay as needed\r\n }\r\n}\r\n\r\n// Start initial animations\r\ninitialAnimations();\r\n\r\n// After the initial animations, continue with the 10-second animation cycle\r\nsetInterval(restartAnimation, 3000); // Restart every\r\n\r\n// END "],"names":["generateRenderedForm","formData","ispro","theme","arguments","length","undefined","html","currentPage","isPageStarted","getThemeStyles","concat","forEach","item","type","row","currentRowHtml","rowStarted","i","fields","field","layout","id","renderField","processRow","processField","data","_step","_iterator","_createForOfIteratorHelper","s","n","done","value","_step2","_iterator2","err","e","f","checkForSubmitButton","getLabel","isRequired","required","labelClass","requiredIndicator","label","fieldHtml","fieldAttributes","className","src","width","height","name","placeholder","headingtype","content","href","target","sitekey","btnaccess","size","error","correctAnswer","value1","Math","floor","random","value2","operators","operator","toggle","options","option","radioIsRequired","radioRequiredIndicator","min","max","canvasSignature","formContainer","querySelectorAll","page","canvas","context","getContext","isDrawing","addEventListener","drawStart","draw","drawEnd","preventDefault","touch","touches","simulatedEvent","MouseEvent","clientX","clientY","dispatchEvent","beginPath","closePath","rect","getBoundingClientRect","mouseX","left","mouseY","top","lineWidth","lineCap","lineTo","stroke","moveTo","setupResetButtons","button","resetSignatureCanvas","getAttribute","canvasId","document","getElementById","clearRect","initializeFormSlider","submitBtn","pages","showPage","pageNumber","style","display","currentPageElement","querySelector","isNext","console","log","updateButtonsVisibility","prevButton","nextButton","event","classList","contains","requiredFields","isValid","trim","border","errorMessage","remove","createElement","color","textContent","appendChild","validateRequiredFields","showCustomModal","title","message","duration","modalOverlay","modalContent","modalHeader","modalTitle","modalBody","innerHTML","progressBar","progressIndicator","body","setTimeout","add","transition","removeChild","generateRandomOperation","operand1","operand2","operations","operation","isValidEmail","email","test","isValidNumber","numValue","parseFloat","setCookie","days","expires","date","Date","setTime","getTime","toUTCString","cookie","getCookie","cookies","decodeURIComponent","split","startsWith","substring","eraseCookie","restartAnimation","whatsappIcon","animation","offsetWidth","container","formId","formTheme","nonce","cf7","markupId","simpleFormLoader","fetch","front_end_data","admin_ajax","then","response","ok","Error","json","code","renderedFormHTML","table_settings","isProActive","window","formContainers","formContent","dataset","submitButton","originalButtonText","innerText","errorDiv","formElements","formDataObject","hasEmptyRequiredFields","element","closest","checked","hasAttribute","endsWith","captchaFieldName","replace","signatureData","toDataURL","encodeURIComponent","xhr","XMLHttpRequest","open","setRequestHeader","JSON","stringify","location","onreadystatechange","readyState","status","responseData","parse","responseText","shouldCloseForm","close","success","form","reset","captchaField","captchaCorrectField","captchaOperation","captchaSpan","eval","scf_json","scf_opt","simple_form_whatsapp_number","newTab","simple_form_new_tab","number","text","Object","keys","simple_form_whatsapp_data","map","key","join","mobileurl","weburl","url","innerWidth","statusText","send","closeButton","containerFloat","adjustFormHeight","maxHeight","overflowY","initialAnimationCount","maxInitialAnimationCount","initialAnimations","setInterval"],"sourceRoot":""}