7 Replies Latest reply on Sep 11, 2017 10:04 AM by Sanford Whiteman

multiple JavaScript embedded forms on a page

Kristopher Maier Sep 8, 2017 7:27 AM

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!

Re: multiple JavaScript embedded forms on a page

Mark Price Sep 8, 2017 10:36 AM (in response to Kristopher Maier)
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!
Like Show 0 Likes(0)

Actions
- Re: multiple JavaScript embedded forms on a page
  
  Sanford Whiteman Sep 8, 2017 10:39 PM (in response to Mark Price)
  
  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... });
  
  Like Show 1 Likes(1)
  
  Actions
Re: multiple JavaScript embedded forms on a page

Sanford Whiteman Sep 8, 2017 10:47 AM (in response to Kristopher Maier)

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.
Like Show 0 Likes(0)

Actions
Re: multiple JavaScript embedded forms on a page

Kristopher Maier Sep 8, 2017 11:02 AM (in response to Kristopher Maier)

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.
Like Show 0 Likes(0)

Actions
- Re: multiple JavaScript embedded forms on a page
  
  Mark Price Sep 8, 2017 11:48 AM (in response to Kristopher Maier)
  
  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!
  
  Like Show 0 Likes(0)
  
  Actions
  - Re: multiple JavaScript embedded forms on a page
    
    Kristopher Maier Sep 11, 2017 9:50 AM (in response to Mark Price)
    
    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>
    
    Like Show 0 Likes(0)
    
    Actions
    - Re: multiple JavaScript embedded forms on a page
      
      Sanford Whiteman Sep 11, 2017 10:04 AM (in response to Kristopher Maier)
      
      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).
      
      Like Show 0 Likes(0)
      
      Actions

Go to original post