Apply Javascript to Marketo Forms

[Alexis_D_Alba1]

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!

[SanfordWhiteman]

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).

[Anonymous]

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

[SanfordWhiteman]

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

will switch it around.

[Anonymous]

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.

[SanfordWhiteman]

Also, you seem to have customized your form in such a way that (even with all rows shown) some checkboxes are impossible to check, and others seem to morph from checked to simply orange.  A strange UX, IMO!

[SanfordWhiteman]

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.

[Anonymous]

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

[SanfordWhiteman]

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');

  }

});

[Anonymous]

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

[SanfordWhiteman]

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.