{"id":189,"date":"2025-04-22T11:29:52","date_gmt":"2025-04-22T05:59:52","guid":{"rendered":"https:\/\/www.paradisosolutions.com\/elearning\/?page_id=189"},"modified":"2026-01-19T11:36:16","modified_gmt":"2026-01-19T06:06:16","slug":"appointmnet-iframe-forpricingcalculator","status":"publish","type":"page","link":"https:\/\/www.paradisosolutions.com\/elearning\/appointmnet-iframe-forpricingcalculator\/","title":{"rendered":"appointmnet-iframe-forpricingcalculator"},"content":{"rendered":"\r\n<p><style>\r\n.am-confirmation-booking-header img {\r\n    display: none !important;\r\n}\r\n  .form-container {\r\n    background: #f9f9f9;\r\n    padding: 30px;\r\n    border-radius: 12px;\r\n    width: 100%;\r\n    max-width: 480px;\r\n    text-align: left;\r\n    margin: 30px auto;\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n  }\r\n\r\n  .form-container label {\r\n    display: block;\r\n    color: #333;\r\n    font-size: 14px;\r\n    font-weight: 500;\r\n    margin-bottom: 6px;\r\n    margin-top: 15px;\r\n  }\r\n\r\n  .form-container input[type=\"text\"],\r\n  .form-container input[type=\"email\"],\r\n  .form-container input[type=\"tel\"] {\r\n    width: 100%;\r\n    padding: 12px;\r\n    font-size: 15px;\r\n    background: #ffffff;\r\n    border: 1px solid #ccc;\r\n    border-radius: 8px;\r\n    box-sizing: border-box;\r\n    transition: border 0.3s ease;\r\n  }\r\n\r\n  .form-container input:focus {\r\n    border-color: #00c2fc;\r\n    outline: none;\r\n  }\r\n\r\n  .form-container button {\r\n    background-color: #00C2FC;\r\n    color: #fff;\r\n    padding: 14px 20px;\r\n    font-size: 16px;\r\n    font-weight: 600;\r\n    border: none;\r\n    border-radius: 8px;\r\n    cursor: pointer;\r\n    transition: background-color 0.3s ease;\r\n    width: 100%;\r\n    margin-top: 20px;\r\n  }\r\n\r\n  .form-container button:hover {\r\n    background-color: #008CBA;\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .form-container {\r\n      padding: 20px;\r\n      width: unset;\r\n    }\r\n  }\r\ninput[type=\"checkbox\"] {\r\n    top: 2px;\r\n    position: relative;\r\n}\r\nheader, .bottom_appoin {display: none !important;}body.course-videos.kmpsmainsec1 {background-color: #ffffff00 !important;}.el-button.el-button--primary.redirect-link {display: none;}.el-button.el-button--primary {padding: 12px 20px !important;}.am-confirmation-booking-header {display: none;}\r\n<\/style><\/p>\r\n<!-- Booking Form -->\r\n<div id=\"formWrapper\" style=\"display: block;\"><form id=\"myForm\">\r\n<div class=\"form-container\"><label for=\"firstname\">First Name*<\/label> <input id=\"firstname\" name=\"firstname\" required=\"\" type=\"text\" \/> <label for=\"lastname\">Last Name*<\/label> <input id=\"lastname\" name=\"lastname\" required=\"\" type=\"text\" \/> <label for=\"email\">Email*<\/label> <input id=\"email\" name=\"email\" required=\"\" type=\"email\" \/> <label for=\"phone\">Phone*<\/label> <input id=\"phone\" name=\"phone\" required=\"\" type=\"tel\" \/> <label for=\"note\">Note<\/label> <input id=\"note\" name=\"note\" required=\"\" type=\"text\" \/>\r\n<div style=\"margin-top: 10px;\"><label> <input checked=\"checked\" type=\"checkbox\" \/> <span class=\"acceptance_sec\" style=\"padding-left: 8px; width: 90%; display: inline-table; text-align: left; line-height: 1.5em; font-weight: 400 !important; color: #000000;\"> By submitting this form, you agree to the <a class=\"tcpp\" href=\"\/terms-of-service\" target=\"_blank\" rel=\"noopener\">terms of service<\/a>, <a class=\"tcpp\" href=\"\/privacypolicy\" target=\"_blank\" rel=\"noopener\">privacy policy<\/a> and <a class=\"tcpp\" href=\"\/cookies-policy\" target=\"_blank\" rel=\"noopener\">cookie policy<\/a>, and confirm that the services are for business use only, not personal or consumer use.<\/span> <\/label><\/div>\r\n<button type=\"submit\">Pick Date &amp; Time<\/button><\/div>\r\n<\/form><\/div>\r\n<p><script>\r\n  window.addEventListener(\"DOMContentLoaded\", function () {\r\n    const params = new URLSearchParams(window.location.search);\r\n    const cookie = params.get(\"cookie\");\r\n    const formWrapper = document.getElementById(\"formWrapper\");\r\n    const calendarDiv = document.getElementById(\"amelia-app-booking0\");\r\n    \r\n    if (cookie === \"reject\" || cookie === null) {\r\n      \/\/ Hide calendar initially\r\n      if (calendarDiv) {\r\n        calendarDiv.style.display = \"none\";\r\n      }\r\n      \r\n      \/\/ On form submit, show calendar\r\n      document.getElementById(\"myForm\").addEventListener(\"submit\", function (e) {\r\n        e.preventDefault();\r\n        formWrapper.style.display = \"none\";\r\n        if (calendarDiv) {\r\n          calendarDiv.style.display = \"block\";\r\n        }\r\n      });\r\n    } \r\n  });\r\n<\/script> <script>\r\ndocument.getElementById(\"myForm\").addEventListener(\"submit\", function(e) {\r\n    e.preventDefault();  \/\/ Prevent the form from submitting and reloading the page\r\n    \r\n    \/\/ Get the form values\r\n    const firstName = document.getElementById(\"firstname\").value;\r\n    const lastName = document.getElementById(\"lastname\").value;\r\n    const email = document.getElementById(\"email\").value;\r\n    const phone = document.getElementById(\"phone\").value;\r\n    \r\n    \/\/ Create an object to hold the data\r\n    const bookingData = {\r\n        firstName: firstName,\r\n        lastName: lastName,\r\n        email: email,\r\n        phone: phone\r\n    };\r\n    \r\n    \/\/ Store the data in sessionStorage\r\n    sessionStorage.setItem(\"bookingData\", JSON.stringify(bookingData));\r\n    \r\n    \/\/ Log the stored data for debugging\r\n    console.log(\"Stored bookingData:\", bookingData);\r\n    \r\n    document.getElementById(\"am-button-wrapper-0\")?.addEventListener(\"click\", function () {\r\n        \/\/ Handle First Name\r\n  \t\tconst firstName = bookingData.firstName;\r\n\t\tif (firstName) {\r\n\t\t\tconst label = document.querySelector('label[for=\"customer.firstName\"]');\r\n\t\t\tif (label) {\r\n\t\t\t\t\/\/ Try to find the disabled input first\r\n\t\t\t\tlet input = label.closest('.el-form-item')?.querySelector('input[disabled]');\r\n\t\t\t\t\/\/ If disabled input not found, fallback to class .el-input__inner\r\n\t\t\t\tif (!input) {\r\n\t\t\t\t\tinput = label.closest('.el-form-item')?.querySelector('input');\r\n\t\t\t\t}\r\n\t\t\t\tif (input) {\r\n\t\t\t\t\tinput.value = firstName;\r\n\t\t\t\t\tinput.dispatchEvent(new Event('input', { bubbles: true }));\r\n\t\t\t\t\tinput.dispatchEvent(new Event('change', { bubbles: true }));\r\n\t\t\t\t\tinput.dispatchEvent(new Event('blur', { bubbles: true }));\r\n\t\t\t\t} else {\r\n\t\t\t\t\talert(\"No suitable input field found under the First Name label.\");\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\talert(\"Label with for='customer.firstName' not found.\");\r\n\t\t\t}\r\n\t\t} else {\r\n\t\t\talert(\"No firstName found in session.\");\r\n\t\t}\r\n        \r\n        \/\/ Handle Last Name\r\n        const lastName = bookingData.lastName;\r\n        if (lastName) {\r\n            const label2 = document.querySelector('label[for=\"customer.lastName\"]');\r\n            if (label2) {\r\n                const input2 = label2.closest('.el-form-item').querySelector('input[disabled]');\r\n                if (input2) {\r\n                    input2.value = lastName;\r\n\t\t\t\t\tinput2.dispatchEvent(new Event('input', { bubbles: true }));\r\n\t\t\t\t\tinput2.dispatchEvent(new Event('change', { bubbles: true }));\r\n\t\t\t\t\tinput2.dispatchEvent(new Event('blur', { bubbles: true }));\r\n                } else {\r\n\t \t\t\t    const inputdisable = label2.closest('.el-form-item')?.querySelector('input');\r\n\t                inputdisable.value = lastName;\r\n\t\t\t\t\tinputdisable.dispatchEvent(new Event('input', { bubbles: true }));\r\n\t\t\t\t\tinputdisable.dispatchEvent(new Event('change', { bubbles: true }));\r\n\t\t\t\t\tinputdisable.dispatchEvent(new Event('blur', { bubbles: true }));\r\n                }\r\n            } else {\r\n                alert(\"Label with for='customer.lastName' not found.\");\r\n            }\r\n        } else {\r\n            alert(\"No lastName found in session.\");\r\n        }\r\n        \r\n        \/\/ Handle Email\r\n        const email = bookingData.email;\r\n        if (email) {\r\n            const label3 = document.querySelector('label[for=\"customer.email\"]');\r\n            if (label3) {\r\n                const input3 = label3.closest('.el-form-item').querySelector('input[disabled]');\r\n                if (input3) {\r\n                    input3.value = email;\r\n\t\t\t\t\t\/\/ Trigger all 3 to simulate real input + validation\r\n\t\t\t\t\tinput3.dispatchEvent(new Event('input', { bubbles: true }));\r\n\t\t\t\t\tinput3.dispatchEvent(new Event('change', { bubbles: true }));\r\n\t\t\t\t\tinput3.dispatchEvent(new Event('blur', { bubbles: true }));\r\n                } else {\r\n\t \t\t\t    const inputdisable2 = label3.closest('.el-form-item')?.querySelector('input');\r\n\t                inputdisable2.value = email;\r\n\t\t\t\t\t\/\/ Trigger all 3 to simulate real input + validation\r\n\t\t\t\t\tinputdisable2.dispatchEvent(new Event('input', { bubbles: true }));\r\n\t\t\t\t\tinputdisable2.dispatchEvent(new Event('change', { bubbles: true }));\r\n\t\t\t\t\tinputdisable2.dispatchEvent(new Event('blur', { bubbles: true }));\r\n                }\r\n            } else {\r\n                alert(\"Label with for='customer.email' not found.\");\r\n            }\r\n        } else {\r\n            alert(\"No email found in session.\");\r\n        }\r\n        \r\n\t\tconst flagDiv = document.querySelector('.el-select.am-selected-flag');\r\n\t\tif (flagDiv) {\r\n\t\t\t\/\/ Remove the existing \"am-selected-flag-*\" class\r\n\t\t\tflagDiv.classList.forEach(cls => {\r\n\t\t\t\tif (cls.startsWith('am-selected-flag-')) {\r\n\t\t\t\t\tflagDiv.classList.remove(cls);\r\n\t\t\t\t}\r\n\t\t\t});\r\n\t\t\t\/\/ Add the new one\r\n\t\t\tflagDiv.classList.add('am-selected-flag-in');\r\n\t\t} else {\r\n\t\t\tconsole.warn('Flag div not found!');\r\n\t\t}\r\n        \r\n        \/\/ Handle Phone\r\n\t\tconst phone = bookingData.phone;\r\n\t\tif (phone) {\r\n\t\t\tconst label4 = document.querySelector('label[for=\"customer.phone\"]');\r\n\t\t\tif (label4) {\r\n\t\t\t\tconst inputs = label4.closest('.el-form-item').querySelectorAll('input');\r\n\t\t\t\tif (inputs.length > 1) {\r\n\t\t\t\t\tconst phoneInput = inputs[1];\r\n\t\t\t\t\tphoneInput.value = '+'+ phone;\r\n\t\t\t\t\tphoneInput.setAttribute('autocomplete', 'new-password');\r\n\t\t\t\t\tphoneInput.setAttribute('data-gtm-form-interact-field-id', '4');\r\n\r\n\t\t\t\t\t\/\/ Trigger all 3 to simulate real input + validation\r\n\t\t\t\t\tphoneInput.dispatchEvent(new Event('input', { bubbles: true }));\r\n\t\t\t\t\tphoneInput.dispatchEvent(new Event('change', { bubbles: true }));\r\n\t\t\t\t\tphoneInput.dispatchEvent(new Event('blur', { bubbles: true }));\r\n\t\t\t\t} else {\r\n\t\t\t\t\tconsole.warn(\"Second input not found under the Phone label.\");\r\n\t\t\t\t}\r\n\t\t\t} else {\r\n\t\t\t\tconsole.warn(\"Label with for='customer.phone' not found.\");\r\n\t\t\t}\r\n\t\t}\r\n    });\r\n    \r\n    \/\/ Optionally, you could redirect the user or show the calendar popup here\r\n});\r\n<\/script><\/p>","protected":false},"excerpt":{"rendered":"<p>First Name* Last Name* Email* Phone* Note By submitting this form, you agree to the terms of service, privacy policy and cookie policy, and confirm that the services are for business use only, not personal or consumer use. Pick Date &amp; Time<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elearningtest.php","meta":[],"_links":{"self":[{"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/pages\/189"}],"collection":[{"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/comments?post=189"}],"version-history":[{"count":4,"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/pages\/189\/revisions"}],"predecessor-version":[{"id":685,"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/pages\/189\/revisions\/685"}],"wp:attachment":[{"href":"https:\/\/www.paradisosolutions.com\/elearning\/wp-json\/wp\/v2\/media?parent=189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}