temp-client.html

<script src="//app-sj01.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_169"></form>
<script>MktoForms2.loadForm("//app-sj01.marketo.com", "410-XOR-673", 169,
function(form) 
    {
    
    var formEl = form.getFormElem()[0];

    // configuration section: list the temp fields to add and the permanent field to write all their values out to
    var tempFields = {
       question1 : 'Favorite car:',
       question2 : 'Favorite movie:',
       question3 : 'Favorite animal:'
    }, 
    tempInputs = [],
    concatIntoField = 'FirstName';
    
    //  utility fn: tag all the outer wrappers with their inner inputs ids to make them easy to find
    for ( var formRows = formEl.querySelectorAll('.mktoFormRow'), i = 0, imax = formRows.length, wrappedInput; i < imax; i++ ) 
    {    
        if ( (wrappedInput = formRows[i].querySelector('INPUT')) && wrappedInput.name) {
            formRows[i].setAttribute('data-wrapper-for', wrappedInput.name);
        }
    }
    
    // interesting elements    
    var concatIntoRow = formEl.querySelector('.mktoFormRow[data-wrapper-for="'+concatIntoField+'"]'),
    concatIntoInput = formEl.querySelector('#'+concatIntoField),
    beforeEl = concatIntoRow;
    
    // insert each temporary field as a clone of the perm field
    for ( var tempField in tempFields ) { 
        if (!tempFields.hasOwnProperty(tempField)) continue;
     
        var tempRow = concatIntoRow.cloneNode(true),
            tempDescriptor = tempRow.querySelector('DIV.mktoFieldDescriptor'),
            tempLabel = tempRow.querySelector('LABEL[for="'+concatIntoField+'"]'),
            tempInput = tempRow.querySelector('INPUT#'+concatIntoField);
        
        // reset all the key fields on the clone
        tempRow.setAttribute('data-wrapper-for',tempField);
        tempDescriptor.className = tempDescriptor.className.replace('mktoFieldDescriptor','');
        tempInput.id = tempInput.name = tempLabel.htmlFor = tempField;
        tempLabel.innerHTML = tempFields[tempField];

        // insert the temp field into the doc
        concatIntoRow.parentNode.insertBefore(tempRow,beforeEl);
    
        // keep a handle to the temp field for later
        tempInputs.push(tempInput);
    }
    
    // disable the permanent field -- in reality you would simply hide it with CSS
    concatIntoInput.value = '(dynamically assembled from car, movie, animal)';
    concatIntoInput.readOnly = true;  
    concatIntoInput.disabled = true;
    
    // make sure our temp fields are all filled in
    form.onValidate(function(status){
        for ( var i = 0, imax = tempInputs.length; i < imax; i++ ) {    
            tempInput = tempInputs[i];
            if ( !tempInput.value ) {
                form.showErrorMessage("This field must be filled in",form.getFormElem().find('#'+tempInput.id));    
                form.submittable(false);
                return;
            }            
        }
        form.submittable(true);        
    });
    
    // concat all the temp fields together and write them to perm field
    form.onSubmit(function(form){
        var newValues = {};
        newValues[concatIntoField] = '';
        for ( var i = 0, imax = tempInputs.length; i < imax; i++ ) {    
            newValues[concatIntoField] += ( newValues[concatIntoField] ? ' | ' : '' )
                + tempInputs[i].name + ' : ' + tempInputs[i].value;
        }
        form.setValues(newValues);
        form.submittable(false);
    });    
        
 });        
</script>