Add custom class to Marketo form submit

[Erik_Heldebro2]

Hi,

I need to embed a Marketo form which has a custom class added to the form submit button to track conversions in a third-party tool. What would be the most efficient way of doing this?

Should I add a custom function for onsuccess or should is there a simple way of fixing this?

[Callum_Pirie]

Thanks again guys,

So regarding this hidden <a> tag Sanford do you know what the full code is incase I imput it wrong?

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

<form id="mktoForm_1109"></form>

<script>

    MktoForms2.loadForm("//app-lon08.marketo.com", "625-GXJ-187", 1109);

</script>

Do i get rid of this??

<script>

    MktoForms2.whenReady(function(form){

var formEl = form.getFormElem()[0],

    submitEl = formEl.querySelector('input[type="submit"]');

  submitEl.className += ' om-trigger-conversion';

});

</script>

[SanfordWhiteman]

MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0];
  form.onSuccess(function(vals,tyURL){
    var tyLoc = document.createElement("a");
    tyLoc.href = tyURL;
    tyLoc.className = "om-trigger-conversion mchNoDecorate";
    formEl.appendChild(tyLoc);
    tyLoc.click();
    return false;
  });
});

Do i get rid of this??

<script>

MktoForms2.whenReady(function(form){

var formEl = form.getFormElem()[0],

submitEl = formEl.querySelector('input[type="submit"]');

submitEl.className += ' om-trigger-conversion';

});

</script>

Yes, you aren't using that method.  But please if posting code always use the syntax highlighter in Advanced Editor:

[Callum_Pirie]

Hi Sanford thanks for this.

just to confirm the full code I am using is the code you added with 11 lines? Sorry just wanted to make sure.

Thanks again

[SanfordWhiteman]

Yes.

[Callum_Pirie]

Sorry Sanford I tried the following but i'm obviously doing something wrong...

<script src="//app-lon08.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1145"></form>
<script>
   MktoForms2.whenReady(function(form){  
  var formEl = form.getFormElem()[0];  
  form.onSuccess(function(vals,tyURL){  
    var tyLoc = document.createElement("a");  
    tyLoc.href = tyURL;  
    tyLoc.className = "om-trigger-conversion mchNoDecorate";  
    formEl.appendChild(tyLoc);  
    tyLoc.click();  
    return false;  
  });  
});  
</script>

[SanfordWhiteman]

Please let me know the URL, and what is "obvious".

[Callum_Pirie]

Hi Sanford

the URL is

Professional Diploma in Digital Marketing | Study Online in Ireland | Enrol

its basically if you hover over the URL it will show the Optin

[SanfordWhiteman]

Where on that page do you have the code?

[Callum_Pirie]

If you hover over the URL the form will appear.

[SanfordWhiteman]

I'm asking on what line of what file are you adding the Forms JS custom behaviors code above?

[Callum_Pirie]

Sorry I just add the following into OptinMonster into Integrations and Custom HTML and then add the following

<script src="//app-lon08.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1109"></form>
<script>
MktoForms2.loadForm("//app-lon08.marketo.com", "625-GXJ-187", 1109, 
function(form) {
    form.onSuccess(function(){
        om{{id}}.Analytics.conversion();
    });
    });
</script>

[SanfordWhiteman]

So you're using other code instead.  You do understand you're making this very confusing?

[Callum_Pirie]

I thought that was the code you gave me? sorry I will just leave it then.

[Callum_Pirie]

Thanks again

[Erik_Heldebro2]

I can also fill in here, not using OptinMonster any longer but what I did to overcome this (somewhat crazy) problem of not being able to add a class to Marketo form elements was to hide the Marketo form button and add a button under the form (styled the same way) that would submit the selected Marketo form when clicked. This would of course trigger error messages when fields were not filled. Not sure if it's the greatest solution but it worked for me accross multiple forms!

[SanfordWhiteman]

I can also fill in here, not using OptinMonster any longer but what I did to overcome this (somewhat crazy) problem of not being able to add a class to Marketo form elements was to hide the Marketo form button and add a button under the form (styled the same way) that would submit the selected Marketo form when clicked. This would of course trigger error messages when fields were not filled. Not sure if it's the greatest solution but it worked for me accross multiple forms!

But that approach has the same problem as adding the class to the submit button (it isn't hard to add the class to the submit button).

The problem is you will be logging a "conversion" to OM whenever somebody clicks the button, not whenever the form is submitted. Thus you'll vastly inflate your numbers.

[Callum_Pirie]

Hi all,

Sorry if this is hijacking however I am having the same issue. Erik or Sanford is this the correct solution for tracking GA conversions for Marketo forms in OptinMonster??

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

<form id="mktoForm_1109"></form>

<script>

    MktoForms2.loadForm("//app-lon08.marketo.com", "625-GXJ-187", 1109);

</script>

<script>

    MktoForms2.whenReady(function(form){ 

var formEl = form.getFormElem()[0], 

    submitEl = formEl.querySelector('input[type="submit"]'); 

  submitEl.className += ' om-trigger-conversion'; 

}); 

</script>

[SanfordWhiteman]

No, because it will log a conversion even if the form doesn't validate.

[Callum_Pirie]

Hi Sanford,

Any idea how to actually get conversions showing in OptinMonster then? Whatever is happening is not showing any conversions

here is a submission i added on Google - conversion goals not working - - The Google Advertiser Community - 1824435

[SanfordWhiteman]

To get only conversions showing, you have to create a hidden link (<a> tag) with that class, then fire a click() event on the link in the Marketo onSuccess listener.

It is very clumsy but the only way that OM will show real conversions.