Using URL parameters with embedded forms

Want to use URL parameters to pass information to a typeform embedded on your site? No problem! This article will go over how to use URL parameters in typeforms embedded in a website or email. (If you want to dynamically pass URL parameters to a typeform based on a changing website URL, check out this article.)

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

- URL parameters in a website embed

- Create multiple embed codes with different URL parameters

- Add URL parameter attributes to your embed code (for advanced users)

- Edit URL parameters data in a website embed

- URL parameters in an email embed

- Change URL parameter values in email embeds based on answers (for advanced users)

URL parameters in a website embed

1. When you use URL parameters, they're included automatically in your form embed code. Once you've added them when creating your form, 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 URL parameters. To add the information you want to include, replace the xxxxx next to each URL parameter 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 URL parameters 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 URL parameters will appear in your Responses.

Create multiple embed codes with different URL parameters

You can create multiple embed codes with different URL parameters 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 URL parameter data 'homepage' as the source for the homepage on your website. Then create a new embed code with the URL parameter data 'about' for the about page on your website. 

1. After you've created your first embed code with your URL parameters (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 URL parameter 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 URL parameter 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 URL parameters to pass user information. In this case, if you're comfortable editing your embed code, you can add your URL parameter 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 URL parameters 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 URL parameter attributes follow the name: value structure in the code, and each URL parameter is separated by a comma. 

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

Edit URL parameters data in a website embed

If you've already embedded your form on your website but need to change the URL parameters 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 URL parameters 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. 

URL parameters in an email embed

Make sure that your form’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 form should not include a Welcome Screen, or you won’t be able to embed the form in an email.

1. To add URL parameters to your form, click the Logic tab, and choose Pull data in. 

2. In our example, we’ll select the email and name URL parameters to add them to our form. You can create your own URL parameters by clicking Add new parameter. When you’ve added all the URL parameters you need, click Save.

3. Next, go to the Share panel. 

4. Hit Publish so the URL parameters get added to your form link.

5. 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.

6. You'll see the URL parameters you've added. To add the information you want to include, replace the xxxxx next to each URL parameter with the text you want in the right-hand panel.

In our example, we're using Mailchimp to send our email so we'll add Mailchimp merge tags to our URL parameters. For more information on using URL parameters with Mailchimp, check out our guide on automatically populating URL parameters with Mailchimp. 

7. Click Start embedding.

8. Click Copy to add the code to your clipboard. This code already includes the URL parameters you added. You can now paste the code into your email distribution tool.

9. Data from your URL parameters will appear in your Responses. 

Change URL parameter 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 URL parameter 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 URL parameter 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 URL parameter 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 URL parameter attributes replacing the “xxxxx” string(s) in the URL. For example, if you have a URL parameter 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.