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;

    form.submittable(true);
    
    window.addEventListener('message',function(event){
        if ( event.data == "ok go" ) {
            console.log('Checkbox checked,removing iframe');
            ifr.remove();
        }
    }, false);

    form.onSubmit(function(values, followUpUrl){
        console.log( 'submit 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);
        return false;
          });
    });