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?

[Justin_Cooperm2]

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

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

Justin

[SanfordWhiteman]

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.

[Erik_Heldebro2]

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 · Accepted solution]

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.

[Erik_Heldebro2]

Awesome, I will look into this and if necessary involve a developer.

Thank you Sanford!

[Anonymous]

Where do you put this code? Do you just include in addition to the embed code Marketo gives you or do you work it into that embed code Marketo gives you?

[SanfordWhiteman]

It merely needs to run after the <script> that loads forms2.min.js.

It's not necessary for it to be after the loadForm call in the embed block -- but it's probably going to make more sense to you if you put custom JS after the full embed code.

[Erik_Heldebro2]

Sanford, I figured out a different solution to this

I created an ersatz button with the class and hid the Marketo form button, and added a line to submit the form by clicking the new button. Everything worked fine but of course it doesn't necessarily mean it's better

[SanfordWhiteman]

Yep, that would work visually, though actually the built-in button has special meaning to Munchkin. Just FYI.