How to change the placeholder text in subscribe dialog

How can I change the Jamie-related text in these two fields? Ideally, in a way that is active from the very moment the user sees the dialog (i.e., maybe not via code injection). Thank you!

2 Likes

Code injection → Site footer

<script>

window.addEventListener('load', () => {
    let ghostPortal = document.getElementById('ghost-portal-root');
    let ghostPortalFinder = null;
    let ghostPortalPopupIFrame = null;

    const findInputs = () => {
        let inputName = ghostPortalPopupIFrame.contentDocument.body.querySelector('#input-name');
        let inputEmail = ghostPortalPopupIFrame.contentDocument.body.querySelector('#input-email');

        if (inputName && inputEmail) {
            
            inputName.placeholder = 'My name';
            inputEmail.placeholder = 'email@domain.com';
            
            clearInterval(ghostPortalFinder);
        }
    }


    let portalObserver = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {

            if (mutation.type === 'childList') {
                let nodeList = mutation.addedNodes;

                for (let index = 0; index < nodeList.length; index++) {
                    if (nodeList[index].nodeName === 'DIV') {
                        ghostPortalPopupIFrame = nodeList[index].firstChild;
                        ghostPortalFinder = setInterval(findInputs, 50);
                    }
                }
            }
        });
    });

    portalObserver.observe(ghostPortal, {
        childList: true,
    })
})

</script>

See https://forum.ghost.org/t/source-theme-subscribe-button-text-color/53657