We’re beavering away on the next version of Typeform. If you’re a v2 Beta Tester, use the tabs below to switch articles. Learn more about v2.

?

We’re beavering away on the next version of Typeform. If you’re a v2 Beta Tester, use the tabs on the left to switch articles.

How to use Hidden Fields

For a basic primer on what “hidden fields” are, please refer to the article What are Hidden Fields?

Do you want to know if your respondents are coming from Facebook, Twitter, or e-mail? Maybe you want to send out personalized typeforms to your e-mail list?

Jump to section:

Why use Hidden Fields?

Hidden Fields (advanced typeform segmenting and tracking) allows you to utilize data that you already have. So? If you have a regular list of people or customers you’re in contact with, you can minimize redundancy and make your form more relevant.

With Hidden Fields you can also:

  • Track where respondents come from
  • Segment your audience for deeper insights and analysis
  • Customize your typeform to make it even more personal

Check out these 3 demos and see for yourself how your typeforms can get even smarter with Hidden Fields!

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

What types of information can be passed with Hidden Fields?

Anything that you already know:

  • The person’s name (so that you can use Piping to welcome each respondent personally)
  • The email of your client (so that you know who completed the typeform)
  • Traffic source (so that you know if they click on your link in Twitter, on Facebook, or from your website)
  • 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

Add Hidden Fields to your typeform

Adding Hidden Fields is easy. Follow these steps:

  1. Open your typeform from Workspaces.
  2. Now that you’re in the Build panel, activate Hidden Fields by toggling the button.
  3. The Hidden Fields panel will appear on your screen – add the type of information you’d like to collect. In our example we are adding “name” and “source”. Your Hidden Fields have to be named using lower case letters only.
  4. Make sure you hit the Save button. hiddenfields
  5. Now go to the Share panel of your typeform, and
  6. Grab the URL of the typeform with the appended query string.
  7. Before distributing the URL, make sure you populate the Hidden Fields.

Hidden Fields breakdown

If you add Hidden Fields to your typeform, a string of characters called “query strings” will be appended to the URL of the typeform. Here is an example of query strings:

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

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

  • name
  • source

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

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

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

  • name: David
  • source: twitter

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

How do you make this work?

There are 2 ways to implement this feature:

  1. Manually – you manually type something in the URL before sharing your typeform.
  2. Automation – 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 this article for more details: Automated Hidden Fields with MailChimp.

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:

embed_code_hidden_fieldsLet’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 Results table how many respondents answered your typeform from your website!

What will it look like when I collect data?

Data from Hidden Fields will appear in your Results table among other answers.

Check out the screenshot below. This is the results table of the sample typeform.

The answers to “1. How do you feel today?” were collected through the typeform, while the name and the source were passed from the Hidden Fields.

Hidden Fields 01

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 variables in your typeform

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

  1. Add Hidden Fields variable to a question in your typeform: we explain how, in this article: Variables
  2. Use the variables to create logic jumps: refer to this article to learn more: How to set Logic Jumps?
Was this article helpful?
Thanks!

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.

 jon

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

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 Piping 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

Add Hidden Fields to your typeform

1. Open your typeform, and click the blocks icon in the Build tab:2. This opens the blocks menu, and at the bottom you will see the Hidden Fields “eye” logo. Click this to activate Hidden Fields.3. A new field will appear at the top of your typeform build. This is where you can add your Hidden Fields.4. Type the names of the Hidden Fields you want to add. Hit space to add another.Whatever you write for your Hidden Fields, they’ll be converted to lowercase letters automatically.

Hidden Fields breakdown

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

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

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

  • name
  • source

 

You cannot currently populate Calculator variables (Score and Price) via information passed through a Hidden Field.

[/do]

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

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

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

  • name: David
  • source: twitter

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

 

 

Beardy tip! Did you know that you can pass text in the Hidden Field with a space? This can come in handy when passing, for instance, full names, like “Beardy 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 table and / or Typeform. So your URL would look like this:

https://example.typeform.com/to/AbCdEf?fullname=Beardy%20Doe

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

[/do]

 

 

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 this article for more details: Automated Hidden Fields with MailChimp.

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 Results table how many respondents answered your typeform from your website!

What will it look like when I collect data?

Data from Hidden Fields will appear in your Results table among other answers.

Check out the screenshot below. This is the results table of the sample typeform.

The answers to “1. How do you feel today?” were collected through the typeform, while the name and the source were passed from the Hidden Fields.

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 variables in your typeform

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

  • Add Hidden Fields variable to a question in your typeform. Find out how in this article: Variables
  • Use variables to create logic jumps. Refer to this article to learn more: How to set Logic Jumps?