Make a Marketo Form Submission in the background | Community
Skip to main content
Kenny_Elkington
New Participant
September 30, 2015

Make a Marketo Form Submission in the background

  • September 30, 2015
  • 65 replies
  • 35403 views

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:

Empty Form

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.

65 replies

SanfordWhiteman
New Participant
March 10, 2016

MktoForms2.loadForm("//app-sn01.marketo.com", "466-ZFM-936", 2);

MktoForms2.whenReady(function(form){

form.onSuccess(function(vals,tyURL){

  return false;

});

form.addHiddenFields({

     //These are the values which are submitted to Marketo

  "Email": "email6@test.com",

  "FirstName": "Email",

  "LastName": "Test Form 6"

  });

  form.submit();

});

March 10, 2016

Thanks so much @Sanford Whiteman​. Really appreciated.

Is there a way to stop the page to reload all the time?

The form submission is forcing the page to reload which submits the form again and again.

I tried adding an event.preventDefault() with no luck.

SanfordWhiteman
New Participant
March 10, 2016

Classic async programming error!  (I love this stuff.)

The simple reason 1 doesn't work is that MktoForms2.loadForm() loads the form descriptor asynchronously.  Thus the form is not going to be in the MktoForms2.allForms() array on the very next line (when the descriptor hasn't even started to be downloaded).

Use the onReady/whenReady listener:

MktoForms2.loadForm("//app-sn01.marketo.com", "466-ZFM-936", 2);

MktoForms2.whenReady(function(form){

form.addHiddenFields({

     //These are the values which are submitted to Marketo

  "Email": "email6@test.com",

  "FirstName": "Email",

  "LastName": "Test Form 6"

  });

  form.submit();

});

March 9, 2016

Sorry, that's true @Sanford Whiteman​

I've put together 3 examples.

Example 1insights.demo.squiz.net/university/test-page/test-page

Just plain code as per the example above.

<script src="//app-sn01.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_2" style="display:none;"></form>

<script>

  MktoForms2.loadForm("//app-sn01.marketo.com", "466-ZFM-936", 2);

  var marketoForm = MktoForms2.allForms()[0];

  marketoForm.addHiddenFields({

     //These are the values which are submitted to Marketo

  "Email": "email6@test.com",

  "FirstName": "Email",

  "LastName": "Test Form 6"

  });

  marketoForm.submit();

</script>

It is not working because it's throwing the error in the console:

Uncaught TypeError: Cannot read property 'addHiddenFields' of undefined

It looks like the variable "marketoForm" is undefined for some reason and that's why the "addHiddenFields" function is not working. But I have no idea why that variable get undefined after calling MktoForms2.allForms()[0];

Example 2 - insights.demo.squiz.net/university/test-page/another-test-page

I added a simple html form and on submit, I submit to Marketo. And it works!

<form id="mktoForm_2" style="display:none;"></form>

<script src="ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="//app-sn01.marketo.com/js/forms2/js/forms2.min.js"></script>

<script type="text/javascript">

  MktoForms2.loadForm("//app-sn01.marketo.com", "466-ZFM-936", 2);

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

  

  var marketoForm = MktoForms2.allForms()[0];

  marketoForm.addHiddenFields({

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

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

      "FirstName": $('#name').val(),

      "LastName": $('#surname').val()

  });

  marketoForm.submit();

  });

</script>

Example 3 - insights.demo.squiz.net/university/test-page/the-last-test-page

Same as above but instead adding the hidden fields to the Marketo form using jQuery to grab the field values, I hard code the values directly. And it also works!

<form id="mktoForm_2" style="display:none;"></form>

<script src="ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="//app-sn01.marketo.com/js/forms2/js/forms2.min.js"></script>

<script type="text/javascript">

MktoForms2.loadForm("//app-sn01.marketo.com", "466-ZFM-936", 2);

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

  

  var marketoForm = MktoForms2.allForms()[0];

  marketoForm.addHiddenFields({

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

      "Email": "email5@test.com",

      "FirstName": "Email",

      "LastName": "Test Form 5"

  });

  marketoForm.submit();

  });

</script>

So I don't understand what difference having a jquery event like "on submit" makes to the original code...I am a bit lost to be honest.

The issue is that due to our current requirements, I need to submit the Marketo form in the background in the "Thank you " page of the original form in the CMS.

Thanks for your help, really appreciated.

SanfordWhiteman
New Participant
March 9, 2016

Screenshots are hard to troubleshoot.   What's the actual URL?

March 9, 2016

I am getting a really strange error saying:

Uncaught TypeError: Cannot read property 'addHiddenFields' of undefined(anonymous function) @ marketo-test:14

I have stripped down the page to the most basic code to debug but I still get the same error.

See the code in the image attached here: evernote.com/l/AKutGbaCN8VAs6hYEqUaT19TVbmJFxPU-KoB/image.png

February 25, 2016

Not sure. We couldn't get it to recreate the problem consistently. It never blocked the Marketo form submission but I think it was overriding the web page form submission command based on the behavior.

Kenny_Elkington
New Participant
February 24, 2016

When is the submission being blocked?

February 24, 2016

I'm also working on this for an application in Kentico. We tried it on a page but were finding that while the Marketo form submission worked each time, sometimes it kept the lead from continuing to the following page and would disrupt the error message in the case of missing/bad data. I'm wondering how I wait to submit the form until the page has done it's postback and validated the fields. Any insight would be awesome.

The code I'm using looks like this:

<script src="//app-sj10.marketo.com/js/forms2/js/forms2.min.js" type="text/javascript"></script>

  jQuery( document ).ready( function(){

    var f = document.createElement("form");

    f.setAttribute('id',"mkto_1111");

    document.getElementsByTagName('body')[0].appendChild(f);

    MktoForms2.loadForm("//app-sj10.marketo.com", "xxx-xx-xx", 1111);

    $('#form').submit(function() {

      var marketoForm = MktoForms2.allForms()[0];

      marketoForm.addHiddenFields({

        "Email" : $('#p_lt_ctl08_pageplaceholder_p_lt_ctl01_On_lineForm_plcUp_viewBiz_Email_txtEmailInput').val(),

        "Phone" : $('#p_lt_ctl08_pageplaceholder_p_lt_ctl01_On_lineForm_plcUp_viewBiz_Phone_txtText').val(),

        "FirstName" : $('#p_lt_ctl08_pageplaceholder_p_lt_ctl01_On_lineForm_plcUp_viewBiz_FirstName_txtText').val(),

        "LastName" : $('#p_lt_ctl08_pageplaceholder_p_lt_ctl01_On_lineForm_plcUp_viewBiz_LastName_txtText').val(),

      });

      marketoForm.submit();

    });

  });

</script>

return true;

Kenny_Elkington
New Participant
February 9, 2016

Yep, those are the best choices.