MktoForms2 :: Destyle and Restyle Marketo form

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form data-submit-text="Restyled Arrow!" id="mktoForm_96"></form>
<script>MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 96,
    function(form) {   
        var formEl = form.getFormElem()[0], submitEl = formEl.querySelector('BUTTON[type="submit"]');
    
        // remove inline STYLEs within FORM tag
        for ( var ss = document.styleSheets, i = 0, imax = ss.length; i < imax; i++ ) { 
            if ( (ss[i].ownerNode || ss[i].owningElement).parentNode == formEl )  { 
    ss[i].disabled=true; 
            }
        }
    
        // swap in button text
        submitEl.innerHTML = formEl.getAttribute('data-submit-text');
    
    });
</script>

CSS

.mktoForm .mktoButtonWrap .mktoButton {
display: inline-block;
white-space: nowrap;
background-color: #ccc;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(to bottom, #eee, #ccc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#eeeeee", EndColorStr="#cccccc");
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
.mktoForm .mktoButtonWrap .mktoButton:hover {
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(to bottom, #fafafa, #ddd);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr="#fafafa", EndColorStr="#dddddd");
}
.mktoForm .mktoButtonWrap .mktoButton:active {
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
.mktoForm .mktoButtonWrap .mktoButton:focus {
outline: 0;
background: #fafafa;
}
.mktoForm .mktoButtonWrap .mktoButton:before...