Form Block to Popup

by

Description: turn Form Block to Popup

A. turn Form Block to Popup on One Page

#1. First, add a Form Block

#2. Hover on Page > Click Gear icon

#3. Paste this code

<style>
#popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .75);z-index:9999;display:none;opacity:0;transition:opacity 0.3s ease;align-items:center;justify-content:center}#popup-overlay.show{display:flex;opacity:1}#popup-container{position:relative;max-width:700px;width:90%;max-height:90vh;overflow-y:auto;background:#fff;border-radius:8px;transform:scale(.9);transition:transform 0.3s ease;padding:20px}#popup-overlay.show #popup-container{transform:scale(1)}#popup-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:24px;cursor:pointer;color:#666;z-index:10;padding:5px;line-height:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}#popup-close:hover{background-color:#f0f0f0;color:#000}footer.sections .form-block{display:none!important}#popup-overlay .form-block{display:block!important}
</style>
<script>
(function(){function createPopup(){const overlay=document.createElement('div');overlay.id='popup-overlay';const container=document.createElement('div');container.id='popup-container';const closeBtn=document.createElement('button');closeBtn.id='popup-close';closeBtn.innerHTML='&times;';const formBlock=document.querySelector('.form-block');container.appendChild(closeBtn);container.appendChild(formBlock.cloneNode(!0));overlay.appendChild(container);document.body.appendChild(overlay);closeBtn.addEventListener('click',closePopup);overlay.addEventListener('click',function(e){if(e.target===overlay){closePopup()}})}
function showPopup(){const lastShown=localStorage.getItem('popup-last-shown');const today=new Date().toDateString();if(lastShown!==today){const overlay=document.getElementById('popup-overlay');if(overlay){setTimeout(function(){overlay.classList.add('show')},1000)}}}
function closePopup(){const overlay=document.getElementById('popup-overlay');if(overlay){overlay.classList.remove('show');localStorage.setItem('popup-last-shown',new Date().toDateString())}}
document.addEventListener('DOMContentLoaded',function(){createPopup();showPopup()})})()
</script>

B. turn Form Block to Popup on All Pages

#1. First, edit Site Footer

#2. Add a Form Block

#3. Use this code to Code Injection > Footer

<style>
#popup-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .75);z-index:9999;display:none;opacity:0;transition:opacity 0.3s ease;align-items:center;justify-content:center}#popup-overlay.show{display:flex;opacity:1}#popup-container{position:relative;max-width:700px;width:90%;max-height:90vh;overflow-y:auto;background:#fff;border-radius:8px;transform:scale(.9);transition:transform 0.3s ease;padding:20px}#popup-overlay.show #popup-container{transform:scale(1)}#popup-close{position:absolute;top:15px;right:15px;background:none;border:none;font-size:24px;cursor:pointer;color:#666;z-index:10;padding:5px;line-height:1;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center}#popup-close:hover{background-color:#f0f0f0;color:#000}.form-block{display:none!important}#popup-overlay .form-block{display:block!important}
</style>
<script>
(function(){function createPopup(){const overlay=document.createElement('div');overlay.id='popup-overlay';const container=document.createElement('div');container.id='popup-container';const closeBtn=document.createElement('button');closeBtn.id='popup-close';closeBtn.innerHTML='&times;';const formBlock=document.querySelector('.form-block');container.appendChild(closeBtn);container.appendChild(formBlock.cloneNode(!0));overlay.appendChild(container);document.body.appendChild(overlay);closeBtn.addEventListener('click',closePopup);overlay.addEventListener('click',function(e){if(e.target===overlay){closePopup()}})}
function showPopup(){const lastShown=localStorage.getItem('popup-last-shown');const today=new Date().toDateString();if(lastShown!==today){const overlay=document.getElementById('popup-overlay');if(overlay){setTimeout(function(){overlay.classList.add('show')},1000)}}}
function closePopup(){const overlay=document.getElementById('popup-overlay');if(overlay){overlay.classList.remove('show');localStorage.setItem('popup-last-shown',new Date().toDateString())}}
document.addEventListener('DOMContentLoaded',function(){createPopup();showPopup()})})()
</script>

C. Extra

If you want to clear Popup cookie to make it appears again to test code easier, you can add this code to Chrome Developer Tools Console.

Then reload the page.

localStorage.removeItem('popup-last-shown');

Buy me a coffee