Harish Gupta

Marketo Form Conversion using Popup Form

Blog Post created by Harish Gupta on Nov 19, 2019

To see the conversion rate of individual forms, we follow the usual approach of creating the landing page report. Have you ever wondered, what will happen if you are placing the form using the Embedd code on the Marketo hosted Landing Page? Will the Marketo still show the conversion data to you on the landing page performance report or under statistics on a landing page? The answer is NO. Marketo doesn't show any conversion rate if you use Embedd code to place the form on the web page. Let us look at below scenarios where we may encounter this issue:

  • The requirement to place more than one form on the same web page wherein each form should pop up on different CTA

  • You may have only one or two global forms which you are using on all your web pages

  • You may use one form and show the same form in pop up on different CTA on the same landing page

To implement any of these scenarios, the usual approach is to use Embed code, but this will result in the loss of the conversion statistics in landing page performance report and under statistics on the landing page in Marketo.

Marketo treats the embed forms very differently from the Named Form element on the Marketo hosted Landing page. To get the conversion rate data in the Landing page reports, Marketo suggests using the Named Form element on the Marketo hosted Landing page.

If you use both Named Form element and Marketo Embed code, then there is a possibility that the form will show twice in the same pop-up and upon submission, the two conversations will happen for one submit.

Here are the steps to implement this solution successfully

1. Edit your template and add the Named Form Element:

 Eg.

<div class="mktoForm" mktoName="ContactForm" id="ContactForm"></div>

Note: If you have more than one form to use on the same page then add the respective number of Named Form elements on the template. You can add these at the end of all the elements in the template.

2. Add one Rich Text Element

<div class="mktoText" id="scriptText" mktoName="Script for Popup">

3. Edit your Marketo hosted landing page and select the form in the Named form element

No alt text provided for this image

4. Edit the Rich text element created in step 2 and add the below code:

<div>

<a href="#" id="popup-link">Click Me</a>

</div>

<div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<script type="text/javascript">// <![CDATA[

$("#popup-link").click(function(e){

 e.preventDefault();

var formObj=MktoForms2.getForm('FormID");

// Add the Marketo Form Id which you have selected in Step 3. You can get the Form id //either from embed code of the form or select the form and check the four digital form id in // the url eg. https://app-xxx.marketo.com/#FO2346A1ZN13LA1 (2346 is the Form id)

MktoForms2.whenReady(function (formObj) {  

MktoForms2.lightbox(formObj).show();

});

});

// ]]></script>

</div>

Note: If you are using mulitple form on the page then create a custom funtion in the javascript and pass the form id in the function as a paramter and then load the form object using the getForm() function and follow the above approch.

Outcomes