How to use Hidden Fields with Embedded Typeforms
Do you want to use Hidden Fields to pass information to a typeform embedded on your site? Use this guide to configure your site properly for using Hidden Fields!
Let’s say you’ve got your respondent’s name, and want to send them over to your site which contains a typeform. You want to address them by name, so you’ve enabled Hidden Fields inside the typeform. Awesome!
Hidden Fields are passed through the URL of your typeform. This means you’ll need to create some code on your site to pass Hidden Field parameters to the Typeform URL inside the embed code you’re using.
In order for this to work, you will code a way to set the “data-url” attribute of your typeform embed code dynamically, based on the values you pass inside the site URL you share with your respondent. Every time the page loads with the values provided in this site URL, it will read those values, and use them appropriately within your typeform.
Beardy Warning! Please note: The data-url attribute is simply what our embed script reads when creating the final iframe element which displays your typeform, so whatever you set this data-url value to is where the final rendered iframe will point to — including any hidden field parameters.
So the process works like this:
1. You link your respondent, named Beardyman, to your page with a link like this: http://yoursite.com/your-typeform-page?Name=Beardyman
2. In the code which serves up your page (including the <div class=”typeform-widget” data-url=”…”> element), you read that value (Beardyman) from the “Name” parameter in your page’s URL.
3. You’ll then write that value on the end of the URL in the “data-url” attribute, like in the example typeform code snippet below.
<div class=”typeform-widget” data-url=”https://yourname.typeform.com/to/abc123?Name=Beardyman” data-text=”Your Form’s Name” style=”width:100%;height:500px;”></div>