Re-enabling the “onSubmit” event when Known Visitor HTML is on

[SanfordWhiteman]

Known Visitor HTML (“If Known Visitor, Show Custom HTML” in Form Editor » Form Settings » Settings) shows a slimmed-down form if the current pageview, or existing Munchkin session, is associated with a person in your db.

Typically you show just a Download button, together with a brief reminder of who you think the person is:

When the button is clicked, a regular Filled Out Form activity appears in the Activity Log. It’s an awesome way to reduce friction. But it does have some quirks.

 

Quirk #1: the Person record can’t be totally bare-bones

1. First and foremost, a person needs to have at least the fields First Name, Last Name, and Email Address filled in for KV HTML to work. Otherwise they’re considered “not known enough” and will see the full form. So if you only ask for First & Email to streamline a form, make sure you also populate their Last with a placeholder value like [pending].)

 

Quirks #2-#5: other stuff

Once the requirements for KV HTML are met, it still differs from the full form in other fundamental ways:

2. The Forms 2.0 JS API is not fully supported (that’s what we’ll be fixing today).

3. The KV HTML markup is slightly different from that of a Rich Text field, which is actually good because it means you know when KV HTML is on.

4. The special tokens {{lead.FirstName}} and {{lead.LastName}} are available (yes, even on embedded forms!). Note these are not the same as the similar {{lead.tokens}} — check the missing spaces! — they just happen to use curly-brace syntax.

5. Hidden field Autofill settings are ignored (but native Autofill can be replaced — and vastly improved — using FormsPlus::Util plus the code here).

 

Fixing #2 using #3

That the ever-useful onSubmit event doesn’t fire, out-of-the-box, with KV HTML is not widely known.

Say you were using this Forms API snippet to add the URL as a lead field:

MktoForms2.whenReady(function(mktoForm){
   mktoForm.onSubmit(function(mktoForm){
     mktoForm.addHiddenFields({
        LastFormURL : document.location.href
     });
  });
})

That works for people in (previously) anonymous sessions, and people who didn’t qualify for KV HTML due to #1. But wouldn’t work for everyone else — and it could be devilishly hard to decipher why, since the JS is exactly the same in all cases.

Luckily, this is easy to remedy. The KV HTML is wrapped in a <div> with an identifying class mktoTemplateBox. So, on ready (yes, whenReady does fire), we check if the form has such a <div>. If it does, we add a custom event listener to re-route button clicks via the Forms API.

/**
 * Reroute KV HTML submissions via Marketo submit()
 * @author Sanford Whiteman
 * @version v1 2021-05-02
 * @license MIT
 */
MktoForms2.whenReady(function(mktoForm){
  const formEl = mktoForm.getFormElem()[0],
      kvTemplate = formEl.querySelector(".mktoTemplateBox");
  
  let kvSubmitButtonEl;
     
  if (kvTemplate) {
    kvSubmitButtonEl = kvTemplate.querySelector(".mktoTemplateBox button[type='submit']");   
     
    if(kvSubmitButtonEl){
      kvSubmitButtonEl.addEventListener("click",function(e){
        try {
           mktoForm.submit();
        } catch(err) { /* swallow harmless DOM error */ }
      });
    };
  }
     
});

[ssalas]

Hi @SanfordWhiteman  - I'm hoping to address this quirk: "5. Hidden field Autofill settings are ignored." Two questions:

1. The code you recommend, is that the newer version of what you recommended in this post here?
2. Is FormsPlus::Util only relevant if using Marketo landing pages?

Thank you

[SanfordWhiteman]

1. Yes, that’s the latest public version.
2. No, you always need it.

[dcreagh]

Will this solve the problem where the lead is not added to the program when using  KV HTML.

If I clear my cache and fill out the form, the flows steps: Change Program Status, and Add to SFDC campaign work fine. When I submit using the KV HTML button, I see the form_fill with the correct URL and querystring, but the program is not running at all. 

This is an embedded global form used on many pages. 

[SanfordWhiteman]

@dcreagh what‘s the exact trigger + filters here? KV HTML still logs Filled Out Form, so without additional filters the person will still qualify.

[dcreagh]

@SanfordWhiteman 

Here are the 2 trigger campaigns with the Fills out Form:

The program level trigger for the specific asset:

And the Interesting Moment trigger:

 

When I look at the activity log I see:

When visitor is unknown:

When KV HTML fires on a different asset:

It never posts the lead to the program of the new asset. Nor the old one. 

In both cases, the interesting moment trigger is firing first. When I clear cache to fill out the form, it does get posted to the program.

When I leave the cookie in place, and visit another web page using the same form, I get the KV HTML. I see the fill out form activity, then the interesting moment activity but it never posts to the asset program.

Thanks,

Dennis

[SanfordWhiteman]

You’re filtering on hidden fields that don’t exist without my helper code above. But it‘s not about the Filled Out Form being in KV HTML mode. That trigger fires in all cases. It’s about the filters you put on the trigger.

[dcreagh]

That's what I thought. I will add the javascript outlined above to capture the hidden fields.

Thank you,

Dennis

[Conner_Hatfield]

Very interesting. Thank you for sharing!