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. Your embed code includes a form element like this:
|
1 |
<form id="mktoForm_1068"></form> |
You’ll want to add ‘style=”display:none”‘ to the element so it is not visible, like this:
|
1 |
<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:
|
1 2 3 4 5 6 7 8 |
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 ensure correct submission of values.
Migrating from Munchkin Associate Lead
Background form submission is one of the recommended replacement methods for Munchkin Associate Lead. The sample HTML page below demonstrates migration at a high level, by reusing the same values which are submitted to Associate Lead.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<html> <head> <!-- Munchkin Code Replace with your own instance code --> <script type="text/javascript"> (function() { var didInit = false; function initMunchkin() { if(didInit === false) { didInit = true; Munchkin.init('CHANGE ME'); } } var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//munchkin.marketo.net/munchkin-beta.js'; s.onreadystatechange = function() { if (this.readyState == 'complete' || this.readyState == 'loaded') { initMunchkin(); } }; s.onload = initMunchkin; document.getElementsByTagName('head')[0].appendChild(s); })(); </script> </head> <body> <!-- Start Embed code. Pasted from Form Actions -> Embed Code except for addition of 'style="display:none"' to the form tag in order to hide it, and instance-specific codes redacted Replace with your own code for testing --> <script src="CHANGE ME"></script> <form id="CHANGE ME" style="display:none"></form> <script>MktoForms2.loadForm("CHANGE ME", "CHANGE ME", "CHANGE ME TO AN INTEGER ID");</script> <!--End Embed Code--> <!--Demo code--> <script> //The same map which is assembled for the Munchkin submission can be reused for the form submission let values = { "Email": "email@example.com", "FirstName": "Test", "LastName": "Record" } //whenReady lets us apply a callback to all mkto forms on the page //the callback function fires whenever a form is completely loaded //for most use cases this will just be used to capture a reference to the form for later usage //submission is done in line here for demonstration only MktoForms2.whenReady(function(form){ //the addHiddenFields methods lets us add arbitrary fields to the form as well as their values form.addHiddenFields(values); //pass the same set of values to associateLead //hashString: secret + email Munchkin.munchkinFunction('associateLead', values, "CHANGE ME"); //submit the form form.submit(); }) </script> </body> </html> |