1. Help
  2. Advanced
  3. Sharing, embedding & notifications
  4. Using Hidden Fields with embedded typeforms

Using Hidden Fields with embedded typeforms

We're currently testing a new version of the Share panel. If the share page that you see is different from the version described below, then you're a part of this test. All of the functionality is the same, but if you have any difficulty using it, please reach out to our Support team, using the button at the end of this article.

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. Then, scroll to the Embed in a web page section. 

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 then 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 in the left-hand panel 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, as the image below shows. 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:


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 one of the following types: Multiple Choice, Picture Choice, Opinion Scale, Net Promoter Score®, Rating, Ranking, Matrix, Dropdown, Yes/No, Short Text, Long Text, Number, Phone Number, Email, Website, or Statement.

Additionally, your typeform should not include 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.


The default embed code creates an email in which your typeform is the only content. If you want to use other content in your email - for example, if you'd like to add text before or after your embedded typeform - click the Inline embed toggle to get an inline version of the code.


If you use the inline version of the code, note that any custom fonts you've used in your typeform will change to default fonts in your email. 

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:

  • Opinion Scale:
<a href=";answers-8a5053a8-b338-4cf1-8282-b105f2f7a0ae=1"
  • Multiple Choice/Picture Choice:
<a href=";answers-66884627-c23a-4a43-9d27-6fdcd20cb6cd=3c1c7ccb-3b5c-4ee7-b1b3-b8e60f8ae69e”
  • Yes/No:
<a href=“;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:

<a href=";answers-8a5053a8-b338-4cf1-8282-b105f2f7a0ae=1”

Now, just add the same attribute to each level’s URL.

Tap into our community knowledge

Find Answers
Contact Support