Using Hidden Fields with embedded typeforms

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 a website or email. (If you want to dynamically pass Hidden Fields to a typeform based on a changing website URL, check out this article.)

To jump to a section, click one of the links below:

- Hidden Fields in a website embed

- Create multiple embed codes with different Hidden Fields

- Add Hidden Field attributes to your embed code (for advanced users)

- Edit Hidden Fields data in a website embed

- Hidden Fields in an email embed

- Change Hidden Field values in email embeds based on answers (for advanced users)

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.

2. Click Embed in a webpage and select the type of embed you want. Here we'll choose Standard.

3. Click Advanced and toggle the Set custom values switch.

4. Now you can see your Hidden Fields. To add the information you want to include, replace the xxxxx next to each Hidden Field with the text you want.

5. Click Start embedding to generate the embed code.

6. A pop-up will appear with your embed code and your Hidden Fields will be populated with the information you've added in step 4. Click Copy, to add it to your clipboard, and then use it on your site.

Click on the dropdown where it says Embed your typeform with and select from a list of popular website builders to view specific embedding instructions.

Data from your Hidden Fields will appear in your Responses.

Create multiple embed codes with different Hidden Fields

You can create multiple embed codes with different Hidden Fields data for the same form. Let's say you want to track the source – which page on your website people complete your typeform on. You can create an embed code with the Hidden Field data 'homepage' as the source for the homepage on your website. Then create a new embed code with the Hidden Field data 'about' for the about page on your website. 

1. After you've created your first embed code with your Hidden Fields (instructions from the previous section), click on Embed in a webpage and then click New embed.

2. Click Advanced and toggle the Set custom values switch.

3. Change the Hidden Field data to the new data you want to track for this new embed code.

4. Give your new embed a name by clicking Embed name. Then select the embed type and adjust any of the design settings on the right side panel.

5. Click Start embedding to save and generate a new embed code.

Add Hidden Field attributes to your embed code (for advanced users)

Creating multiple embed codes might not be the best solution for you, for example, if you want to use several Hidden Fields to pass user information. In this case, if you're comfortable editing your embed code, you can add your Hidden Field attributes directly to the embed code.

1. Select Embed in a web page and click Start embedding to generate your embed code.

2. Click Copy to grab the embed code.

The embed code snippet looks something like this:

<div data-tf-live="01HCZ4DNW8JM6PEGNTQWF2PW87"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

3. Configure the desired Hidden Fields by adding the data-tf-hidden attribute to the code:

<div data-tf-live="01HCZ4DNW8JM6PEGNTQWF2PW87" data-tf-hidden="email=john@doe.com,name=John"></div>
<script src="//embed.typeform.com/next/embed.js"></script>

The Hidden Field attributes follow the name: value structure in the code, and each Hidden Field is separated by a comma. 

This approach works for any data-tf attribute described in our Embed SDK documentation. 

Edit Hidden Fields data in a website embed

If you've already embedded your typeform on your website but need to change the Hidden Fields data in your embed code, read on to find out how.

1. Click on the embed code you would like to edit.

2. Click Advanced and toggle the Set custom values switch.

3. Edit the Hidden Fields data.

4. Click Apply changes to save any edits you've made to the embed code. Any changes made to your embed code will be applied automatically. 

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. Click Embed 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. You'll see the Hidden Fields you've added. To add the information you want to include, replace the xxxxx next to each Hidden Field with the text you want in the right-hand panel.

4. Click Start embedding.

5. Click Copy to add the code to your clipboard. You can now paste the code into your email distribution tool.

Change Hidden Field values in email embeds based on answers (for advanced users)

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="https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=xxxxx&amp;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&amp;answers-66884627-c23a-4a43-9d27-6fdcd20cb6cd=3c1c7ccb-3b5c-4ee7-b1b3-b8e60f8ae69e”

• Yes/No:

<a href=“https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=xxxxx&amp;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="https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=detractors&amp;answers-8a5053a8-b338-4cf1-8282-b105f2f7a0ae=1”

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