Description: turn form block (use WM Popup Plugin) to Popup (similar Promotional Popup)
#1. First, you need to install WM Popup Plugin
#2. Create a page with Name: Popup Content – URL: /popup-content
#3. Add a Form Block to Popup Content Page
#4. Use this code under WM Plugin code in Code Injection > Footer
<script>document.addEventListener('DOMContentLoaded',function(){const POPUP_COOKIE_NAME='formPopupShown';const POPUP_EXPIRY_HOURS=24;function setCookie(name,value,hours){const date=new Date();date.setTime(date.getTime()+(hours*60*60*1000));document.cookie=`${name}=${value}; expires=${date.toUTCString()}; path=/`}
function getCookie(name){const cookieString=document.cookie;const cookies=cookieString.split('; ');for(let cookie of cookies){const[cookieName,cookieValue]=cookie.split('=');if(cookieName===name){return cookieValue}}
return null}
function shouldShowPopup(){return getCookie(POPUP_COOKIE_NAME)!=='true'}
function createAutoPopup(){if(!shouldShowPopup()){return}
if(typeof wmPopup==='undefined'){console.error('wmPopup plugin not found');return}
const overlay=document.createElement('div');overlay.className='wm-popup-overlay wm-popup-fade-in';overlay.style.display='block';overlay.style.zIndex='10000';const container=document.createElement('div');container.className='wm-popup-container';container.style.display='block';container.style.opacity='0';const closeButton=document.createElement('button');closeButton.className='wm-popup-close';closeButton.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>';const content=document.createElement('div');content.className='wm-popup-content';async function loadFormContent(){try{const response=await fetch('/popup-content');const html=await response.text();const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');const formBlock=doc.querySelector('#block-yui_3_17_2_1_1757469864522_10768');if(formBlock){content.appendChild(formBlock);const scripts=formBlock.querySelectorAll('script');scripts.forEach(script=>{const newScript=document.createElement('script');if(script.src){newScript.src=script.src}else{newScript.textContent=script.textContent}
document.head.appendChild(newScript)});if(typeof Squarespace!=='undefined'&&typeof Y!=='undefined'){setTimeout(()=>{Squarespace.initializeFormBlocks(Y,Y.one(container))},100)}}else{content.innerHTML='<div class="wm-popup-error"><h2>Form Not Found</h2><p>Form block does not exist on /popup-content page</p></div>'}}catch(error){content.innerHTML='<div class="wm-popup-error"><h2>Loading Error</h2><p>Unable to load form content. Please try again later.</p></div>';console.error('Error loading form content:',error)}}
function closePopup(){overlay.style.opacity='0';setTimeout(()=>{if(overlay.parentNode){overlay.parentNode.removeChild(overlay)}
document.body.classList.remove('wm-popup-open');document.body.style.overflow='';setCookie(POPUP_COOKIE_NAME,'true',POPUP_EXPIRY_HOURS)},300)}
function showPopup(){document.body.classList.add('wm-popup-open');document.body.style.overflow='hidden';setTimeout(()=>{overlay.classList.add('wm-popup-active');container.style.opacity='1'},10)}
closeButton.addEventListener('click',closePopup);overlay.addEventListener('click',function(e){if(e.target===overlay){closePopup()}});document.addEventListener('keydown',function(e){if(e.key==='Escape'){closePopup()}});container.appendChild(closeButton);container.appendChild(content);overlay.appendChild(container);document.body.appendChild(overlay);loadFormContent().then(()=>{showPopup()})}
setTimeout(createAutoPopup,1000)});</script>
#5. In case you want to make popup appears on One Page only, you can find Page ID
then replace #4 with this new code.
<script>document.addEventListener('DOMContentLoaded',function(){if(!document.body.matches('#collection-68b1005e661b1c1acfb40e8a')){return}
const POPUP_COOKIE_NAME='formPopupShown';const POPUP_EXPIRY_HOURS=24;function setCookie(name,value,hours){const date=new Date();date.setTime(date.getTime()+(hours*60*60*1000));document.cookie=`${name}=${value}; expires=${date.toUTCString()}; path=/`}
function getCookie(name){const cookieString=document.cookie;const cookies=cookieString.split('; ');for(let cookie of cookies){const[cookieName,cookieValue]=cookie.split('=');if(cookieName===name){return cookieValue}}
return null}
function shouldShowPopup(){return!0}
function createAutoPopup(){if(!shouldShowPopup()){return}
if(typeof wmPopup==='undefined'){console.error('wmPopup plugin not found');return}
const overlay=document.createElement('div');overlay.className='wm-popup-overlay wm-popup-fade-in';overlay.style.display='block';overlay.style.zIndex='10000';const container=document.createElement('div');container.className='wm-popup-container';container.style.display='block';container.style.opacity='0';const closeButton=document.createElement('button');closeButton.className='wm-popup-close';closeButton.innerHTML='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>';const content=document.createElement('div');content.className='wm-popup-content';async function loadFormContent(){try{const response=await fetch('/popup-content');const html=await response.text();const parser=new DOMParser();const doc=parser.parseFromString(html,'text/html');const formBlock=doc.querySelector('#block-yui_3_17_2_1_1757469864522_10768');if(formBlock){content.appendChild(formBlock);const scripts=formBlock.querySelectorAll('script');scripts.forEach(script=>{const newScript=document.createElement('script');if(script.src){newScript.src=script.src}else{newScript.textContent=script.textContent}
document.head.appendChild(newScript)});if(typeof Squarespace!=='undefined'&&typeof Y!=='undefined'){setTimeout(()=>{Squarespace.initializeFormBlocks(Y,Y.one(container))},100)}}else{content.innerHTML='<div class="wm-popup-error"><h2>Form Not Found</h2><p>Form block does not exist on /popup-content page</p></div>'}}catch(error){content.innerHTML='<div class="wm-popup-error"><h2>Loading Error</h2><p>Unable to load form content. Please try again later.</p></div>';console.error('Error loading form content:',error)}}
function closePopup(){overlay.style.opacity='0';setTimeout(()=>{if(overlay.parentNode){overlay.parentNode.removeChild(overlay)}
document.body.classList.remove('wm-popup-open');document.body.style.overflow='';setCookie(POPUP_COOKIE_NAME,'true',POPUP_EXPIRY_HOURS)},300)}
function showPopup(){document.body.classList.add('wm-popup-open');document.body.style.overflow='hidden';setTimeout(()=>{overlay.classList.add('wm-popup-active');container.style.opacity='1'},10)}
closeButton.addEventListener('click',closePopup);overlay.addEventListener('click',function(e){if(e.target===overlay){closePopup()}});document.addEventListener('keydown',function(e){if(e.key==='Escape'){closePopup()}});container.appendChild(closeButton);container.appendChild(content);overlay.appendChild(container);document.body.appendChild(overlay);loadFormContent().then(()=>{showPopup()})}
setTimeout(createAutoPopup,1000)});</script>
Remember to update Page ID here
If you need to customize more you can message me or use this AI tool.