1. Help
  2. Classic builder
  3. Logic, Calculator, Hidden Fields
  4. How to use Hidden Fields (Classic builder)

How to use Hidden Fields (Classic builder)

Hidden Fields allow you to use data that you already have, to make your typeforms more personal, or simply to give you better data in your results.

Hidden Fields is a Professional plan (and above) feature. Find out more about Professional accounts here.

Hidden Fields can be used for lots of things:

  • Track where respondents come from (social media channels, for example)
  • Segment your audience for deeper insights and analysis
  • Customize your typeform to make it even more personal

How do Hidden Fields work?

Hidden Fields allows you to place data that you already have directly in your typeform URL. You can view all your data in the Results panel.

What types of information can be passed with Hidden Fields?

You can include any information you want, for example:

  • The person’s name (so that you can use Recall Information to welcome each respondent personally)
  • The email of your respondent (so you know who completed the typeform)
  • Traffic source (so that you know where someone saw your typeform – Facebook, website etc)
  • If you sell shoes, you can even capture the person’s shoe size so you always have that information stored for future transactions through your typeforms
HC_Note_ilu_cropped.png
Note! If you add your Google Analytics tracking code to a typeform, you are responsible for the data collected by Google Analytics. If you’re using Hidden Fields that include personally identifiable information, like name or email address, etc, you must ensure this information is added to the ‘Exclude URL Query Parameters’ field in Google Analytics’ view settings. Collecting this data breaks Google’s Terms of Service. Here’s how to do this: https://support.google.com/analytics/answer/1010249?hl=en.

Add Hidden Fields to your typeform

1. Open your typeform, and click the Add new question button. This opens the Questions menu, and at the bottom you will see Hidden Fields. Click this to get started.

 

2. A new field will appear at the top of your typeform editor. This is where you can add your Hidden Fields.

how-to-use-hidden-fields-31.png

3. Type the names of the Hidden Fields you want to add. Hit space to add another.

how-to-use-hidden-fields-41.png


Whatever you write for your Hidden Fields, they’ll be converted to lowercase letters automatically.

4. You can now test them by using the tool, and see what it will look like in your typeform’s URL:

how-to-use-hidden-fields-51.png

Hidden Fields breakdown

If you add Hidden Fields to your typeform, a string of characters will be added to the URL of the typeform. Here is an example:

https://tutorials.typeform.com/to/nzthWIhttps#name=xxxxx&source=xxxxx

In this example we are placing two parameters into two distinct Hidden Fields, these are:

  • name
  • source
HC_Note_ilu_cropped.png
Note! The “xxxxx” after “name=” and “source=” are the Hidden Fields. The “xxxxx” needs to be replaced with real data in order for the typeform to pass the data into your Results. You cannot currently populate Calculator  information (Score and Price) via information passed through a Hidden Field.

Using our example above, if Fran was sent their typeform through Twitter, then the URL would look like this:

https://tutorials.typeform.com/to/nzthWI#name=Fran&source=twitter

Now your typeform will automatically fill your Results with the following data:

  • name: fran
  • source: twitter

And you won’t have to ask for their data using a question in the typeform. How cool is that?

You can pass text in the Hidden Field with a space. This can come in handy when passing, for instance, full names, like “Jane Doe”. You need to replace the spaces with “%20” in the URL in order for the Hidden Field to appear with the space in your Results and / or typeform. So your URL would look like this:

https://example.typeform.com/to/AbCdEf#fullname=Jane%20Doe

And that is not all, you can encode any character using UTF-8 percent encoding.

How do you make this work?

There are 2 ways to implement this feature:

Manually – you manually add information to the Hidden Fields in the URL before sharing your typeform.

Automated – you can use your CRM system (Salesforce, Infusionsoft, Netsuite, etc.) to populate your data, so up to thousands of people can receive a custom URL Typeform. Please read these articles for more details:

Using Hidden Fields with embedded typeforms.

You can easily add a Hidden Field like “source” to a typeform that’s already embedded, but remember that this changes the URL of your typeform.

You need to paste in the new embed code you find in the Share panel, and edit it manually:

Let’s say you want to track the source – where people complete your typeform. Paste the code from the Share panel into your website, then change the ‘xxxxx’ to read whatever you want, like ‘homepage’ or ‘web’, for example.

Now you’ll be able to see in your Responses how many respondents answered your typeform from your website!

HC_Note_ilu_cropped.png
Note! If you want to pass information to the typeform URL of an embedded typeform from outside the iframe, it is possible, but requires some coding skills. Please note that we cannot troubleshoot custom code or give development instructions in the event that something in your custom implementation is not working!

What will it look like when I collect data?

Data from Hidden Fields will appear in your Results Summary and Responses.

In your Summary, you can see all the results that came through with data from Hidden Fields:

how-to-use-hidden-fields-61.png

In your Responses tab, you can see each individual submission and its Hidden Field data:

Give it a shot. Copy this link, paste it in a web browser and replace the “xxxxx” with your name and an imagined source, like ‘facebook’. Then hit ‘enter’ and see what the typeform does.

https://tutorials.typeform.com/to/nzthWI?name=xxxxx&source=xxxxx

How to use the collected Hidden Fields information in your typeform

Apart from passing data into your Results, you can do two more things with Hidden Fields:

  • Add Hidden Fields to a question in your typeform. Find out how in this article: Recall Information
  • Use Recall Information to create Logic Jumps. Refer to this article to learn more: How to set Logic Jumps?
HC_Warning_ilu_cropped.png
Warning! You are responsible for any information you share via Hidden Fields. Be careful how you use information like names and email addresses, especially when using Typeform with other services like Google Analytics, as recording personal identifying information may break Terms of Service or privacy laws.

Tap into our community knowledge

Find Answers
Contact Support