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.

So the process works like this:

1. You link your respondent, in this example names Stevie, to your page with a link like this:

2. 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.

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.

Example Snippet:

<div class=”typeform-widget” data-url=”” data-text=”Your Form’s Name” style=”width:100%;height:500px;”></div>