This is somewhat of an odd example to post, since there's a Gravity forms integration with Marketo. But, since it's SOAP API-based, I'm pushing my clients to move away from those integrations and use some of the newer APIs. I thought this would be helpful to show you because there's surprisingly few actual examples of doing the Forms 2.0 Javascript API post method that Kenny Elkington recommends. You can probably use this to extrapolate to some other form systems.
So, our goal was to do a hidden form submission from a Gravity form to a Marketo form using the Forms 2.0 Javascript API. This allows you to use your existing forms on your website, but still get a copy of that form submission into Marketo, allowing you to not only have the data in the system but also trigger off the Fills Out Form activity. (A primary benefit of not using the SOAP API method.)
The yellow highlighted section in the code below should be replaced with the Embed code for the form you have built in Marketo as directed in Kenny's post. It is not necessary for this form to have any fields on it, as you will be coding the desired fields.
The green highlighted section should be replaced with the Gravity form ID. To identify the form ID, go to the page with the Gravity form on it, and right click to View Page Source.
In the code, search for the section that begins with <form method=’post’...> The area with id=’... is where you will find the ID for your form. The form id for this form is gform_2.
The blue highlighted sections should contain the SOAP API names of the fields you wish to capture information in on the Marketo lead record. The SOAP API names of the fields can be found by exporting field names in Admin > Field Management.
The red highlighted sections should contain the Gravity form field ids that correspond to the fields that capture the information you wish to store in the corresponding Marketo form field. You can locate these by right clicking on the form field label on the Gravity form and going to Inspect Element.
This will take you to the label section of the code. Underneath that, you should see a section beginning with <input id=”...> This is where you will find the ID that corresponds to that field. In the example below, the input_2_3 refers to the field for Email.
<script src="//app-sj00.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_0000"></form>
<script>MktoForms2.loadForm("//app-sj00.marketo.com", "000-XXX-000", 0000);</script>
<script type="text/javascript">
$(document).ready(function () {
$("#gform_2").submit(function(event) {
var marketoForm = MktoForms2.allForms()[0];
marketoForm.addHiddenFields({
//These are the values which will be submitted to Marketo
"Email": $('#input_2_3').val(),
"FirstName": $('#input_2_1_3').val(),
"LastName": $('#input_2_1_6').val(),
"Address": $('#input_2_6_1').val(),
"City": $('#input_2_6_3').val(),
"State": $('#input_2_6_4').val(),
"PostalCode": $('#input_2_6_5').val(),
"Phone": $('#input_2_2').val()
});
marketoForm.submit();
return false;
});
});
</script>
And that's that. (No doubt here comes Sanford Whiteman to come tell you how to do this better. Always cleaning up after me 
!)
4 Comments
.png)