How to Connect OptinMonster with a Custom Marketo Form

OptinMonster makes it easy for you to use a custom Marketo form in your campaigns. You may wish to use a custom Marketo form to show additional form fields in your campaign, or use hidden fields in your form. Follow this guide to learn how to add a custom Marketo form to your OptinMonster campaign.

  1. Edit Form Code
  2. Add to Custom HTML Integration

Step 1 – Edit Form Code

Before you add your custom Marketo form, you will want to make some small adjustments to the form code.

The form code you copy from your Marketo account 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>

Step 2 – Add to Custom HTML Integration

Once you’ve finished editing the form code, you can proceed with adding your form code following our Custom HTML integration documentation.


FAQs

Q: What does the onSuccess code do?

A: 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.