How to Connect OptinMonster with a Custom Marketo Form

In addition to our native Marketo integration, OptinMonster makes it easy for you to use a custom Marketo form in your campaigns. You can use a custom Marketo form to add additional fields to your form or other custom functionality.

In this article, you’ll learn how to add a custom Markto form to your OptinMonster campaign.

Before You Start

Here are some things to know before you begin:

  • This article assumes you’ve already created a campaign in your account to add your custom Marketo form to.
  • Custom Marketo forms don’t automatically track conversions when they are submitted in OptinMonster. It’s important to update your custom Marketo form code as instructed in this guide.
  • You may need to add custom CSS to style your form as desired. Custom Marketo forms do not automatically inherit the campaign’s template styling.
  • When adding a custom Marketo form, the form actions cannot be set in the Design area of the campaign builder. It is also not possible to display the Success View of your campaign. You’ll need to specify a redirect URL or success message through your Email Service Provider Account settings when you create the form.

Edit Form Code

Before your custom Marketo form can work in OptinMonster, you’ll need to make a few modifications to the embed code you’re provided.

The embed code you receive will look something like the following:

<script src="//app-aba.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_#####"></form>
<script>MktoForms2.loadForm("//app-aba.marketo.com", "###-LLL-###", #####);</script>
You’ll need to add:
  • A div with the ID optinmonster-form-success below the Marketo form code with your success message.
  • The onSuccess function to track conversions as outlined below.

The above additions will cause your form code to look similar to the following:

<script src="//app-aba.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_#####"></form>
<script>
    MktoForms2.loadForm("//app-aba.marketo.com", "###-LLL-###", #####, function(form) {
        var formEl = form.getFormElem()[0];
        var submitEl = formEl.querySelector('button[type="submit"]');
        form.onSuccess(function(values, followUpUrl) {
            /* // Get the form's jQuery element and hide it
             */
            form.getFormElem().hide();
            /* // show confirmation
             */
            document.getElementById('optinmonster-form-success').style.opacity = 1;
            
            // Trigger a conversion of the form.
            om{{id}}.Listeners.convert();
            
            // Close the campaign.
            om{{id}}.startClose();

            
            /* // Return false to prevent the submission handler from taking the lead to the follow up url
             */
            return false;
        });
    });
</script>
<div id="optinmonster-form-success" style="color:#fff;text-align:left;opacity:0;transition: all 0.3s ease;">YOUR SUCCESS MESSAGE HERE</div>

Add Custom Marketo Form

You can add extra fields to your form or include other custom functionality using a custom Marketo form in OptinMonster.

To add a custom Marketo form to your OptinMonster campaign, follow these steps:

  1. Log into your Marketo account and create the form you wish to add to your OptinMonster campaign.
  2. Follow the instructions provided in the previous section of this guide to edit the form embed code Marketo provided you with.
  3. Next, follow our Custom HTML integration guide to add the form code to your campaign.
  4. When you’re finished, click Save.

Troubleshooting

What does the onSuccess code do?

The onSuccess addition allows your campaign to track conversions and set a cookie when the form is successfully submitted. Without this addition, no conversions will be tracked or cookies set on form submission.