Custom Form to Marketo Form Submit

by sanford

HTML

<script src="//app-ab07.marketo.com/js/forms2/js/forms2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form id="mktoForm_2200" style="display:none;"></form>

<form id="test-form" method="POST">
  <input id="email" type="text">
   <input id="firstname" type="text">
  <input id="submit" type="submit">
</form>

JavaScript

MktoForms2.loadForm("//app-ab07.marketo.com", "920-LJZ-738", 2200);
MktoForms2.whenReady(function(mktoForm) {

mktoForm.onSuccess(function(vals,tyURL){
  return false;
});
  
  var customFormData = {
    formSelector : '#test-form',
    fieldMap : [{
      marketo : 'Email' ,
      custom : '#email' 
    },
    {
    	marketo: 'FirstName',
    	custom: '#firstname'
    }]
  }
  
  document.querySelector(customFormData.formSelector).addEventListener('submit', function(e) {

    var customForm = e.target,
        mktoFields = {};
            
    // iterate over fields on custom form to create MktoForms-compat object
    customFormData.fieldMap.forEach(function(field){
      mktoFields[field.marketo] = customForm.querySelector(field.custom).value
    });
    
    // add to Marketo form
    mktoForm.addHiddenFields(mktoFields);
    
    // submit Marketo form
    mktoForm.submit();
    
    // stop custom HTML form submission
    e.preventDefault();

  });
});