Landing pages - Manual Form embed vs guided template form embed

[Anonymous]

I realize with landing pages, you get more features in the forms; primarily form pre-fill.

But you also lose a lot of flexibility like the ability to control: On submit, on success, etc for controlling conversion scripts, dynamic follow up URL's, and more.

Is there something I'm missing here? Is there a way to control On Submit and On Success form actions when the form has been embedded into landing page using the landing page builder and a mktoFORM guided template section?

As a work around, I'm just using a text section and manually putting form and all JS in manually. Form prefill isn't working. Is that expected?

Any help would be greatly appreciated.

Thanks

[SanfordWhiteman · Accepted solution]

Is there something I'm missing here? Is there a way to control On Submit and On Success form actions when the form has been embedded into landing page using the landing page builder and a mktoFORM guided template section?

Of course. The ​MktoForms2.whenReady ​and ​.whenRendered ​events work just fine on LPs (with native Marketo Form/mktoForm elements).

[Grégoire_Miche2]

+1, this is what the doc says:

adding an html block to a guided landing page can be a little painful, though, unless you do it in the template itself. Read this: Best way to add a script in a guided landing page

-Greg

[Anonymous]

Doh! I knew I was missing something obvious.

I completely overlooked .whenready, and found a very easy way to create JS function that uses variables set in a guided text box called "form config" so the user can control form titles, confirmation messages, choose conversion scripts, followup URL's etc from within the landing page builder.

Thanks for the quick help!

[Anonymous]

Hi Sanford Whiteman,

Is there an easy way to identify which form I'd like to target when using MktoForms2.whenReady

I have multiple forms on a single page (global header and footer form), and I'd like to only target the form that is entered in guided landing page process.

I have written function to get a formnumber variable, so I know which form number I need to target, I'm just not sure how to apply it to ONLY the specified form. Can I pass it as a parameter in the function somehow?

Can you help a n00b out? Any info is greatly appreciated. Cheers

[SanfordWhiteman]

MktoForms2.whenReady(function(form){
  switch(form.getId()){
    case 1234:
       // stuff for form 1234
       break;

etc.

[Anonymous]

Sanford Whiteman​:

Alright, I'm struggling big time. I had a hard time getting switch/case to work for my specific use case. (Maybe I haven't done a proper job explaining my usage.) But here is what I have now, and it's SUPER close. The code only fires if the corresponding form is filled out, but for some reason the onsuccess code runs for as many times as there is forms on the page.
These variables defined in LP editor for each LP:

<script>

//Form number was here, delete this comment if you found solution below. If not, put back here and manually enter for each landing page

var leadsourcedetail = "Test source detail";

var leadsource = "Testing345345423";

var formtitle = "Request a title";

var confirmationmessage = "Thanks!";

var followupurl = "";

var globalconversioncheck = true;

var demoformconversioncheck = true;

var mqlcontentconversioncheck = false;

var productivdeoconversioncheck = false;

var contentdownloadconversioncheck = false;

</script>

Here is my landing page template code. Here is the editable form section in template:

<div class="mktoForm" id="mainform" mktoName="Main Form."></div>

Here is what's directly beneath the editable form section in template.

<script>

//MktoForms2.whenReady("//app-sj17.marketo.com", "xxx-xxx-xxx", formnumber, function (form) {

MktoForms2.whenReady(function(form){ 

  var lpform = document.getElementById('lpformholder').getElementsByTagName('form')[0];

var formid = lpform.id;

var formnumber = formid.slice(-4);

console.log(formnumber+ " is formnumber");

  console.log(form.getId()+" is form.getID");

       // stuff for form added by landing page builder

      MktoForms2.getForm(formnumber).vals({"Lead_Source_Detail__c":leadsourcedetail,

          "LeadSource":leadsource,

          "campaignsClicked":currentcookies

});

      MktoForms2.getForm(formnumber).onSuccess(function() {  

       // stuff for form added by landing page builder  

console.log(formnumber);

if (globalconversioncheck == true) {globalConversions();}

else {};

if (demoformconversioncheck == true) {demoformConversions();}

else {};

if (mqlcontentconversioncheck == true) {mqlcontentConversions();}

else {};

if (contentdownloadconversioncheck == true) {contentdownloadConversions();}

else {};

if (productivdeoconversioncheck == true) {productvideoConversions();}

else {};

    if (followupurl != undefined) {

              form.getFormElem().hide();

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

              document.getElementById('mainformh1').style.display = 'none';       

              return false;}       

else {        // Take the lead to a different page on successful submit

        location.href = followupurl;

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

        return false; 

}; 

});

});

</script>

I'm able to identify when the form that's successfully submitted is or isn't the guided LP loaded form, but for some reason it runs the success code as many times as there are forms on the page. So it's almost working as expected, except that it runs for how many forms are on the page. This causes conversions to run twice, or even up to 6 times on our main website.

Is anything jumping out at you? How can I fire only the scripts I want for this specific form? Should I revisit case/switch? I got the syntax worked out, but was never able to actually get a match to run success code no matter what form I submitted.

Again, any help greatly appreciated. Thanks!

[SanfordWhiteman]

Well, you're adding the onSuccess to your target form for every single form!

That's what's happening here:

  MktoForms2.getForm(formnumber).onSuccess(function() { ... })

There's no condition wrapping this function. You call it every time, regardless of the current form id. So, naturally, it always attaches the a new success listener to the same form. As with standard events, Forms 2.0 events are stacked, not replaced.

The other thing that doesn't make sense is you're expecting all the forms to be ready when any form fires its whenReady listener.  This is a guaranteed race condition:

MktoForms2.whenReady(function(form){
   var someSpecificFormTag = document.querySelector('#someSpecificForm'), // or getElementsByTagName, same exact idea
         someSpecificFormTagsNumericId = someSpecificForm.id.slice(-4); // btw, this should be id.substr(9) as forms can have any # of digits
   MktoForms2.getForm(someSpecificFormTagsNumericId).doSomething(
     // why would this other form be ready for you to do stuff? only the current `form` object is ready right now, in this whenReady call
   );

To attach listeners to a certain form, you must wait for its whenReady to fire. The way you know which form's whenReady is being called is by asking the form var for its internal ID:

MktoForms2.whenReady(function(form){
   var formid = form.getId(),
        someSpecificFormTagsNumericId = document.querySelector('#​lpformholder FORM').id.substr(9)+0,
        someOtherSpecificFormTagsNumericId = document.querySelector('#​footerformholder FORM').id.substr(9)+0;
   switch(formid){
     case someSpecificFormTagsNumericId:
       form.onSuccess(function(vals,tyURL){
         // ... do stuff for interesting form 1...
       });
     break;
     case someOtherSpecificFormTagsNumericId:
       form.onSuccess(function(vals,tyURL){
         // ... do stuff for interesting form 2...
       });
     break;
}
});

[Anonymous]

Thanks so much for that detailed answer Sanford Whiteman​

This is loosely what I started with, but couldn't get it to work. I just now realized what the issue was (and still is in the example you provided) is the data type for the variables. form.getId() returns a number, and my variable for landing page was a string. ARGH!!! This would have saved me hours of toying around with other possible solutions, and clearly getting way off base.

I added a line that simply converts the string to a number and we're off and running. I'm only seeing the proper on success actions for each form. Success!

Thanks again for your help; your knowledge is impressive. Cheers.

Jordan

[SanfordWhiteman]

Ah yes:

  id.substr(9)+0

Really this is because switch always does a strict comparison.

  if( 1234 == "1234" ) console.log(true); // prints true
  switch (1234) { case "1234": console.log(true); } // prints nothing