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!
Warning! Please be aware that to use Hidden Fields on an embedded typeform you need to be comfortable altering your site code, or have help from someone that can do that. The support team will assist as much as we can, but we cannot troubleshoot custom code or provide development instructions.
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.
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:
You link your respondent, in this example named Stevie, to your page with a link like this: http://yoursite.com/your-typeform-page#Name=stevie
In the code which serves up your page (including the <div class=”typeform-widget” data-url=”…”> element), you read that value (stevie) from the “Name” parameter in your page’s URL.
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=stevie” data-text=”Your Form’s Name” style=”width:100%;height:500px;”></div>