Show Custom Checkbox on Form for Known People

[Yavor_Todorov]

Hello,

I am using this approach to show Custom HTML on my LPs with forms for known visitors: https://experienceleague.adobe.com/docs/marketo/using/product-docs/demand-generation/forms/form-acti... 

Welcome back, {{lead.FirstName}} {{lead.LastName}}
{{form.Button:default=Download}}
{{form.NotYou:default=Not you?}}

I want to insert a checkbox after First and Last name saying: "I have an immediate project need". Once the person checks it and hits Download, the checkbox answer should be sent to a field in our system {{lead.Immediate Project Need}}.

Looks like I can't just add this to the Custom HTML, so I assume it has to be some JS. 

Any suggestions on how to do this?

Thanks,

Yavor

[SanfordWhiteman · Accepted solution]

You can add it to the KV HTML, but you also need JS.

You can add the input like so:

Then include the code from here:

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

And finally wrap it together with this JS. Note it’s a lot more complex to support the range different input types. This tiny bit of code only supports an emulation of the Marketo Checkbox type.

/*
 * Add inputs in KV HTML as hidden fields
 * 1. Deliberately supports only <input type=checkbox> in this barebones example.
 * 2. Treats inputs as Marketo `Checkbox` (not `Checkboxes`) type.
 */
MktoForms2.whenReady(function(mktoForm){
   const arrayify = getSelection.call.bind([].slice);
   
   mktoForm.onSubmit(function(mktoForm){
      const formEl = mktoForm.getFormElem()[0];

      let kvHTMLClientInputs = formEl.querySelectorAll(".mktoTemplateBox input[type='checkbox']");
      
      let mktoFieldsObj = arrayify(kvHTMLClientInputs)
      .reduce(function(acc, mktoSingletonLike){
        acc[mktoSingletonLike.name] = mktoSingletonLike.checked ? "yes" : "no";
        return acc;
      }, {});

      mktoForm.addHiddenFields(mktoFieldsObj);
   });

[Yavor_Todorov]

Hi @SanfordWhiteman ,

thanks for the code, seems to be working. It looks like we want to extend this and add a select field as well. Then be able to capture the Option value and send it to Marketo. How can we achieve this?

Thanks!

[SanfordWhiteman]

OK, I added more input type support, including single <select>,  here:

MktoForms2 :: KV HTML client-side fields v1

Correctly supporting the complete range of input types is quite complex. I have code for other forms libraries (e.g. Gravity Forms) to map their types to Marketo types. That code could be merged in here, but the work becomes significant.