I am raw html block.
Click edit button to change this html

(function () { // Toggle form visibility var formVisible = false; // Create the form container var formContainer = document.createElement('div'); formContainer.style.position = 'fixed'; formContainer.style.top = '50%'; // Default top position formContainer.style.right = '-400px'; // Initially off-screen formContainer.style.maxHeight = '600px'; // Maximum height formContainer.style.height = '100%'; // Default height formContainer.style.backgroundColor = '#fff'; formContainer.style.boxShadow = '0 0 10px rgba(0, 0, 0, 0.2)'; formContainer.style.transition = 'right 0.3s ease-in-out'; formContainer.style.zIndex = '9998'; document.body.appendChild(formContainer); // Create a fixed button element var button = document.createElement('button'); button.innerText = 'X'; button.style.position = 'fixed'; button.style.bottom = '20px'; button.style.right = '20px'; button.style.zIndex = '9999'; button.style.opacity = 0; formContainer.appendChild(button); // Toggle form sliding effect button.addEventListener('click', function () { if (!formVisible) { openForm(); } else { closeForm(); } }); // Create close button inside the form container with specified styling var closeButton = document.createElement('button'); closeButton.style.position = 'absolute'; closeButton.style.top = '50%'; closeButton.style.left = '-50px'; closeButton.style.zIndex = '9999'; closeButton.style.border = 'none'; closeButton.style.background = '#000'; closeButton.style.cursor = 'pointer'; closeButton.style.height = '78px'; closeButton.style.width = '50px'; closeButton.style.padding = '6px 6px 6px 6px'; closeButton.style.borderRadius = '16px 0 0 16px'; formContainer.appendChild(closeButton); // Create the image element var img = document.createElement('img'); img.src = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjM4LjUiCiAgIGhlaWdodD0iNzcuMTE1NDc5IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcyNiIKICAgc29kaXBvZGk6ZG9jbmFtZT0icG9rX2xvZ28uc3ZnIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjAuMSAoM2JjMmU4MTNmNSwgMjAyMC0wOS0wNykiPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTMyIj4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzAiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxIgogICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiCiAgICAgZ3JpZHRvbGVyYW5jZT0iMTAiCiAgICAgZ3VpZGV0b2xlcmFuY2U9IjEwIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxNTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc4NSIKICAgICBpZD0ibmFtZWR2aWV3MjgiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjQuNTU0NDY1NSIKICAgICBpbmtzY2FwZTpjeD0iNzUuMDAwNzA1IgogICAgIGlua3NjYXBlOmN5PSI1NC45MDgyMjQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjE5MjAiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9IjAiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmcyNiIKICAgICBmaXQtbWFyZ2luLXRvcD0iMCIKICAgICBmaXQtbWFyZ2luLWxlZnQ9IjAiCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIKICAgICBmaXQtbWFyZ2luLWJvdHRvbT0iMCIgLz4KICA8cGF0aAogICAgIGZpbGw9IiNmZmYiCiAgICAgZD0iTSA3LjUsNTMuMTgzOTE5IEggMzggcSAwLjUsMCAwLjUsMC41IHYgNi42NSBxIDAsMC42NSAtMC42NSwwLjY1IGwgLTEwLjU1LC0wLjE2IGEgMC40MywwLjQzIDAgMCAwIC0wLjIzLDAuOCBsIDEwLjg4LDYuNzggcSAwLjU1LDAuMzUgMC41NSwwLjk5IHYgNy4yMSBxIDAsMC43OSAtMC42NywwLjM2IGwgLTE0LjAzLC05LjAzIHEgLTAuNTIsLTAuMzMgLTEuMDUsLTAuMDMgbCAtMTUuNTUsOC45MyBxIC0wLjY3LDAuMzkgLTAuNjgsLTAuMzggbCAtMC4wNywtNy40NyBxIC0wLjAxLC0wLjU1IDAuNDYsLTAuODQgbCAxMC4wNiwtNi4zNCBxIDEuNDYsLTAuOTIgLTAuMjYsLTAuOTEgbCAtMTYuMDY5OTk5OTYsMC4wNiBRIDEuNjg3NjcyNmUtOCw2MC45NTM5MTkgMS42ODc2NzI2ZS04LDYwLjMyMzkxOSBWIDE0LjgxMzkyIEEgMC40MiwwLjQyIDAgMCAxIDAuNDMwMDAwMDIsMTQuMzkzOTIgTCA5LjA0LDE0LjU2MzkyIGEgMC45NywwLjk3IDAgMCAwIDAuOTgsLTEuMDUgcSAtMC44MSwtOS4xOSA2LjcsLTEyLjMzMDAwMDYgQyAyMC4wMSwtMC4xOTYwODA2MyAyNy45MiwtMC40NzYwODA2MyAzMS40NiwwLjkxMzkxOTM3IDM5LjY5LDQuMTUzOTIgMzguNSwxNC4xNzM5MiAzOC4xNCwyMi42NjM5MiBxIC0wLjAyLDAuNTMgLTAuNTUsMC41MyBsIC0zMC4xMSwtMC4wNCBxIC0wLjQ4LDAgLTAuNDgsMC40OSB2IDI5LjAzOTk5OSBxIDAsMC41IDAuNSwwLjUgeiBtIDEwLjcyLC0zOC4zOTk5OTkgMTIuNzQsLTAuMiBhIDAuNjIsMC42MiAwIDAgMCAwLjYxLC0wLjYzIGwgLTAuMDQsLTIuMjkgYSA1LjUzLDYuNzUgODkuMSAwIDAgLTYuODQsLTUuNDIgaCAtMC40OCBhIDUuNTMsNi43NSA4OS4xIDAgMCAtNi42Niw1LjY0IGwgMC4wNCwyLjI5IGEgMC42MiwwLjYyIDAgMCAwIDAuNjMsMC42MSB6IgogICAgIGlkPSJwYXRoMjIiIC8+CiAgPHBhdGgKICAgICBmaWxsPSIjZmZmIgogICAgIGQ9Im0gMzYuODk4NDE2LDM4LjkyMDUzNSBhIDEwLjkzLDEwLjkzIDAgMCAxIC0xMC44OTIsMTAuOTY4IGwgLTUuOTYsMC4wMiBhIDEwLjkzLDEwLjkzIDAgMCAxIC0xMC45NjgsLTEwLjg5IGwgLTAuMDA3LC0xLjk0IGEgMTAuOTMsMTAuOTMgMCAwIDEgMTAuODkzLC0xMC45NyBsIDUuOTYsLTAuMDIgYSAxMC45MywxMC45MyAwIDAgMSAxMC45NjcsMTAuODkxIHogbSAtNS45OTMsLTAuODkxIGEgNy45Miw0Ljk4IDAgMCAwIC03LjkyLC00Ljk4IDcuOTIsNC45OCAwIDAgMCAtNy45Miw0Ljk4IDcuOTIsNC45OCAwIDAgMCA3LjkyLDQuOTggNy45Miw0Ljk4IDAgMCAwIDcuOTIsLTQuOTggeiIKICAgICBpZD0icGF0aDI0IiAvPgo8L3N2Zz4K"; // Add the base64 encoded SVG data img.style.height = '100%'; closeButton.appendChild(img); // Retrieve the UUID from the script URL var scriptURL = document.currentScript.src; var urlParams = new URLSearchParams(scriptURL.split('?')[1]); var uuid = urlParams.get('uuid'); // Create the form element inside the container var formElement = document.createElement('iframe'); formElement.src = 'https://zen-lovelace.217-182-77-2.plesk.page/form/' + uuid; formElement.style.width = '100%'; formElement.style.height = '100%'; formElement.style.border = 'none'; formContainer.appendChild(formElement); // Function to open the form function openForm() { formContainer.style.right = '0'; formVisible = true; // Check screen width and adjust form width if necessary if (window.innerWidth < 600) { formContainer.style.width = '100%'; } } // Function to close the form function closeForm() { formContainer.style.right = '-400px'; formContainer.style.width = '400px'; // Reset width formVisible = false; } // Close the form when the close button is clicked // Toggle form sliding effect closeButton.addEventListener('click', function () { if (!formVisible) { openForm(); } else { closeForm(); } }); widthAdjust(); heightAdjust(); // Adjust form width when the window is resized window.addEventListener('resize', function () { widthAdjust(); heightAdjust(); }); function heightAdjust() { if (formVisible) { if (window.innerHeight < 800) { formContainer.style.top = '0'; formContainer.style.height = '100%'; formContainer.style.transform = 'translateY(0%)'; } else { formContainer.style.top = '50%'; formContainer.style.height = '500px'; formContainer.style.transform = 'translateY(-50%)'; } } } function widthAdjust() { if (formVisible && window.innerWidth < 600) { formContainer.style.width = '100%'; formContainer.style.height = '100%'; formContainer.style.transform = 'translateY(0%)'; button.style.opacity = 1; } else { formContainer.style.width = '400px'; formContainer.style.height = '600px'; formContainer.style.transform = 'translateY(-50%)'; button.style.opacity = 0; } } })();