Is it possible to create a picklist field token to be used in a web form?

[Nate_Oosterhous]

Hello Everyone!

Question:

Is it possible to create a picklist field token to be used in a web form?  Has anyone done this?

Background:

We are looking to do this with our Industry and Sub-Industry fields.  We would like them to be required on the forms as well as make Sub-Industry hidden until the Industry is selected. 

Thank you in advance!

[SanfordWhiteman · Accepted solution]

Be sure to post your questions to Products. A mod just moved your thread today.

This type of token does not technically exist. However, you can create a text token like {{my.Industry}} and populate it with a JSON array of possible entries:

     ["Education","Engineering","Pharma"]

Then include this token in your LP (it has to be a Marketo-hosted LP), use the Forms API to populate the <SELECT> options when a form loads. You need a developer who gets this stuff.

It's a good way to keep your picklists centralized, though using the smallest possible # of global forms is even more important (and similarly gives you a small surface area to cover when updating picklists).

[Nate_Oosterhous]

Thank you Sanford!

[Anonymous]

Sanford Whiteman​, could you expand a bit more on the following bit, sir?

"Then include this token in your LP (it has to be a Marketo-hosted LP), use the Forms API to populate the <SELECT> options when a form loads. You need a developer who gets this stuff."

...particularly the Forms API and the 'this stuff' part ;-). Not sure where to start with this... what questions to ask and to whom? Lol... any help would be appreciated muchly!!

As ever, thanks.

G

[Grégoire_Miche2]

HI Gary,

start here : http://developers.marketo.com/javascript-api/forms/ 

and vote here :   and here :

[SanfordWhiteman]

Set up your my token in the standard Marketo picklist style (friendly name on the left, server value on the right, pipe-delimited):

Northeast|NW
Southwest|SW
Antarctica|ANT

Embed it in an HTML <script> tag like so:

<script type="text/plain" data-list-for="Territory__c">
{{my.Territory List}}
</script>

Then parse it in JS and add the options to the select (here we will append to the existing options, if any). There's no need to edit this code as it automatically finds the options in your page (just make sure the <script>s appear in this order):

<script>
var arrayFrom = getSelection.call.bind([].slice);
var dataIslands = document.querySelectorAll("script[type='text/plain'][data-list-for]"),
      dynamicOptions = arrayFrom(dataIslands)
      .map(function(dataIsland){
          return {
                  fieldName : dataIsland.getAttribute("data-list-for"),
                  optionBlock : dataIsland.text.replace(/^\n|\n$/g,"")
              }
      });                                                                                                                          
MktoForms2.whenRendered(function(form) {
    var formEl = form.getFormElem()[0];
        dynamicOptions
        .map(function(fieldOptions) {
            return {
                selectEl: formEl.querySelector("[name='" + fieldOptions.fieldName + "']:not([data-dynamic-options='ready'])"),
                optionBlock: fieldOptions.optionBlock
            };
        })
        .forEach(function(field) {        
            field.optionBlock
                .split("\n")
                .map(function(optionRow) {
                    var parts = optionRow.split("|");
                    return {
                        text: parts[0],
                        value: parts[1]
                    };
                })
                .forEach(function(optionDesc) {
                  var optionEl = new Option();
                  optionEl.text = optionDesc.text;
                  optionEl.value = optionDesc.value;
                  field.selectEl.add(optionEl);
              });
        field.selectEl.setAttribute("data-dynamic-options","ready");
        });
});
</script>

[SanfordWhiteman]

Demoed at MktoForms2 :: Picklist from {{my.token}}