Pre-populating picklist value on Form

[Liz_Nguyen1]

Hello Community,

I was hoping to see if anyone has some ideas on how we can make this work on our Marketo Forms.

We have for example: Product Interest Picklist (checkboxes) with several values and are trying to find ways that if our team is marketing just one of those products on the page, can we have that specific value pre-populated on the form making it visible for when people visit the LP. This is a global form being used by multiple LPs so its not a 1:1 form to landing page. If we need to change from checkboxes to dropdown that is also an option.

Or is there a way to pass hidden values for product interest during time of form submission? Whether by hidden value, tokens, or URL parameters? As this is a global form and we want to ensure that the information of the product interest is passed correctly based on the topic of the LP (since someone could potentially select another product interest value).

Any help on this is appreciated.

[SanfordWhiteman]

It's very simple to check a checkbox based on some other facet of the page.

MktoForms2.whenReady(function(readyForm){
  readyForm.setValues({
    SomeField: "some value"
  });
});

The question is only where are you deriving that value from?

[Liz_Nguyen1]

Hi Sandford!

That is what we are discussing on how we can make the selection pre-pop if its a global form and where would we pull the value from. Are there any suggestions you can make? Can it be a program token or a value from a querystring from the LP link? Open to ideas.

For the code below, where would we pop that into the template?

[SanfordWhiteman]

A program token would only work on a Marketo LP. Obviously yes, you could output a {{my.token}} into the LP.

A query param would work as well, or a segment of the URL path (/some/path/to/some%20value).

The most flexible way would be a <meta> tag.

[Liz_Nguyen1]

Hi Sanford!

If we went with the {{my.token}} route, in the code you provided earlier, we could have "Product Interest" in place of "SomeField" can it be in any format or does it need to the the API name of field? then, "some value" could be the {{my.token}} and we can populate the values at the local program level? Where does the code below get added into the LP template?

MktoForms2.whenReady(function(readyForm){
  readyForm.setValues({
    SomeField: "some value"
  });
});

In the other option of the query param or segment of the URL path, how do we set it up so that it is pulling some value from these into for example the Product Interest so the value is already showing on page load? Could you show some screenshots or explain in further detail? we could train our teams to name their landing page URL in a specific format, but how would we be able to accurately pull that value into the Product Interest checkbox? 

The most flexible way as you mentioned is <meta> tags. We haven't utilized this very much and not sure how to get started with this. Is it something we update on the LP templates, or can we use it on the Edit Page Meta in the LP editor?

Thanks for the ideas! First time trying to achieve this form default value setup.

[SanfordWhiteman · Accepted solution]

---

If we went with the {{my.token}} route, in the code you provided earlier, we could have "Product Interest" in place of "SomeField" can it be in any format or does it need to the the API name of field? 

---

It needs to be the SOAP API name of the field, which is the same as the form field <input> name.

---

 "some value" could be the {{my.token}} and we can populate the values at the local program level?

Yes, but you can’t just output the {{my.token}} directly into the JS. You need to output it into a <datalist><option> and then read it from there. Like so:

<datalist id="marketo-tokens">
<option name="my.Product Interest">{{my.Product Interest}}</option>
</datalist>
<script>
MktoForms2.whenReady(function(readyForm){
  const marketoTokens = document.querySelector("datalist#marketo-tokens").options;

  readyForm.setValues({
    ProductInterest: marketoTokens["my.Product Interest"].value
  });
});
</script>

---

Where does the code below get added into the LP template?

---

Just before the closing </body> tag.

---

In the other option of the query param or segment of the URL path, how do we set it up so that it is pulling some value from these into for example the Product Interest so the value is already showing on page load? Could you show some screenshots or explain in further detail

---

If the query parameter is productInterest then you’d pull it like so:

MktoForms2.whenReady(function(readyForm){
  const currentURL = new URL(document.location.href)
  readyForm.setValues({
    ProductInterest: currentURL.searchParams.get("ProductInterest")
  });
});

---

The most flexible way as you mentioned is <meta> tags. We haven't utilized this very much and not sure how to get started with this. Is it something we update on the LP templates, or can we use it on the Edit Page Meta in the LP editor?

---

You would put them on the LP template, then fill them from variables at the LP level.

[Liz_Nguyen1]

Hi Sanford,

Does the my.token value have to be singular checkbox value or can it be multiple, {{my.Product Interest}} = Product1;Product2;Product 5 as an example. Do we just update the token value to be whichever products we want to show as the default checked-off value on the form? Same question regarding using query param. can we have the parameter include multiple product interest options and how do we properly list them (ex: ?productInterest=Product1,Product2,Product5)?

[SanfordWhiteman]

Semicolon-delimited (not comma-delimited) values are fine, yes.

[Liz_Nguyen1]

Hi @SanfordWhiteman  - How can we achieve the same behavior for pre-populating a value for a field if on the form that field type is a dropdown picklist for another field on the form? Could we use the same code but swap out Product Interest for a different field? Or would we need to modify to accommodate the field type (dropdown)?

[SanfordWhiteman]

The field type doesn’t matter as long as the value(s) you set match existing options.

[Liz_Nguyen1]

Hi @SanfordWhiteman ! Thanks for replying. We were able to swap out the my.token reference and value and it did work for a dropdown picklist vs. checkboxes. Was just wondering, if we wanted to set the Primary Product Interest and Secondary Product Interest default values upon page visit. How would we modify the code you provided to account for both field references? Tried to duplicate the code twice for each my.token reference but it didn't work so I figure it's the way we have it setup that broke it.

Once again, appreciate your wealth of knowledge! It's been really helpful with getting those default values pre-populate on the form.

[SanfordWhiteman]

  readyForm.setValues({
    ProductInterest: marketoTokens["my.Product Interest"].value,
    SomeOtherField: marketoTokens["my.Some Other Field"].value,
    YetAnotherField: marketoTokens["my.Yet Another Field"].value
  });

Assuming your have the {{my.tokens}} in the <datalist> of course.

[Liz_Nguyen1]

Hi Sanford!

We tried the my.token route to see if we could get it to work and updated a LP template with the code you provided and swapped out the Product Interest placeholder for the SOAP API Name of the field on the form. Set a test token in the program local token for {{my.Product Interest}} and put one of the selections from the form as the value. When reviewing the page, it doesn't check off the checkbox for the selection in the my.token. We also put it before the closing </body> tag as well. Is there anything else we are supposed to update the code with? We can't seem to get this to work and was thinking the my.token might be more user friendly for our teams.

Thanks!

[Liz_Nguyen1]

Actually we saw our issue, had the additional <script> tag at the beginning of the code so once we removed that, the checkbox was pre-populated.