Answered

Embed typeform with passing hidden fields

  • 22 April 2021
  • 9 replies
  • 651 views

Can someone explain how to use a typeform with hidden fields and embed the code in a page and still pass the text in the hidden fields. For eg. I use typeform code embed in mu unbounce page. So, basically my url is generated from unbounce. Now,  how do i pass the text (answers) to the hidden field?

icon

Best answer by Mariana 23 April 2021, 09:25

View original

9 replies

Userlevel 7
Badge +5

Hey @Joseph Antony. Welcome to the Typeform Community :hugging:

 

In order to pass hidden fields from your website to an embedded typeform you will need have access to the code so you can edit our embed snippet. It's really easy to do. Don't worry! You can watch this video (06:31) or follow the steps below.

 

Please note that this doesn't currently work with Wix built websites, the reason for this is explained by Wix here.

 

1. Access your website code and go to the place where you form is embedded:

 

?name=inline522856659.png

 

2. Place the cursor after the URL text and add the following:

data-transferable-url-parameters="name-of-the-field"

 

3. Change the "name of the field part" for the name of your field. So if in your URL it shows as name like in this example:

 

?name=inline-3558246.png

 

 

4. Make sure you don't break the code. Pay attention to the syntax, every pair should be like this: name="value"

 

5. This is how the whole thing would look using our name=Tony example above:

 

 

Before:

----------

 

<div class="typeform-widget" data-url="https://form.typeform.com/to/t6YZgb" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=t6YZgb&utm_source=typeform.com-01D8JX5ZB0JZHVVXMR5KCMBWFX-premium&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div>

 

 

After

------

<div class="typeform-widget" data-url="https://form.typeform.com/to/t6YZgb" data-transferable-url-parameters="name" style="width: 100%; height: 500px;"></div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script> <div style="font-family: Sans-Serif;font-size: 12px;color: #999;opacity: 0.5; padding-top: 5px;"> powered by <a href="https://admin.typeform.com/signup?utm_campaign=t6YZgb&utm_source=typeform.com-01D8JX5ZB0JZHVVXMR5KCMBWFX-premium&utm_medium=typeform&utm_content=typeform-embedded-poweredbytypeform&utm_term=EN" style="color: #999" target="_blank">Typeform</a> </div>

 

Hope this helps! =) 

Awesome! How would you add multiple parameters? 

 

Is it data-transferable-url-parameters="name" “source” “placement”

 

Or something else?

Userlevel 7
Badge +5

Hi @tcoletx Ah, great question! You would just add a comma between them like: 

data-transferable-url-parameters="name, source, placement" 

Hope that helps!

Hello, I’m running into a similar issue in unbounce. They only have a script manager but cant get into the actual website code to add the script you mentioned to OP. 

Is there a script of code snippet we can add directly to the typeform embed code to do this without the need to get into webfiles?

Userlevel 7
Badge +5

@picsoung do you happen to know any Unbounce workarounds? 

Userlevel 7
Badge +5

Hi @e.dgr 

Unbounce has a special plugin to embed easily a typeform into your landing page. Help Center Article

But I don’t think it supports hidden fields. Something you can probably tell them to add, because they built :)

And I believe you should be able to add custom code, but only in their Classic Builder, not sure if the new one has it.

Userlevel 7
Badge +5

@e.dgr were you able to give the Unbounce plugin a try? Let us know how it went!

I had my developer friend help with adding a custom snippet to the embed code itself. We were able to transfer hidden fields and utm paramerters from advertisment link > unbounce pass-through > typeform embed > airtable.

bing bang boom

data-tf-transitive-search-params="utm_source, utm_medium, utm_campaign, utm_term, utm_content"

 

Userlevel 7
Badge +5

Hi @e.dgr Wahoo!! Glad to hear! Thanks for sharing this. 😀

Reply