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?
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:
- Open your typeform from Workspaces.
- Now that you’re in the Build panel, activate Hidden Fields by toggling the button.
- 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.
- Make sure you hit the Save button.
- Now go to the Share panel of your typeform, and
- Grab the URL of the typeform with the appended query string.
- 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:
In this example we are placing two parameters into two distinct Hidden Fields, these are:
Using our example above, if David was sent his typeform through Twitter, then the URL would look like this:
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:
- Manually – you manually type something in the URL before sharing your typeform.
- 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:
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.
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: