multiple JavaScript embedded forms on a page

Anonymous
Not applicable

multiple JavaScript embedded forms on a page

We have a need to have multiple pages on a single webpage. They way the page works is there an initial form that needs to be filled out to access "gated" content, upon submit it would hide/reveal certain content. we would like to add a second form the user could follow up with if they have further questions. My snag is when I enter the JavaScript to the page both forms submit to the last script to load on the page. Any idea how I can get multiple forms to submit to the desired URLs?

Here is how I am loading the forms:

<script type="text/javascript">

MktoForms2.loadForm("//app-***.marketo.com", "***-***-***", 1354, function (form) {

MktoForms2.$("#formPlaceholder_1354").append(form.getFormElem());

// Set values for the hidden fields

form.vals({"productLine":"<%# Eval("ProductLine") %>","application":"<%# Eval("Application") %>","industryType":"<%# Eval("Industry") %>"});

});

//go to URL on submit

MktoForms2.whenReady(function(form){

    //Add an onSuccess handler

    form.onSuccess(function(values, followUpUrl){

      //Take the lead to a different page on successful submit, ignoring the form's configured followUpUrl.

      location.href = "/treating/thank-you.aspx";

      //return false to prevent the submission handler continuing with its own processing

      return false;

    });

  });

  </script>


Thanks!

Tags (2)
7 REPLIES 7
Mark_Price
Level 7

Re: multiple JavaScript embedded forms on a page

Hi Kristopher,

A little hard to troubleshoot without seeing a page, but in looking at the embed, the issue might be with using 'whenReady'.  That will run for multiple Marketo forms after they have loaded and 'are ready'.     If you want to target a specific form, run your code within the loadForm function: 

quick example:

MktoForms2.loadForm("//app-**.marketo.com", "***-***-***", 1354, function(form) {

//Add an onSuccess handler

  form.onSuccess(function(values, followUpUrl){

   //run code here example - hiding form after submit

   form.getFormElem().hide();

   //return false to prevent the submission handler from taking the lead to the follow up url.

   return false;

});

});

Others might have some more suggestions, but I would start with that. 

Hope it helps!

SanfordWhiteman
Level 10 - Community Moderator

Re: multiple JavaScript embedded forms on a page

You can (and should, for portability to Marketo LPs) use whenReady(), but you can check the form ID -- form.getId() -- to switch actions based on which form is firing its readiness at the time.

MktoForms2.whenReady(function(form){

  var formId = form.getId();
  if (formId == 1354) {

    // 1354 is ready

  } else if (formId == 1999) {

    // 1999 is ready

  }

  // ... etc...

});

SanfordWhiteman
Level 10 - Community Moderator

Re: multiple JavaScript embedded forms on a page

For hidden fields, use form.addHiddenFields(), not setValues().  The former will ensure that fields are either set or added and set. The latter will fail if fields don't exist.

Anonymous
Not applicable

Re: multiple JavaScript embedded forms on a page

here is an example of the page:

Best Practices for Printing with UV/LED Curable Inks on Film & Label Stock - Enercon Industries

upon submission the form redirects to the same URL with parameters at the end that hide/reveal certain content.

Best Practices for Printing with UV/LED Curable Inks on Film & Label Stock - Enercon Industries

The request I received was to add a form under the materials in the sidebar. Both forms are on the same page, one is just hidden upon initial load.

Mark_Price
Level 7

Re: multiple JavaScript embedded forms on a page

Hi Kristopher,

There are a few ways to do what you like.   Here's a simple addition to the loadForm example that will unhide an element by id.  Alternatively, you could try targeting by class if needed.

MktoForms2.loadForm("//app-**.marketo.com", "***-***-***", 1354, function(form) { 

//Add an onSuccess handler 

  form.onSuccess(function(values, followUpUrl){ 

   //run code here example - hiding form after submit 

   form.getFormElem().hide();

   //unhide 2nd form

    document.getElementById('idHere').style.display = 'block';

   //return false to prevent the submission handler from taking the lead to the follow up url. 

   return false; 

}); 

}); 

hope it helps!

Anonymous
Not applicable

Re: multiple JavaScript embedded forms on a page

Is there a way to target the formID to set location.href = "/treating/thank-you.aspx";  ?

I am not having luck with the solution above, it hides the form but it is still grabbing the last URL to load and the first form doesn't route properly.
<div id="formPlaceholder_1354>"></div>

SanfordWhiteman
Level 10 - Community Moderator

Re: multiple JavaScript embedded forms on a page

Sure, see my example above. Note you need to grab the

  formid = form.getId()

in the whenReady and then reference it in the onSuccess (so it will be present in the closure of onSuccess).