How to Add UTM Parameters to "Known Visitor" form submission

[Clinton_Hutson]

Hello,

I am trying to use the "if Known Visitor show custom HTML" functionality of Marketo forms.  

While in essence, this works great...I cannot seem to get UTM parameters to pass when submitted by a "Known Visitor".  The fields are contained within the form and set to auto-fill from the URL parameter. 

Also, the data passes over if a new visitor submits the form.  

Any guidance would be greatly appreciated!  Do I need additional logic to accomplish this task? Thanks!

[SanfordWhiteman · Accepted solution]

Yes, in Known Visitor (KV HTML) mode, you need JS as supplied here:

  MktoForms2 :: KV HTML w/Auto-Fill and Cascade v1.1.2

Download FormsPlus::Util (teknkl-formsplus-1.0.5.js) linked in the HTML pane and upload it to your Design Studio — that is, don't serve it directly from the CodePen CDN, thanks.

Then add the JS in the JS pane.

Note this custom version of hidden field Auto-Fill has more features than the built-in Auto-Fill — it's worth using in all cases, not just in KV HTML.  For example, the custom code seeks multiple areas ("channels") for matches, so you can use either the current query string or a cookie for the same field.

[Clinton_Hutson]

@SanfordWhiteman I have done this on the page here, but I am running into an error where the form is locked (i.e: won't submit).  

Any ideas what the issue could be? 

Also, attached below is the actual code used: 

<span style="font-size: 16px;">Welcome back, {{lead.FirstName}} {{lead.LastName}}.</span><br /><br />{{form.Button:default=Request a Demo}}<br /><br /><span style="font-size: 16px;">{{form.NotYou:default=Not you?}}</span>
<script>// <![CDATA[
MktoForms2.whenReady(function(form) {

var fieldFillRules = [

{
name : "UTM_Source_Most_Recent__c",
channel: "referrerQuery",
selector: "utm_source"
},
{
name : "Most_Recent_UTM_Medium__c",
channel: "referrerQuery",
selector: "utm_medium"
},
{
name : "UTM_Campaign_Most_Recent__c",
channel: "referrerQuery",
selector: "utm_campaign"
},
{
name : "UTM_Term_Most_Recent__c",
channel: "referrerQuery",
selector: "utm_term"
},
{
name : "uTMContentMostRecent",
channel: "referrerQuery",
selector: "utm_content"
},
{
name : "marketingAsset",
channel: "referrerQuery",
selector: "ppc_asset"
},
{
name : "Most_Recent_Source_Detail__c",
channel: "referrerQuery",
selector: "ssd"
},
{
name : "Most_Recent_Source_Detail__c",
channel: "referrerQuery",
selector: "person_notes"
},
{
name : "Most_Recent_Source__c",
channel: "constant",
selector: "Demo"
},
{
name : "demoProductSelection",
channel: "constant",
selector: "Meeting Solutions"
},
];

/* --- NO NEED TO EDIT BELOW THIS LINE! --- */

var liveChannels = {
cookie : FormsPlus.util.Cookies.get(),
query : FormsPlus.util.URI.URI().search(true),
referrerQuery : FormsPlus.util.URI.URI(document.referrer).search(true),
localStorage : localStorage,
sessionStorage : sessionStorage
};

var mktoFields = fieldFillRules
.reduce(function(acc, fieldDescriptor) {
if( !acc[fieldDescriptor.name] ){
acc[fieldDescriptor.name] = fieldDescriptor.channel == "constant"
? fieldDescriptor.selector
: liveChannels[fieldDescriptor.channel][fieldDescriptor.selector];
}

return acc;
}, {});

form.addHiddenFields(mktoFields);
});
// ]]></script>

[SanfordWhiteman]

• you don't want to put the code inside the KV HTML box itself; include it as a separate script
• the code depends on FormsPlus::Util, which also must be loaded as an external script (upload it to your Design Studio)

[mzz]

@SanfordWhiteman , can you clarify the first bullet? Where are we putting the code?

[SanfordWhiteman]

---

@SanfordWhiteman , can you clarify the first bullet? Where are we putting the code?

---

In a <script> tag, after the standard embed code.

[mzz]

Thanks @SanfordWhiteman . 

To clarify, we need to modify the JS code to match the hidden fields on our form? And then we need to add the updated JS code to the landing page template? Thank you, sorry if these questions sound dumb.

[SanfordWhiteman]

---

To clarify, we need to modify the JS code to match the hidden fields on our form? And then we need to add the updated JS code to the landing page template? Thank you, sorry if these questions sound dumb.

---

That’s right.