6 Replies Latest reply on Feb 21, 2018 12:51 PM by Sanford Whiteman

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

    Nate Oosterhouse

      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!

        • Re: Is it possible to create a picklist field token to be used in a web form?
          Sanford Whiteman

          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).

          1 of 1 people found this helpful
            • Re: Is it possible to create a picklist field token to be used in a web form?
              Gary Verster

              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

                • Re: Is it possible to create a picklist field token to be used in a web form?
                  Sanford Whiteman

                  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>
                  
                  1 of 1 people found this helpful