Make a Marketo Form Submission in the background

[Kenny_Elkington]

This post originally appears on the Marketo Developers Blog

When your organization has many different platforms for hosting web content and customer data it becomes fairly common to need parallel submissions from a form so that the resulting data can be gathered in separate platforms. There are several strategies to do this, but the best one is often the simplest: Using the Forms 2 API to submit a hidden Marketo form. This will work with any new Marketo Form, but ideally you should create an empty form for this, which has no fields:

This will ensure that the form doesn’t load any more data than necessary, since we don’t need to render anything. Now just grab the embed code from your form and add it to the body of your desired page, making a small modification. You embed code includes a form element like this:

<form id="mktoForm_1068"></form>

You’ll want to add ‘style=”display:none”‘ to the element so it is not visible, like this:

<form id="mktoForm_1068" style="display:none"></form>

Once the form is embedded and hidden, the code to submit the form is really quite simple:

var myForm = MktoForms2.allForms()[0]; 
myForm.addHiddenFields({ 
     //These are the values which will be submitted to Marketo 
     "Email":"test@example.com", 
     "FirstName":"John", 
     "LastName":"Doe" }); 
myForm.submit();

Forms submitted this way will behave exactly like if the lead had filled out and submitted a visible form. Triggering the submission will vary between implementations since each one will have a different action to prompt it, but you can make it occur on basically any action. The important part is setting your fields and values correctly. Be sure to use the SOAP API name of your fields which you can find with Export Field Names to esnure correct submission of values.

[SanfordWhiteman]

Search my posts for "DNN" and there's an example with a DotNetNuke CMS form.

[Anonymous]

I'm trying to map user input values from a non marketo form and submit these values in a hidden marketo form. I've had success with this in the past, but seem to have an issue with triggering the .submit( ) action.

Below is the code and here is a demo Codepen: http://codepen.io/grahamd711/pen/rybeVX

Any help would be appreciated!

<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">

   <input id="email" type="text">

   <input id="submit" type="submit">

</form>

<script type="text/javascript">

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

  $('#test-form').submit(function( event ) {

    MktoForms2.whenReady(function(form){

      form.addHiddenFields({

      //These are the values which will be submitted to Marketo

      "Email": $('#email').val()

      });

      console.log('this is working');

      console.log($('#email').val());

      form.submit();

    });

  });

</script>

[SanfordWhiteman]

You have the event flow inverted from the way I would do it.  Here's a working adaptation of your code:

http://codepen.io/figureone/pen/7e7040151d6e8c8bf65909fdc8fc52c4/

[Anonymous]

Awesome work as always Sanford Whiteman​ ! Lets say I wanted to map multiple input fields, would I be able to turn the fieldMap into an array that contains them? If more input fields needed to be added, I could just add them to the array. Might be syntax error, but the Marketo lead DB is only recording the FirstName in the below example.

Marketo Form Submit - JSFiddle

  var customFormData = {

    formSelector : '#test-form',

    fieldMap : [{

      marketo : ('Email', 'FirstName'),

      custom : ('#email', '#firstname')

    }]

  }

[SanfordWhiteman]

The fieldMap is an array (that was on purpose!).

It's an array of objects with the same structure:

[
  {
    marketo: 'Email',
    custom: '#email'
  },
  {
    marketo: 'FirstName',
    custom: '#firstname'
  }
]

Your syntax isn't working JS.

[Anonymous]

Hi Sanford Winfield​! Using this code example, is it possible to have multiple custom forms on the same page, listening for each submit event specifically?

Right now, we are getting duplicate entries if the user is filling out just one form since there are multiple forms present. How would we modify the event listener to be specific to each form only?

Thanks!

[SanfordWhiteman]

It's Sanford Whiteman actually.

You can always target a single Marketo form by checking the ID:

MktoForms2.whenReady(function(form){
 var formId = form.getId();
 if ( formId == 999 ) {
   /* stuff for only form 999 */
 }
});

[Anonymous]

Ah sorry about that,  Sanford Whiteman 

Checking for the form ID worked great! The last thing I was hoping to achieve with these custom forms is the ability to control the onSuccess message / URL.

By adding the onSuccess method to the function, I'm preventing the page reload successfully, but the hidden field values are not being submitted. Guessing I'm calling this method too soon?

Marketo Form Submit - JSFiddle

[SanfordWhiteman]

It's not the onSuccess, it's that you have this broken code:

You can't declare objects like that -- it's a syntax error.

The fieldMap is an array of objects:

See Custom Form to Marketo Form Submit

[Anonymous]

Sorry about that. Looks like I did not update the code example correct. Here is the updated version I've been working off of. I believe the syntax for the array is correct and the onSuccess method is still not working. With the onSuccess method removed, the form submits as it should and the data is being pulled into the lead database correct.

Marketo Form Submit - JSFiddle

Would I need to pass in the values of the array in onSuccess? The end goal is to display a success message in the same location on the page as the form used to be instead of directing the user to a new URL/reloading the page.

Thank you for all the help Sanford Whiteman​ !!