SOLVED

Re: Add custom class to Marketo form submit

Go to solution
Erik_Heldebro2
Level 8

Add custom class to Marketo form submit

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?

Tags (1)
1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Add custom class to Marketo form submit

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.

View solution in original post

32 REPLIES 32
Justin_Cooperm2
Level 10

Re: Add custom class to Marketo form submit

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

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

Justin

SanfordWhiteman
Level 10 - Community Moderator

Re: Add custom class to Marketo form submit

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
Level 8

Re: Add custom class to Marketo form submit

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
Level 10 - Community Moderator

Re: Add custom class to Marketo form submit

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
Level 8

Re: Add custom class to Marketo form submit

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

Thank you Sanford!

Anonymous
Not applicable

Re: Add custom class to Marketo form submit

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
Level 10 - Community Moderator

Re: Add custom class to Marketo form submit

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
Level 8

Re: Add custom class to Marketo form submit

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
Level 10 - Community Moderator

Re: Add custom class to Marketo form submit

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