An Example of Hidden Forms 2.0 API Form Post Method with Gravity Forms

Anonymous
Not applicable

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 !)

2602
4
4 Comments
SanfordWhiteman
Level 10 - Community Moderator

No doubt here comes Sanford Whiteman to come tell you how to do this better

Well, ya caught me.   

This technique doesn't work with Gravity Forms validation. You actually need to tap into the Gravity API to make this work portably.

Anonymous
Not applicable

The Gravity forms guys we're working with decided to modify the code to work on click instead of on submit. It definitely does submit data into Marketo. But I think you could be right about the validation being bypassed. They're still looking at it. So, in a week or so they may come to the same conclusion you did. We'll see...

SanfordWhiteman
Level 10 - Community Moderator

Right, it'll submit to Marketo but the GF config will be bypassed.

I actually thought you'd unpublished the post last week to look into that!

Anonymous
Not applicable

I did and then they told me it was working! I may have to unpublish it again until these guys get their stuff together.