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?
Answered
Embed typeform with passing hidden fields
Best answer by Mariana
Hey 
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:
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:
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! =)
1 person likes this
+5Hey
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:
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:
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! =)
Smile – sunshine is good for your teeth.
1 person likes this
Awesome! How would you add multiple parameters?
Is it data-transferable-url-parameters="name" “source” “placement”
Or something else?
+5Hi
data-transferable-url-parameters="name, source, placement"
Hope that helps!
Life is a series of awkward moments separated by snacks.
1 person likes this
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?
1 person likes this
+5Hi
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.
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"
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.