JSFiddle - React, Tailwind, and code Playground

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_96"></form>

JavaScript

MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 96,
    function(form) {
    
    var ifr;

    window.addEventListener('message',function(event){
        if ( event.data == "ok go" ) {
            console.log('checkbox checked,removing iframe');
            document.body.removeChild(ifr);
        }
    }, false);

    form.onSuccess(function(){
        console.log( 'submit successful complete, creating iframe' );
        ifr = document.createElement('iframe'); 
        
        // here you would use your lightbox code and an external iframe
        ifr.setAttribute('srcdoc','<HTML><HEAD></HEAD><BODY><INPUT type="checkbox" onclick="parent.postMessage(\'ok go\',\'*\');">I am the iframe, waiting for you to check the checkbox.</BODY></HTML>');
        document.body.appendChild(ifr);
        
        // because we're about to return false, this would leave the form behind in "frozen" state, so clean it from the DOM instead
        document.body.removeChild( this.formElem[0] );
        return false;
          });
    });