Marketo: Embed MKTO forms in Ion

If you’d like to embed Marketo forms on your Ion experiences, check out this post to easily repurpose your Marketo embed code into a reusable ion widget. Taking these steps will enable you to redirect respondents to an Ion page after form submission and to add Ion rule logic to your Marketo forms.

Before we begin

Let’s get started

Update Ion widget code

Add widget code to your Ion library

Add the widget to your ion experience

Funnel Dialogue Data into Marketo

 

If you’d like to embed Marketo forms on your Ion experiences, check out this post to easily repurpose your Marketo embed code into a reusable ion widget. Taking these steps will enable you to redirect respondents to an Ion page after form submission and to add Ion rule logic to your Marketo forms.

Before we begin

The first step is to generate the embed code for the form from Marketo. The Marketo support document linked here outlines the steps to take. Your code will look like the example shared on Marketo's support site, also displayed below:

Let’s get started

Now that you have your Marketo embed code, let’s repurpose it into a reusable Ion widget. There are three items you need to replace in the ion widget code. Let's use the MKTO script sample to help identify these three items.

1. YOUR SCRIPT SOURCE

The script source value in the MKTO example is:

//app-sjint.marketo.com/js/forms2/js/forms2.js

 

2. THE DOMAIN OF YOUR SCRIPT SOURCE

The domain value in the MKTO example is:

//app-sjint.marketo.com

 

3. YOUR MKTO ACCT ID

The ACCT ID value from the MKTO example is:

162-LBR-557

Update Ion widget code

Now that you've identified the three items needed, update the placeholders in the Ion widget code below with the appropriate values. No other modifications should be made to the Ion widget code.

<script src="YOUR SCRIPT SOURCE (#1)"></script>

<div id="mktoFormWrapper"></div>

<script type="text/javascript"> 

(function (runtime) {

      var mktoFormID = "##formID";

      var mktoFormElm = document.createElement('form');

      mktoFormElm.setAttribute("id", "mktoForm_" + mktoFormID);

      var formPosition = document.getElementById('mktoFormWrapper');

      formPosition.appendChild(mktoFormElm);

                  MktoForms2.loadForm("THE DOMAIN OF YOUR SCRIPT SOURCE (#2)", "YOUR MKTO ACCT ID (#3)", mktoFormID, function(form) {

//onSuccess handler

                 form.onSuccess(function(values, followUpUrl) {

                                          // override followUpUrl if another URL is set in ion

                                          var thankYouPageURL = "##thankyou_url";

                                          if (thankYouPageURL.length > 0) {

                                                      top.location.href = thankYouPageURL;

                                                      return false;

                                          }

                                          return true;

                              });

                  });                  

})(ixp.runtime);

</script>

Add widget code to your Ion library

In Ion, navigate to Libraries > Widgets and click on the green plus sign to add a new widget. We recommend labeling the widget something like Embed Form and storing it in a category called Marketo. Paste the widget code above into the editor with the proper values for script source, domain of script source and account id.

Before saving, go ahead and set the form id as required text and Next Page as a required action, like the example below:
 

 

Add the widget to your ion experience

Navigate into the page where you'd like to embed the Marketo form. Drag the widget icon from the Basics palette onto your page and select your new Marketo > Embed Form widget. Next, under Variables in creative studio, enter the form id from your Marketo embed code and select the ion page you seek to redirect to.

On the example above, the Form Id is "1007"

Voila! Your Marketo form is now embedded in your Ion experience! You can even add Ion rule logic to your Marketo form. For example, rules can be used to mark as converted, tag or conditionally redirect respondents.

Funnel Dialogue Data into Marketo

If you’re garnering valuable information prior to form submission, these data points can be funneled into your Marketo form widget with a bit of customization. You’ll need to add hidden fields to your Marketo form to receive these data points. Your Marketo embed widget will be updated to save these Ion data points into the corresponding Marketo form fields.

Please reach out to our Support Team for assistance with this last step if needed.