-
Re: multiple JavaScript embedded forms on a page
Mark Price Sep 8, 2017 10:36 AM (in response to Kristopher Maier)1 of 1 people found this helpfulHi 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!
-
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... });
-
-
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.
-
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.
-
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!
-
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>-
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).
-
-
-