Want to use Hidden Fields to pass information to a typeform embedded on your site? No problem! This article will go over how to use Hidden Fields in typeforms embedded in website, chat, or email format. (If you want to dynamically pass Hidden Fields to a typeform based on a changing website URL, check out this article.)
Hidden Fields in a website embed
1. When you use Hidden Fields, they are included automatically in your typeform embed code. Once you've added them when creating your typeform, click on the Share panel where you can get your embed code.
Click on the type of embed you want. Here we'll choose Standard:
2. You'll see this interface. Click on Advanced in the left-hand sidebar.
3. Now you can see your Hidden Fields. To add the information you want to include, delete the xxxxx next to each Hidden Field, and replace it with the text you want.
Once you've added your information to the Hidden Fields, click Get the code.
4. Now your embed code will appear. You can see in the code that it includes the information you added to your Hidden Fields. Click Copy code, to add it to your clipboard, and them use it on your site.
Hidden Fields in a chat embed
1. Once you’ve added Hidden Fields to your typeform and hit Publish, click on the Share panel to get your embed code.
2. Choose Start a chat. Edit the chat display and design settings according to your website’s needs.
3. When you're happy with your settings, click Get the code.
If you’re using a Full-page chat, the URL already includes Hidden Fields. All you have to do is replace the “xxxxx” string(s) with the right value, and the URL is ready to share. If you’re using a Standard or Popover chat embed, go on to the next step.
4. To use Hidden Fields in Standard or Popover chat code, don't add them after the form ID, but use additional data attributes in the chat code instead, in the format:
data-tf-hidden="field=value, field2=value2,field3=value3"
For example, if you have Hidden Fields for "name" and "city", you would add the following attribute to the code:
data-tf-hidden="name=Carlos,city=Barcelona"
Here’s an example of the code Typeform gives you:
And here’s what the code might look like on your site, with the new attribute highlighted:
Hidden Fields in an email embed
1. Once you’ve added Hidden Fields to your typeform and hit Publish, click on the Share panel to get your embed code.
Make sure that your typeform’s first question is an Opinion Scale, Multiple Choice, Picture Choice, or Yes/No question, and that you don’t have a Welcome Screen, or you won’t be able to embed the form in an email.
2. Choose Launch in an email. Remember that this feature is only available for email distribution tools with a code editor like Mailchimp, and currently does not work on everyday email services like Gmail or Outlook.
3. Enter your Hidden Field values under Hidden Fields.
4. Click Get the code.
5. Click Copy code to add the code to your clipboard. You can now paste the code into your email distribution tool.
Advanced users: Change Hidden Field values in email embeds based on answers
Typeforms embedded in emails often start with Opinion Scale or Multiple Choice questions, like the email shown here:
Once a respondent clicks on one of the options, the rest of the typeform opens in another tab.
Let’s say you want to display different Hidden Field values for each option the respondent chooses. For example, if your first question is an Opinion Scale question like the one shown above, and you have a Hidden Field called “user_group”, you might want to show respondents who answer “3”, “5”, or “10” a different value for “user_group” on the rest of the typeform.
You can set this up with a small amount of coding (have a tech-savvy friend nearby, just in case - our team unfortunately can’t provide troubleshooting for custom code). Remember that email embedding is only possible in email marketing tools with a code editor, like Mailchimp.
1. In the email embed code, you’ll find lines of code for each option in your Opinion Scale, Multiple Choice, Picture Choice, or Yes/No question, like the ones below. Each line has a Hidden Field called “user_group” with a blank value:
<a href="https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=xxxxx&answers-8a5053a8-b338-4cf1-8282-b105f2f7a0ae=1"
- Multiple Choice/Picture Choice:
<a href="https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=xxxxx&answers-66884627-c23a-4a43-9d27-6fdcd20cb6cd=3c1c7ccb-3b5c-4ee7-b1b3-b8e60f8ae69e”
<a href=“https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=xxxxx&answers-2319cdbb-9fcd-4368-b6b0-6c462504c08c=2319cdbb-9fcd-4368-b6b0-6c462504c08c-yes”
There will be one line of code for each level in your question. For Yes/No questions, there are 2 levels, indicated by “yes” or “no” at the end of the URL. For Opinion Scale questions, you can easily check the level by looking at the digit(s) at the end of the URL. The line of code shown above, for example, corresponds to the answer “1” on the Opinion Scale.
2. For each level, add Hidden Field attributes replacing the “xxxxx” string(s) in the URL. For example, if you have a Hidden Field called “user_group”, one level in your Opinion Scale might have a URL that looks like this (we’ve bolded the relevant segment):
<a href="https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=advocates&answers-8a5053a8-b338-4cf1-8282-b105f2f7a0ae=1”
Now, just add the same attribute to each level’s URL.
{[{article.replace}]}
{[{video.duration}]}