Custom Javascript for Specific Form on a Page with Multiple Forms

[Tracey_Bartz1]

We are building a new microsite in Wordpress and adding Marketo forms on each page using the "Marketo Forms and Tracking" plugin. Most of the pages of the site have two forms: one for the primary CTA and one for a secondary CTA. These are set up as different forms in Marketo with different fields. My developer has wrote custom javascript that says:

• After all forms have rendered on the page
• If the submit button is clicked
  • Replace the form with text
  • Block the redirect instructions set in the form editor in Marketo and instead execute the redirect landing page in a new browser window

The issue we are running in to is that the Javascript is being applied to BOTH forms on the page. When we include the form ID in the Javascript, the JS doesn't execute at all. We've tried including the form ID using an "if" statement and using the ID as an array, string, and number type but none of those options seem to work. 

Has anyone else run into this issue and/or have any suggested fixes so we can apply custom JS to only one form on the page?

[SanfordWhiteman]

That plugin shouldn't be used professionally (like all code using that API model, it has a gaping DoS vulnerability).

Anyway, the question should be moved to Products​ before we continue.

[Tracey_Bartz1]

Moved to Products!

Our purpose in using that plugin rather than using the embed code from Marketo is to maintain Form Pre-Fill functionality. Do you have any other workarounds to add a Marketo form to a Wordpress page while still maintaining pre-fill functionality? I also don't want to do an iFrame because of styling issues on mobile.

[SanfordWhiteman · Accepted solution]

Yep, there is another way; I won't get into it now because it's off-topic. It's definitely not acceptable to gain a DoS vulnerability along with that functionality. That stuff is just not fit for the real world.

The direct answer to your question (which has been asked before on Community, too) is to use the built-in Forms 2.0 getId() method.

MktoForms2.whenReady(function(form){
  var formId = form.getId();
  if (formid == 1234) {
    // this will only be executed if the current form is form #1234
  });
});

[Tracey_Bartz1]

Thanks! I'll give this a shot, but I would like to know the other way to achieve this - because I agree I don't want to introduce vulnerability to our site.

[SanfordWhiteman]

Thanks! I'll give this a shot, but I would like to know the other way to achieve this - because I agree I don't want to introduce vulnerability to our site.

You can watch my blog -- I'll be getting to it soonish.

[Anonymous]

I've been trying to implement this code as we've also been running into a similar issue. When someone completes the "Download" form, instead of that form's particular thank you message displaying, both the thank you message for it ("Download") and the "Stay Informed" form on the bottom right of the page display, even if I specify the ID. If you fill out "Stay Informed" though, you only see that particular thank you message, not the "Download" thank you message. Am I missing something here?

I've even tried using loadForm instead of whenReady, since it seems like the latter is called if there are multiple forms "ready" on a single page.

Firefighter SCBA Buying Guide | MSA - The Safety Company | United States

[SanfordWhiteman]

loadForm and whenReady are completely different -- you can't substitute them for each other. loadForm fetches the form descriptor from Marketo and injects the <form> element into the DOM.  whenReady listens for each form to become ready to use.

You have two different onSuccess listeners and they're in conflict.  Check both of these functions and make sure they cooperate in filtering by ID.

[Anonymous]

That makes sense - thank you!