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.)
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, click Advanced.
2. 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.
3. Click Embed in a webpage and select the type of embed you want. Here we'll choose Standard.
Click Start embedding to generate the embed code.
4. A pop-up will appear and you can see in the code that it includes the information you added to your Hidden Fields. 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.
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.
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="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”
- Yes/No:
<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:
<a href="https://form.typeform.com/to/ABCDEF?typeform-medium=embed-email#user_group=detractors&answers-8a5053a8-b338-4cf1-8282-b105f2f7a0ae=1”
Now, just add the same attribute to each level’s URL.