SOLVED

Embed JS directly in a form

Go to solution
Jo_Pitts1
Level 10 - Community Advisor

Embed JS directly in a form

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

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Embed JS directly in a form

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.

View solution in original post

5 REPLIES 5
SanfordWhiteman
Level 10 - Community Moderator

Re: Embed JS directly in a form

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
Level 10 - Community Advisor

Re: Embed JS directly in a form

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

Iason_Kubrakov
Level 2

Re: Embed JS directly in a form

Hi, Sanford! 

Can you please help me to add to the form check for public domains? I'd like to prevent people with public email domains from submitting a form. How can I do that? 

I got a javascript code example, but it breaks my form completely when I add this code with all public domains into a reach text field of the form. Please see the example code I got below. How can it be modified? Thank you! 

  1. var publicDomains = "163.com.21cn.com.2geton.net.aim.com..."; //Public domains put here from this source https://gist.githubusercontent.com/okutbay/5b4974b70673dfdcc21c517632c1f984/raw/b33e9a71edba502d0ed8... 
  2. MktoForms2.whenReady(function(form) {
  3.     form.onValidate(function(builtInValid) {
  4.         if (!builtInValid) return;
  5.         form.submittable(true);
  6.         var values = form.vals();
  7.         var email = values['Email'];
  8.         var emailDomain = email.replace(/.*@/, '');
  9.         if (publicDomains.indexOf(emailDomain) > -1) {
  10.             form.showErrorMessage("Please enter your <b>corporate</b> email address.", form.getFormElem().find('#Email'));
  11.             form.submittable(false);
  12.         } else {
  13.             form.submittable(form.submittable() !== false);
  14.         }
  15.     });
  16. });
SanfordWhiteman
Level 10 - Community Moderator

Re: Embed JS directly in a form

Well, to start off, the code you're trying to use is broken in several ways. You should use the code I posted in this comment on another thread.

After you plug in the fixed code, post a link to the page w/your form if you still see unexpected behavior.

Iason_Kubrakov
Level 2

Re: Embed JS directly in a form

Unfortunately, we don't have front end developer in our team yet, so I'm not very much into JS coding. Thank you!