New Participant

Accurately background-loading the MktoForms2 global object

Forum|Forum|5 years ago
February 17, 2021
13 replies
12532 views

Content backfill required

Marketo

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

SanfordWhitemanAuthor

New Participant

Yes, this article is totally relevant. The technique here should be used on all sites with a non-guaranteed load order (but sadly people still use other broken code).

F

future_vision

New Participant

@sanfordwhiteman Is this article still relevant? I am having issue using GTM to do the form binding and while I am not a developer, the answer to my issue seems like it might lie in this article.

SanfordWhitemanAuthor

New Participant

Does someone who knows more think that the onSuccess listener may help with issues we are having with Marketo reCaptcha "submission failed, please try again later" issues?

Adding an onSuccess listener won't fix a submission error - by definition it's a different stage. I suggest opening a new thread in Products, describing your reCAPTCHA error and linking to your page.

B

BobLodi

New Participant

Does someone who knows more think that the onSuccess listener may help with issues we are having with Marketo reCaptcha "submission failed, please try again later" issues?

D

DW530

New Participant

My apologies. I was testing to see if this would fix the issue by adding the code from the Marketo blog directly into the code via your post and accidentally updated the live version of the page. I reverted back to the original code following your recommendation. Cache is purged as well so you should see the updated version. https://www.billtrust.com/begin-your-accounts-receivable-automation-journey-sem/ . Do you have a recommend way to accomplish this with your suggestion? Any advise would be greatly appreciated.

<form id="mktoForm_####"></form>
<script type="text/javascript">setTimeout(function(){var mscript = document.createElement("script");mscript.src="//pages.example.com/js/forms2/js/forms2.min.js";var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mscript, s);},1000);</script>
<script>
(function(){
  function btFormsSpeed() {
    if (typeof MktoForms2 != "object") {
        document.addEventListener("load", btFormsSpeed, true);
    } else if (!btFormsSpeed.done) {
        document.removeEventListener("load", btFormsSpeed, true);
        btFormsSpeed.done = true;
        MktoForms2.loadForm("//pages.example.com", "AAA-BBB-CCC", 787);
    }
  }
  btFormsSpeed();
})();
</script>

SanfordWhitemanAuthor

New Participant

But that page doesn’t use the method in this post to add the onSuccess. It tries to just use the MktoForms2 without waiting for it to be ready.

//Make confirmation message appear after form submit	
MktoForms2.whenReady(function (form){
  //Add an onSuccess handler
   form.onSuccess(function(values, followUpUrl){
    //get the form's jQuery element and hide it
    form.getFormElem().hide();
    document.getElementsByClassName('form-msg').style.visibility = 'visible';
    //return false to prevent the submission handler from taking the lead to the follow up url.
    return false;
  });

D

DW530

New Participant

Hi. Thank you for your quick responds. Here's the link to a page where you can see the issue: https://www.billtrust.com/begin-your-accounts-receivable-automation-journey-sem/. Thanks again!

SanfordWhitemanAuthor

New Participant

Can you link to your page please? This way of handling the global MktoForms2 doesn’t affect how an onSuccess listener would work.

D

DW530

New Participant

This is the best explanation I've come across so far. After implementing your suggested solution, it works great besides the "on page" thank you message never appears (not using follow-up thank you landing page). The form simply reloads after the user submits the form. Any idea/guidance how to go about making sure the thank you confirmation message appears without the form reloading? I'm using the method mentioned on the Marketo blog here (Show Thank You Message Without a Follow-Up Landing Page) in addition to your method above to show thank you message after form submission. Thanks in advance for the help!

L

lawrencejohnson

New Participant

This is the exact same page with only 1 difference. The 84 score is with Marketo deferred as in your example here, the second is with Marketo delayed 3 seconds after page load.