Include a Marketo field in custom HTML for a known visitor | Community
Skip to main content
Craig_Boren
Craig_Boren
Level 2
November 27, 2018
Question

Include a Marketo field in custom HTML for a known visitor

  • November 27, 2018
  • 2 replies
  • 6272 views

I'm trying to include a Marketo field in a custom HTML message for known visitors. However, when I test the form out, I am seeing a "Uncaught TypeError: Cannot read property 'name' of undefined" in the Dev Console (referring to this field). Because of this, on form submit, the page just reloads instead of submitting the form. See this for an example:

https://go.ivanti.com/General-Test-and-Various-Reports_Thor-Test-2.html

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
SanfordWhiteman
Level 10
November 27, 2018

A lot of what you're doing here doesn't really make sense.

1st: You don't have to include remote <script>s in the KV HTML. Since this is a Marketo-hosted LP fully under your control, just put them in the page. In fact both of the scripts you have in the KV HTML are also in the page, so you're just wasting resources.

2nd: No need to wait for DOMContentLoaded to check cookies. If the cookie was set on earlier pageview it's available to read immediately. (But see #4, you don't want to do this in the KV HTML only.)

3rd: If you want hidden fields to show up in the KV HTML form submission you must use the Forms API addHiddenFields method. Don't just add them to the rich text area.

4th: To populate a container in the KV HTML with a Marketo {{lead.token}}, create a placeholder <span> for it (i.e. with an identifiable data-attr or class).  Then in your KV HTML have only a one-line script that calls an external function to signify that you're in KV HTML mode. That external function, not stored within KV HTML, does everything else.

SanfordWhiteman
SanfordWhiteman
Level 10
November 27, 2018

... actually, you don't need any code in the KV HTML at all. I forgot my own recommended practice in this regard.

Add a whenReady listener and check for an HTML element known to only exist in KV HTML. The easiest example in your case is the Not You? link.

MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0],
      kvSentinel = formEl.querySelector(".mktoNotYou");    
      
      if (kvSentinel) {
        /* KV HTML is in effect, do stuff */
      } 
});
Craig_Boren
Craig_BorenAuthor
Level 2
November 27, 2018

Thanks Sanford for you response! First off, what does KV HTML stand for? I'm assuming it means the HTML dialog in the form editor?

Anyway, I totally get the notion of not needing to include remote scripts in the HTML input. In my efforts to try and get the form to work, I just overlooked that aspect. Secondly, I'm really not worried about the cookie part not working. That was just a workaround I was using since my first approach wasn't working. Thirdly, this is good to know! I didn't know how to add Hidden Fields, so this will help. Lastly, I'm not sure what you're referring to here. You can probably guess that I'm not too familiar with the Marketo forms 2.0 API. That said, I really appreciate your help so far!

Really, all I'm trying to do is, on a return visit, the user will see the following message:

How do I include the "Click here to receive ongoing news, information, and offers......" checkbox field? (this is a Marketo field that we sync with Salesforce to help track a user's communication preferences)

SanfordWhiteman
SanfordWhiteman
Level 10
November 28, 2018

First off, what does KV HTML stand for?

Known Visitor HTML. The HTML you put in the editor when you have If Known Visitor, Show Custom HTML selected.

All you need to do is include the <input type="checkbox"> in your KV HTML. No JS goes there.

Then include this simple JS in the page itself:

MktoForms2.whenReady(function(form){
  var formEl = form.getFormElem()[0],
      kvSentinel = formEl.querySelector(".mktoNotYou"), 
      kvOptInMirror = formEl.querySelector("[name='Email_Opt_In__c']");
  if (kvSentinel) {
    kvOptInMirror.addEventListener("click",function(e){
      var fieldsObj = {};
      fieldsObj[this.name] = this.checked ? "yes" : "no";
      form.addHiddenFields(fieldsObj);
    });
  }
});

This binds actions on the (visible, but unknown to Marketo) checkbox to an API-driven hidden field of the same name that Marketo does know about and will submit with the form.

    Craig_Boren
    Craig_BorenAuthor
    Level 2
    November 30, 2018

    Hey Sanford!

    I should have guessed what KV HTML stood for Thanks for taking the time to clarify.

    Okay, so I removed the JS in the KV HTML so it just includes the html of the form. Then I added the simple JS to the page template (at the bottom after the HTML).

    When I test it by being a return visitor to the page, check the box, and click submit, it doesn't do anything. Curious, I reloaded the page with a break point inside the function MktoForms2.whenReady(function(form){ , and realized the browser never actually hits the breakpoint (it never registers as the form loading).

    All I have is a the simple <input type="checkbox"> inside the KV HTML

    Terms & ConditionsAccessibility statement

    Loading footer...