MktoForms2 :: StdForm to MktoForm

std2mkto.html

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<!-- / DNN form \ -->
<!-- This is a replica of a DNN form -->
<FORM id="Form" method="POST" onsubmit="return copyToMktoFormAndSubmit();">
    <LABEL for="cntctFirstName">First Name</LABEL>
    <DIV><INPUT type="text" name="01234" /></DIV>
    <LABEL for="cntctLastName">Last Name</LABEL>
    <DIV><INPUT type="text" name="12345" /></DIV>
    <LABEL for="cntctEmail">Email</LABEL>
    <DIV><INPUT type="text" name="23456" /></DIV>
    <LABEL for="cntctPhone">Phone</LABEL>
    <DIV><INPUT type="text" name="34567" /></DIV>
    <LABEL for="cntctCompany">Company</LABEL>
    <DIV><INPUT type="text" name="45678" /></DIV>
    <LABEL for="cntctService">Service</LABEL>
    <DIV>
        <SELECT name="56789">
        <OPTION value="Mobile">Mobile</OPTION>
        <OPTION value="Search">Search</OPTION>
        <OPTION value="Social">Social</OPTION>
        </SELECT>
    </DIV>
    <LABEL for="cntctComments">Comments</LABEL>
    <DIV><TEXTAREA name="67890"></TEXTAREA></DIV>
    <INPUT type="submit" value="Submit" />
</FORM>
<!-- \ DNN form / -->

std2mkto.js

window.copyToMktoFormAndSubmit = function(){
    
    /* Extract DNN values into a generic object */
    var dNNFormToObject = function(formSelector) {
        
        var formEl = document.querySelector(formSelector), formObj = {};
        
        // find the inputs via their accompanying LABELs, since the INPUT names are not human-readable
        for ( var labels = formEl.querySelectorAll('LABEL'), i=0, imax=labels.length; i < imax; i++ ) {
            
            var label = labels[i];
            var dNNInput, dNNInputName, dnnInputValue;
            
            // in most cases, the `for` attribute is the appropriate human-readable name... but there are exceptions using `id`
            dNNInputName = label.htmlFor || label.id;            
    
            // next to the LABEL is a DIV with the form field inside
            dNNInput = label.nextElementSibling.querySelector('INPUT,SELECT,TEXTAREA');
            dNNInputValue = dNNInput.value;
                            
            formObj[dNNInputName] = dNNInputValue;
        }
        
        return formObj;
    }
    
    /* Utility fn to transfer ownprops from object to a new obj, massaging key names */
    var objectMapToObject = function(srcObj,keyMap) {
        
        var keyMap = keyMap || {};
        var destObj = {};
        
        for ( var key in srcObj ) {
            if ( !srcObj.hasOwnProperty(key) ) continue;
    
            destObj[keyMap[key] || key] = srcObj[key];
        }
        
        return destObj;
    }
    
    /*  Utility fn to inject invisible Marketo form, including outer FORM el; N.B. forms2.js must be in HEAD */
    var injectHiddenMktoForm = function(instanceHost, munchkinId, formid, onReady) {
        var formEl = document.createElement('FORM');
        formEl.id = 'mktoForm_' + formid;
        formEl.style.display = 'none';
        document.body.appendChild(formEl);
        MktoForms2.loadForm.apply( MktoForms2, arguments );
    }
    
    // Now the real work is simple...
    
    var dNNForm = dNNFormToObject('#Form');
    
    var mktoObj = objectMapToObject(dNNForm,{ 
        cntctFirstName : 'FirstName',
        cntctLastName : 'LastName',
        cntctEmail : 'Email',
        cntctPhone : 'Phone',
        cntctCompany : 'Company',
        cntctService: 'Service__c',
        cntctComments : 'Comments__c',    
    });
    
    injectHiddenMktoForm("//app-sj05.marketo.com", "401-BUE-785", 1073, function(form){
        form.onSuccess(function(values,thankYouURL){ return false; });
        form.addHiddenFields(mktoObj);
        // form.submit();    
    });

      return false;
}