capture interesting moment, known lead

[SanfordWhiteman]

For best separation of concerns, have one call to MktoForms2.loadForm followed by a call to MktoForms2.whenReady with your initialization values and any event listeners.

MktoForms2.loadForm( <instance URL>, <munchkinId>, <formId> );
MktoForms2.whenReady(function(form){
  form.setValues(...);
  form.addHiddenFields(...);
  form.onSuccess(...);
  form.onSubmit(...);
  form.onValidate(...);
  ... etc. ...
});

However, this isn't the real problem. You have a lot of "luck" going on with JS scope, where things appear to work until you move them around. And confusion is more likely is because there's a lot of clunky code (like the assembling of HTML fragments as strings and using innerHTML) that isn't necessary for this relatively simple task and is just serving as a distraction.

Allow me to overhaul the code and you will be much less confused.  I'll put up a new version in my CodePen later today.

[Anonymous]

Thank you... any help you could give is greatly appreciated. I've spent a little time today trying to wrap my head around this, but nothing's sticking. none of my experiments work. I've tried many of the different sample scripts out there, just to see what they'd do. But even those 'out-of-the-can' scripts don't seem to work inside the Known Lead Html. I'm stumped.

[SanfordWhiteman · Accepted solution]

Check out MktoForms2 :: QS-aware KL HTML​. Pass your ?title=<title>&type=<type> and the values are populated in the proper spots.

The KL HTML itself is dirt-simple since all the logic is brought out into the whenReady listener:

(The %-variables are not really interpreted, they're just placeholders.)

Note one wheel not worth attempting to reinvent is query string parsing. I've written my own parser in the past but it cannot come near the near-industry-standard URI.js, which is included here.

[Anonymous]

Nice! Hadn't seen .js that way. I just know basic if/else and case.

I've dropped everythiing into place, but I not quite to my goal. I think I must be misunderstanding something?

On our website, I have what you wrote in Code pen...

On our KL HTML section I put the <div class="k1">....</div> code you pasted above. I left the %asset.placeholders% as is. Did I need to change those?

The form works, and the KL message comes up, but the placeholders remain. Either I misunderstood something, or there's a step I missed. Does the URI.js take care of the query string completely, or is there an extra step I need to do?

Also, this doesn't have the {{form.button}}. I haven't looked yet, but do you know if KL's will register as a form submission in Marketo?

For reference: live page

[SanfordWhiteman]

Nice! Hadn't seen .js that way. I just know basic if/else and case.

Yes, there's a whole language out there.

On our KL HTML section I put the <div class="k1">....</div> code you pasted above. I left the %asset.placeholders% as is. Did I need to change those?

No, you don't need to change those.  They are in there as reminders of dynamic content.

Do you see errors in your JS console?

Also, this doesn't have the {{form.button}}. I haven't looked yet, but do you know if KL's will register as a form submission in Marketo?

KLs will only register as a form submission if the person clicks the submit button.  If you give them custom download <A> links, as you are here, they will not submit the form.  You could make clicking on the links also submit the form in the background, of course.  But that requires additional code.

[Anonymous]

No errors popped up relating to this. Just a couple warnings for jquery - probably unrelated to this:

jquery-1.8.3.min.js:

Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.

Empty string passed to getElementById().

Regarding the {{form.button}}, gotcha. I think I remember seeing sample code in the Forms 2.0 samples specifically for that. I'll tackle that next after I figure out why the info isn't updating

[SanfordWhiteman]

I'll take a look at your page again this evening and figure it out.  Have to grab a bus now.

[Anonymous]

Sanford,

Good morning! I just wanted to see if you might've had a moment to peek at the script and find out why it wasn't replacing the placeholders?

I've also tried to add in a "form submit" if somebody clicks on a link outside it. but it doesn't seem to fire. I suspect it could be incorporated into your script better than I did. This way didn't seem to work - didn't show a form completion in the test lead's activity log.

Here's a direct link to where I'm playing around with this: resource-test

[SanfordWhiteman]

You have class="k1" (letter k, number 1) where it's supposed to be class="kl" (for k​nown ​l​ead).

I've also tried to add in a "form submit" if somebody clicks on a link outside it. but it doesn't seem to fire. I suspect it could be incorporated into your script better than I did. This way didn't seem to work - didn't show a form completion in the test lead's activity log.

Definitely do not attempt to do it this way.  The form submission is asynchronous and this will never, ever work the way you want.  If you want to submit the form and then redirect them, only do the redirection in the form's onSuccess listener.

[Anonymous]

I'll have to find a dark corner to try and work on this without distraction. Nothing I've tried works yet. I understand generally what you're saying. But just can't manage to get it to work