Add custom class to Marketo form submit | Community
Skip to main content
E
ErikHe1
Level 5
December 20, 2016
Solved

Add custom class to Marketo form submit

  • December 20, 2016
  • 5 replies
  • 7425 views

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?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman
MktoForms2.whenReady(function(form){
var formEl = form.getFormElem()[0],
    submitEl = formEl.querySelector('input[type="submit"]');
  submitEl.className += ' om-trigger-conversion';
});

But don't expect miracles when combining two different form event models. You might need to get a developer involved. Note this clearly has the bug I mentioned above, where it triggers on an attempted submit, not on actual success.

5 replies

Justin_Cooperm2
Justin_Cooperm2
Level 10
December 20, 2016

http://developers.marketo.com/examples/forms2/example4.html

This example shows you doing something client-side on submit of the form.

Justin

SanfordWhiteman
SanfordWhiteman
Level 10
December 20, 2016

I don't think you mean just a (CSS) class attached to the literal HTML button... has to be a backing script if CSS is even involved at all.

Yes, use onSuccess (not onSubmit) because only the former depends on conversion. Not that the latter is subject to common failure or anything, but the possibility is explicitly there (think Tracking Protection).

Anyway, if you show what the 3rd-party tool uses, I can tell you how to call it from onSuccess.

E
ErikHe1Author
Level 5
December 20, 2016

Hi Sanford,

Thanks for the reply. It is for Optinmonster and they require the form submit to be using a specific class:

<input type="submit" class="om-trigger-conversion" value="Submit" />

Would you recommend adding this to the <form> part when embedding the form or do you have a good recommendation on how I would do this with a Marketo form?

/Erik

SanfordWhiteman
SanfordWhitemanAccepted solution
Level 10
December 20, 2016
MktoForms2.whenReady(function(form){
var formEl = form.getFormElem()[0],
    submitEl = formEl.querySelector('input[type="submit"]');
  submitEl.className += ' om-trigger-conversion';
});

But don't expect miracles when combining two different form event models. You might need to get a developer involved. Note this clearly has the bug I mentioned above, where it triggers on an attempted submit, not on actual success.

Callum_Pirie
Callum_Pirie
Level 3
October 10, 2018

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
SanfordWhiteman
Level 10
October 10, 2018

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

Callum_Pirie
Callum_Pirie
Level 3
October 11, 2018

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

E
ErikHe1Author
Level 5
October 15, 2018

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
SanfordWhiteman
Level 10
October 15, 2018

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
Callum_Pirie
Level 3
October 15, 2018

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
SanfordWhiteman
Level 10
October 15, 2018
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:

https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

Callum_Pirie
Callum_Pirie
Level 3
October 15, 2018

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

Terms & ConditionsAccessibility statement

Loading footer...