Apply Javascript to Marketo Forms

Highlighted

Apply Javascript to Marketo Forms

Does anyone know how to add javascript to a form so that only have the fields with values "true" display on form. For example "You are subscribed to x, y, z"  The fields I want to display are check boxes. I do not want fields that are "false" and would not be checked to display.  I understand that I need javascript to do this, but i'm not sure how to begin this process. Is the javascript looking at the lead database, or the form itself?

Thanks!

10 REPLIES 10
Highlighted
Anonymous
Not applicable

Re: Apply Javascript to Marketo Forms

You would typically put the javascript in the header of your HTML file.  It would look at the database.

Highlighted
Level 10 - Community Moderator

Re: Apply Javascript to Marketo Forms

You would typically put the javascript in the header of your HTML file.  It would look at the database.

Hmm not really.  Forms 2.0 JavaScript can only run after forms2.js is loaded.  And you wouldn't look at the database but at the existing form fields to hide/show.

Alexis, I'll post a demo later of how this can be done.

Highlighted
Level 10 - Community Moderator

Re: Apply Javascript to Marketo Forms

Alexis, here's how to do this via JS (check the JS snippet at the first link):

http://pages.vaneck.com/Lab-prefill.html?mkt_tok=3RkMMJWWfF9wsRogsqjOZKXonjHpfsX64uQrUa%2B0lMI%2F0ER...

http://pages.vaneck.com/Lab-prefill.html?mkt_tok=3RkMMJWWfF9wsRogsqjOZKXonjHpfsX64uQrUa%2B0lMI%2F0ER...

The first link has a little JS check that hides the unchecked checkboxes (more precisely, hides the form rows with unchecked checkboxes).

Highlighted
Anonymous
Not applicable

Re: Apply Javascript to Marketo Forms

Hi Sanford,

Thanks for the links! We applied the script that you wrote and also were wondering how we would solve to hide form rows with checked boxes? Here is our demo page: http://mcontent.liveintent.com/subscription-graham.html  and as you can see, the whole form is hidden based on the below script.

Would we just change the 'INPUT:checked' to something else?

<script>

MktoForms2.whenReady(function(form){

  var formEl = form.getFormElem()[0];

  for ( var formRows = formEl.querySelectorAll('.mktoFormRow'), i=0, imax=formRows.length;i<imax;i++){

    formRows[i].querySelector('INPUT:checked') || (formRows[i].style.display='none');

  }

});

</script>

Thanks again for the help!

Graham

Highlighted
Level 10 - Community Moderator

Re: Apply Javascript to Marketo Forms

     formRows[i].querySelector('INPUT:not(:checked)') || (formRows[i].style.display='none');

will switch it around.

Highlighted
Anonymous
Not applicable

Re: Apply Javascript to Marketo Forms

Since this JS targets all mktoFormRow it also will hide the rest of the content on the form. Is it possible to target only the form rows that have the input boxes? We tried to target a few child elements with no success so far.

Screen Shot 2016-01-14 at 5.49.57 PM.png

Highlighted
Level 10 - Community Moderator

Re: Apply Javascript to Marketo Forms

Before I answer, are you now trying to hide the checked fields or the unchecked fields?  This seems to have switched from your original post.

Highlighted
Anonymous
Not applicable

Re: Apply Javascript to Marketo Forms

We would be trying to hide the checked fields. Sorry for the confusion.

Highlighted
Level 10 - Community Moderator

Re: Apply Javascript to Marketo Forms

MktoForms2.whenReady(function(form){

  var formEl = form.getFormElem()[0];

  for ( var formRows = formEl.querySelectorAll('.mktoFormRow'), i=0, imax=formRows.length;i<imax;i++){

    !formRows[i].querySelector('INPUT[type=checkbox]:checked') || (formRows[i].style.display='none');

  }

});