Is there a way to add JS to a Marketo form button?

[future_vision]

I am looking for a way to add a datalayer push to a Marketo form button. I thought I had seen a way to add code awhile back in design studio but I must have been mistaken. Is there a way to push a datalayer event with the click of the form button?

[SanfordWhiteman]

"Adding to the button" isn't the way to think about it. You're adding code that fires upon form success.

You can do anything you want in onSuccess:

MktoForms2.whenReady(function(readyForm){
  readyForm.onSuccess(function(submittedValues,originalThankYouHref){
    // do whatever you want here, then set
    // document.location.href = originalThankYouHref 
    // when other tasks are done
    return false;
  });
});

[future_vision]

I already have code in place for a datalayer push for the onsuccess event. I guess what I was looking at were clicks regardless of whether the form was submitted successfully or not but I can see just tracking successful clicks the way you described.

[Ishita_Chawra]

Another discussion on custom form buttons, could be helpful Solved: Custom Form Buttons - Marketing Nation (marketo.com)

[SanfordWhiteman]

Wouldn't really apply, though (that thread is about custom styling, this is about JS code).

[Dave_Roberts]

All buttons on all Marketo forms should natively have the "mktoButton" class built into them. This might not exist if you're using a script to strip classes or something like that, but it should be a fairly reliable selector to script against. Another option would be to build a selector in the context of the "form.mktoForm" element, something like "form.mktoForm button"

My Javascript isn't as good as it could be, but in jQuery you could write this something like:

MktoForms2.whenReady(function(readyForm){
  $('form.mktoForm button.mktoButton').click(function(){
    // data layer push stuff here
  });
});

As Sanford was mentioning you might want to consider the implications of tracking this type of behavior -- I can see it as being useful in the scenario you're outlining (to identify friction w/ form fills) but it could open another can of worms down the road with chasing down "leads" that were actually just errors in data-entry on the form. You may be able to query the form when the button is clicked to check for fields that contain the "mktoInvalid" class to determine if the form has any errors in the fields to further qualify a "button click b/c of errors" from "any button click"?

Maybe the logic would look something like:
>> When the button is clicked, IF there are any fields w/ "mktoInvalid" class, push something that suggests "there is an error in the form entry" -- ELSE, onFormSuccess, push a success event instead.

[SanfordWhiteman]

Don’t need any of that, onValidate runs whenever form submission is attempted.

MktoForms2.whenReady(function(readyForm){
  readyForm.onValidate(function(nativeValid){
     // form submission was *attempted*, log accordingly
  });
});

Also note a click on a particular button isn’t the only way to submit a form.

[Dave_Roberts]

Thanks for keeping me honest here Sanford, I'm always learning a little something more from you -- appreciate it!

[Jasbir_Kaur]

I am sharing a link, if it might be helpful.

https://support.google.com/tagmanager/answer/7679219?hl=en

[SanfordWhiteman]

Problem with this is you'll log an event for people who forgot to fill in a field or in any other way failed to pass validation, in addition to people who successfully submit. Not a very useful event.