Answered

Dynamically getting hidden values with TF & WordPress

  • 21 September 2022
  • 6 replies
  • 243 views

Hi - I have a WordPress microsite we’re using as a landing page where the CTA is a button that opens a TypeForm in a popup.

 

I would like to have a hidden field in TypeForm that is dynamically set to the value of URL parameter. 

For example:

  • if the URL is mymicrosite.com/?source=partnerA&campaign=sept2022
  • How do I set the hidden fields in the embedded TF?

The goal is to be able to run multiple campaigns simultaneously and track each signup to a campaign.

 

Thank you in advance for your assistance.

Graham

 

icon

Best answer by mathio 26 September 2022, 23:31

View original

6 replies

Badge

I would also like to see an answer to this!  :)
I’m imagining there might be some way for wordpress to dynamically adjust the hidden value in the embedded link to match the value of the url parameter.  This would help me a lot with our chat-style inquiry form that is embedded in our footer for the entire site.

Here’s what I’ve learned:

  • TF will set the utm_XXX fields when available if you add this to the embed div 
    data-tf-transitive-search-params="utm_source,utm_medium,utm_campaign"
  • Now I’m struggling to make sure the UTM params are passed from the URL via an internal anchor link (WordPress site w/ Avada theme)
Userlevel 7
Badge +5

@mathio may be able to help with this!

Userlevel 7
Badge +5

Yes, you can use transitive search params to pass params from host page to your embed.

What do you mean by passing params via internal anchor? Do you have any example of what you want to achieve? Can you share your website too?

@mathio - Web site is https://driveforsaferroads.com/

In the hero section, there’s a blue button LET’S GET STARTED that is an anchor link [https://driveforsaferroads.com/#howitworks] to the HOW IT WORKS  section on this page.  

In this section, there is a CTA that opens the TypeForm modal. If the UTM params are on the query string, then the transitive search params work! Happiness.

However, I’m struggling to get the UTM params to properly set on the anchor link in the hero section.

Any suggestions on how to make this work will be appreciated.

Thanks,

Graham

 

Userlevel 7
Badge +5

I think you would need to build this integration manually. You could use JavaScript API of Typeform Embed SDK. You would need to populate hidden field values based on the URL by yourself.

Here is an example of how this could work: 
https://glitch.com/edit/#!/tf-custom-hidden-fields

Reply