If you use Marketo, you can create a form to use in an Evergage campaign. This approach ensures that the form is shown to the right people at the right time, and that all of the data captured is returned to Marketo. In Evergage, you can also analyze visitor interactions with your Marketo forms so you know exactly when visitors completed certain actions and how they are related to other behavior on your site.

Since Marketo forms load asynchronously, creating a campaign using a Marketo form is a multi-step process.


This article will detail the process you can follow to embed a form in an Evergage message using the Marketo Embed code and custom Evergage Message JavaScript.





This article assumes that you have integrated Marketo with Evergage and have a working knowledge of Marketo, HTML, and JavaScript. Since Marketo process steps are not provided, please refer to Marketo documentation for guidance on completing any Marketo processes you are not familiar with.


Get the Marketo Embed Code

  1. Log into Marketo and locate the form embed code
  2. You will see a script block similar to this one:
<script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_621"></form>
<script>
MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621);
</script>


Create the Evergage Message HTML

  1. Create or edit an Evergage campaign
  2. Create the message you want to contain the Marketo form
  3. Open the Message Source Code
  4. Copy the sample sections show below from the Marketo Embed Code for your form and paste them into the Message Source Code HTML in the location you want the form to appear
  5. Click APPLY
<script src="//app-sjqe.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_621"></form>


Create the Evergage Message JavaScript

  1. Open the Experience JavaScript code
  2. Copy and paste the following Evergage Message JavaScript code at line 1
Evergage.util.runWhenReady(
    function() {
        return window.MktoForms2 && typeof window.MktoForms2.loadForm === "function"
    }, function() {
        //Place Marketo loadForm function call here
        MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621);
    }
);


Adding custom Evergage tracking to the form

To add custom Evergage tracking to the form (tracking form submissions, clickthroughs, fields etc), you will need to edit the MktoForms2.loadForm function in the Experience JavaScript.  For example, to track a custom action when the form is submitted and track clickthroughs, you would copy and paste the following into the Evergage Message JavaScript code at line 1.  You can replace "Form Submit Action" in the code block below with the name of any action you would like to track.

Add Clickthroughs on Form Submission

Evergage.util.runWhenReady(
    function() {
        return window.MktoForms2 && typeof window.MktoForms2.loadForm === "function"
    }, function() {
        var formSubmissionAction = "Form Submit Action";
        var shouldCloseOnSubmit = true;
        var shouldDismissOnSubmit = true; 
        MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form) {
            form.onSuccess(function(values,followUpUrl) {
                Evergage.trackClickthrough("${message.id}", window.location.href);
                if (formSubmissionAction) {
                    Evergage.trackAction(formSubmissionAction);
                }
                if (shouldCloseOnSubmit) {
                    Evergage.hideMessage("${message.cssSelector}", !shouldDismissOnSubmit);
                }
            });
        });
    }
);


Track Form Fields in Evergage

You could also update the JavaScript to track the form fields as custom attributes within Evergage. To do this, edit the MktoForms2.loadForm function in the Message JavaScript. For example, if your form had the fields Email, FirstName, and LastName and you wanted to track those as custom fields in Evergage when the form is submitted, you could update the message JavaScript to use a custom callback as shown in the code block below:

Evergage.util.runWhenReady(
    function() {
        return window.MktoForms2 && typeof window.MktoForms2.loadForm === "function"
    }, function() {
        var formSubmissionAction = "Form Submit Action";
        var shouldCloseOnSubmit = true;
        var shouldDismissOnSubmit = true; 
        MktoForms2.loadForm("//app-sjqe.marketo.com", "718-GIV-198", 621, function(form) {
            form.onSuccess(function(values,followUpUrl) {
                Evergage.trackClickthrough("${message.id}", window.location.href);
                if (formSubmissionAction) {
                    if (values.Email) {
                        Evergage.setCustomField("userEmail", values.Email, Evergage.Scope.Request);
                    }
                    if (values.FirstName) {
                        Evergage.setCustomField("firstName", values.FirstName, Evergage.Scope.Request);
                    }
                    if (values.LastName) {
                        Evergage.setCustomField("lastName", values.LastName, Evergage.Scope.Request);
                    }
                    Evergage.trackAction(formSubmissionAction);
                }
                if (shouldCloseOnSubmit) {
                    Evergage.hideMessage("${message.cssSelector}", !shouldDismissOnSubmit);
                }
            });
        });
    }
);