Embed JS directly in a form | Community
Skip to main content
Jo_Pitts1
Community Manager
July 12, 2018
Solved

Embed JS directly in a form

  • July 12, 2018
  • 1 reply
  • 10571 views

All (and particularly the MMoS),

can I embed JS directly on a form.

Not a Marketo landing page or the page the form is embedded on, but directly in the form?

I've tried throwing the script into a rich text field (and then editing the HTML), but it always throws CDATA around it (grrr).

Your thoughts are (as always) appreciated.

Regards

Jo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

You can in fact use a Rich Text area.

The problem isn't actually the CDATA wrapper -- that's outdated, but harmless, and doesn't stop the code from running.

The problem is that because of the way a form is built out in the DOM, your script will be injected and run twice (which can cause really bad bugs).

So you need to take a rather primitive approach to making sure the function in a given RT area runs only once: name the function uniquely (inside the code block) and note the fact that it's already been run to a global object.

<script>

window.MktoForms2BehaviorsRunCache = window.MktoForms2BehaviorsRunCache || {};

(function(){

  var thisBehavior = "behavior1"; // choose unique function name

  if (thisBehavior in window.MktoForms2BehaviorsRunCache) {

    return;

  } else {

    window.MktoForms2BehaviorsRunCache[thisBehavior] = new Date();

  }

  // do your stuff here

 

})();

</script>

Once you wrap the code like this it'll work reliably.

I do greatly prefer to keep behaviors in external files, however, since they can be updated without reapproval or touching the Form Editor at all.

1 reply

SanfordWhiteman
SanfordWhitemanAccepted solution
New Participant
July 12, 2018

You can in fact use a Rich Text area.

The problem isn't actually the CDATA wrapper -- that's outdated, but harmless, and doesn't stop the code from running.

The problem is that because of the way a form is built out in the DOM, your script will be injected and run twice (which can cause really bad bugs).

So you need to take a rather primitive approach to making sure the function in a given RT area runs only once: name the function uniquely (inside the code block) and note the fact that it's already been run to a global object.

<script>

window.MktoForms2BehaviorsRunCache = window.MktoForms2BehaviorsRunCache || {};

(function(){

  var thisBehavior = "behavior1"; // choose unique function name

  if (thisBehavior in window.MktoForms2BehaviorsRunCache) {

    return;

  } else {

    window.MktoForms2BehaviorsRunCache[thisBehavior] = new Date();

  }

  // do your stuff here

 

})();

</script>

Once you wrap the code like this it'll work reliably.

I do greatly prefer to keep behaviors in external files, however, since they can be updated without reapproval or touching the Form Editor at all.

Jo_Pitts1
Jo_Pitts1Author
Community Manager
July 12, 2018

Sanford,

thanks - that is excellent.

I eventually realised that for what I was trying to achieve (pop up T&Cs with no control of anything outside the form) I could use a CSS only approach you detailed for me a while back (Pop up Lightbox from inside form ). 

Cheers - and as always, thank you so much for the help.

Regards

Jo