jQuery works off and on

[Anonymous]

I'm having a weird jQuery issue where the call works sometimes. I'm not loading jQuery since it is baked into form2.js. Here are the details.

Why I'm using it: I'm using it to add a class to form fields and the submit button so that it will respect my CSS.

<script>
jQuery( ".mktoButton" ).addClass( "btn btn-primary" );
jQuery('.mktoField').addClass('form-control');
</script>

Template + Form

1. I've pasted these two snippets into a Guided landing page template.

2. Created a landing page and used this template

3. The form loads initially with the script firing and the input has these classes "mktoField mktoTextField mktoHasWidth mktoRequired form-control"

4. Refresh the page and the script does not fire. The input loses the class "form-control". Same for the button.

[SanfordWhiteman · Accepted solution]

You must use the Marketo Forms 2.0 events model when customizing forms. The jQuery (i.e. DOMContentLoaded) event model will not work, period.

MktoForms2.whenReady(function(form){
  // form element form.getFormElem()[0] is now available
});

[Anonymous]

Ah! That did it. New to Marketo here. Thanks for the help!