Pre-populating picklist value on Form | Community
Skip to main content
New Participant
April 5, 2024
Solved

Pre-populating picklist value on Form

  • April 5, 2024
  • 1 reply
  • 4306 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SanfordWhiteman

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.



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.

 

1 reply

SanfordWhiteman
New Participant
April 5, 2024

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?

LizNg2Author
New Participant
April 5, 2024

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
New Participant
April 5, 2024

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.