Auto-submitting a form for Known Visitors

SanfordWhiteman
Level 10 - Community Moderator
Level 10 - Community Moderator

Marketo's Known Visitor HTML (If Known Visitor, Show Custom HTML in Form Editor » Settings) feature is the obvious answer to a few questions:

 

  • How can I completely ungate an asset no form fillout at all, just a redirect if a web session is is already associated with a known person in my instance?
  • How can I show just a Download button if a session is already associated?
  • How can I auto-submit a form if a session is associated, so I can still switch between the different Advanced Thank You pages in my form setup?

 

Just redirect

This first one is easy: put a <script> that calls location.redirect in your KV HTML. (You do have to manage the redirect URL in JavaScript; it won't use the Thank You URL(s) as you're skipping the form post entirely.)

 

Just a button

The second one is straightforward, too.[1] In the Rich Text editor that pops up when you select Custom HTML, strip everything but the built-in {{form.Button}} token:

 

ss

ss

 

Auto-submit for Known Visitors

The third goal above isn't as easy as you'd expect. If you've dabbled in the Forms 2.0 JS API before, you might think you could do this (purposely screenshot-only so you're not tempted to copy it):

 

ss

 

Nope, that won't work!

 

The reason is a classic bug-you-eventually-round-up-to-intentional: the JS API is not fully supported in KV HTML mode.

 

The whenReady listener itself runs, and the onSuccess event fires... but neither the onSubmit  event, nor calling submit on the form object, will work.

 

So we need to go back to the old-school method of simulating a click event on the button. It works just fine in all browsers, even if primitive:

 

ss

 

Copypasta:

{{form.Button:default=Auto-submit}}
<script>
MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0],
  submitEl = formEl.querySelector(".mktoButton");
  submitEl.click();
});
</script>

 

 

 

Notes

[1] KV HTML does have an unexpected hidden field autofill (i.e. UTM tracking) gap that relates to the 2nd and 3rd bullets equally, but that's separate enough to be covered in another upcoming post.

9875
13
13 Comments
Anna_Blanchet1
Level 4

Thanks @SanfordWhiteman! Is there a way to style the {{form.Button}} token using Custom CSS?  Our form button is styled using Custom CSS but the {{form.Button}} still looks like the default button. 

Disha_Goyal6
Level 4

Hi @SanfordWhiteman, thanks for sharing. This is really helpful.

SanfordWhiteman
Level 10 - Community Moderator

@Anna_Blanchet1 of course, your CSS needs to address the slightly different structure, which is like:

<div class="mktoTemplateBox"><div class="klDownload">
<div><span class="klGreeting"><span class="klTokens">Welcome back, Test!*<br></span></span></div>
<span class="mktoButtonWrap mktoSimple"><button type="submit" class="mktoButton">Download White Paper</button></span><br><br><br>
<div style="text-align: right;"><span class="klGreeting">*<a class="mktoNotYou">Not you? Click here to reset.</a></span></div>
</div>