MktoForms2 :: Thumbs Up/Down v2

by sanford

HTML

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<div>
    <span id="wasRelevant1">Was this relevant for you?</span>
    <form id="mktoForm_213"></form>
</div>
<script>
        
    MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 213,
    function(form) { 
    
        var formEl = form.getFormElem()[0];
        
        // duplicate submit button so there are two different "sub-submit" possibilities
        var button1 = formEl.querySelector('BUTTON');
        var button2 = button1.cloneNode();
        button1.parentNode.insertBefore(button2,button1);
        
        // set friendly values on buttons
        button1.innerHTML = "Nope.";
        button2.innerHTML = "Yes, sure!";

        // set real values to pass to server
        button1.value = "No";
        button2.value = "Yes";
            
        // when button is clicked, append its value to the URL
        // in Mkto, search for URL contains /the/page.html and URL contains "#Yes" or "#No"
        button1.onclick = button2.onclick = function(e) {
            window.location.hash = '#' + this.value;
        }
            
    });

</script>

CSS

.mktoForm { 
    display: inline; 
}
.mktoForm BUTTON {
    background-repeat: no-repeat !important;
    background-position: 85% center !important;
    margin-left: 8px !important;
    text-align: left;
    width: 100px;
}