Make a Marketo Form Submission in the background

Kenny_Elkington
Marketo Employee
Marketo Employee

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.

27674
65
65 Comments
Anonymous
Not applicable

I have included the relevant coffee script code.  I will explain my methods here incase you see a potential error in my logic.  My forms have a class '.marketo-form' and a data attribute marketo-form-id = 'ID'.

The first I am grabbing my form on submit, clearing out potential leftover values, converting submitted values to proper format, adding to the hidden form and submitting.

$('form.marketo-form').submit (e) ->

    e.preventDefault()

    values = ''

    marketo_hidden_form = ''

    values = $.parseJSON($(this).serializeJSON())

    marketo_hidden_form = MktoForms2.allForms()[0]

    marketo_hidden_form.addHiddenFields(values)

    marketo_hidden_form.submit()

# The second block grabs the form ID by data attribute, empties out the form per your comment, than loads the form. 

  if $('form.marketo-form').length > 0

    form_id = $('form.marketo-form').data('marketo-form-id')

    $('#mktoForm_' + form_id).empty()

    MktoForms2.loadForm("//app-sjh.marketo.com", "123-ABC-XYZ", form_id)

Both occur on each page load.

SanfordWhiteman
Level 10 - Community Moderator

Sent you an email with the fix.  Let me know if you didn't get it.

Anonymous
Not applicable

Hi,

I plan on submitting  the hidden form on user login.

Can I specify the type of "Action" while submitting the form.

For e.g. action:"createOrUpdate"

Thanks,

Vishal

Kenny_Elkington
Marketo Employee

No, form submission is always an upsert.  If you need finer grained control, you'll want to use REST.

Anonymous
Not applicable

Perfect . But the upsert will automatically de-dupe looking at the e-mail address and just update the lead right?

All I need is Marketo to cookie and associate the anonymous lead to an existing lead.

I therefore have the following options

1. Submit a hidden form after login - with FirstName, LastName & Email - assuming the fact that it will cookie & update if the lead already exists (which will be the case because they have a user id and password & I am making a rest api call after they sign up. The form submit on sign up would only be to help marketo associate the leads that we imported from CRM when we moved to marketo a month ago).

2. Make a Rest api associate lead call. Associate Lead » Marketo Developers

Thanks,

Vishal

Kenny_Elkington
Marketo Employee

Yep, those are the best choices.

Anonymous
Not applicable

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
Marketo Employee

When is the submission being blocked?

Anonymous
Not applicable

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.

Anonymous
Not applicable

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: https://www.evernote.com/l/AKutGbaCN8VAs6hYEqUaT19TVbmJFxPU-KoB/image.png