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.

[Grégoire_Miche2]

Hi Kenny Elkington​,

the screenshots are gone from your post.

-Greg

[Bruce_Bailey]

It appears I am late to the dance with this but it seems with new code releases I can't post my CMS forms to https://app-ab1512.marketo.com/index.php/leadCapture/save soooooo

Trying to get the below code to fire from a completely blank page and reloading it but it does not seem to want to fire.  And now getting the error in console: mktoForm_1081 is undefined

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

<form id="mktoForm_1081"></form>

<script>

    MktoForms2.loadForm("//app-ab1512.marketo.com", "110-GBK-212332", 1081);

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

mktoForm_1081.addHiddenFields({

    "Email":"bruce@test.us",

    "FirstName":"Bruce",

    "LastName":"Test",

    "Company":"TEST Agency"

    });

mktoForm_1081.submit();

</script>

[Bruce_Bailey]

I didn't see there was another 50 responses hidden...oooops... found the goods up there

MktoForms2.whenReady(function(form){
    form.onSuccess(function(vals,tyURL){

  return false;

});
       

[Irfan_Qureshi]

This was a great approach. I modified the code a bit for my needs. 

1. <script src="//app-lon02.marketo.com/js/forms2/js/forms2.min.js"></script>  
2. <form id="mktoForm_1554" style="display:none !important"></form>  
3. <script type="text/javascript">  
4.   MktoForms2.loadForm("//app-lon02.marketo.com", "XXX-XXX-XXX", XXXX);  
5.   // $('#test-form').submit(function( event ) {  
6.   // DOMContentLoaded ensures that the entire page is loaded first  
7.   // This helps prevent any issues where JQuery is not in the header of the page  
8. document.addEventListener("DOMContentLoaded", function(){  
9.  //I associated the event with button click  
10.     $('#form-button').on('click', (e) => {  
11.       var marketoForm = MktoForms2.allForms()[0];  
12.       let obj = {  
13.           //These are the values which will be submitted to Marketo  
14.           "Email": $('#Insert-Field-ID').val(),  
15.           "FirstName": $('#Insert-Field-ID').val(),    
16.           "LastName": $('#Insert-Field-ID').val()  
17.       };  
18.       marketoForm.addHiddenFields(obj);  
19.       //This helped in debugging to see if the values are collected  
20.       console.log('dump obj:', obj);  
21.       marketoForm.submit();  
22.   });  
23. });  
24. </script>  

[Alex_Vallerand]

Hi There,

Thanks for the great post and all the comments! I've actually been trying to submit the same form multiple times (but more than twice) to register multiple users using 1 form. I've been successful at submitting the form twice but anything beyond that I can't seem to be able to do it. I've tried many different things and still can't seem to figure it out, my goal is to not have many hidden forms so that I can easily reuse this code for other pages and forms. The forms are being loaded just not via code.

Below is the code that I got from one of SanfordWhiteman's posts. In my form I have a particular field that they can choose the number of users they want to register 1-5 and based on that number different fields will show up for the user to enter First/Last/Email for each.

<!---------------Submitting more than 1 lead------------------------------------->

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

<script>// <![CDATA[

MktoForms2.whenReady(function(form) 

{

    var originalValues;

    var user1LastName;

    var user1FirstName;

    var user1Email;

    form.addHiddenFields({'_mkt_trk':''});

    form.onSubmit(function(form)

    {

        originalValues = form.getValues();

        user1LastName = $('input[name="flowjoLicenseUserLastName1"]').val();

        user1FirstName = $('input[name="flowjoLicenseUserFirstName1"]').val();

        user1Email = $('input[name="flowjoLicenseUserEmail1"]').val();

    });

    form.onSuccess(function(vals, thankYouURL) 

    {

      this.onSuccess(); // clear onSuccess for 2nd run

      this.setValues

      ({

        'LastName': user1LastName,

        'FirstName': user1FirstName,

        '_mkt_trk': '',

        'Email': user1Email

      });

      this.submit(); // send it again

    }.bind(form));

  });

// ]]></script>

My goal is tack on a for loop to submit integrate over the number of users needed to be added, as such.

My goal is to use a for loop to iterate over the submission

 

for (i = 1; i < numberOfLicences ; i++)

        {

            console.log(i)

            if (i == 1)

            {

                form.onSuccess(function(vals, thankYouURL) 

                {

                    //this.onSuccess(); // clear onSuccess for 2nd run

                    this.setValues

                    ({

                            'LastName': user1LastName,

                            'FirstName': user1FirstName,

                            '_mkt_trk': '',

                            'Email': user1Email

                    });

                    this.submit(); // send it again

                    return false;

                }.bind(form));

                continue;

            }

            else if (i == 2)

            {

                form.onSuccess(function(vals, thankYouURL) 

                {

                    //this.onSuccess(); // clear onSuccess for 3nd run

                    this.setValues

                    ({

                            'LastName': user2LastName,

                            'FirstName': user2FirstName,

                            '_mkt_trk': '',

                            'Email': user2Email

                    });

                    this.submit(); // send it again

                    return false;

                }.bind(form));

                continue;

            }

.... and so on

 FYI. numberofLicences is retrieved from user input on the form.

However, this does not seem to work. It feels like the page does refresh but doesn't go do the thank you page, also if I place breaks in the code it also doesn't feel like it's running it. things I'm not too certain of is if all of the different form.onSuccess functions run simultaneously and skips all together the for loop when the form is submitted..a little lost, so all help is welcomed.

Thanks a bunch!