Typeform’s embed code lets you enter static Hidden Field values that display in typeforms embedded on websites and email messages. But what if you’re expecting to have different Hidden Field values over time, based on how visitors access your page?
This article covers how to dynamically pass Hidden Field values from a website URL to an embedded typeform. You’ll need access to your site code to set this up. If you’re not comfortable editing this code, you may want a tech-savvy friend on hand to help out.
How do I display Hidden Fields in my typeform from my website URL?
You can reference Hidden Fields from your website URL in an embedded typeform through some light coding (for full-page embed instructions, read on to the next section).
1. First, access your website code and find where your form is embedded:
Warning! This solution currently doesn’t work with Wix-built websites. Wix explains why here.
2. After the data-tf-widget attribute, add the following:
data-tf-transitive-search-params="nameofthefield"
3. Swap out “nameofthefield” for the name of the Hidden Field your website URL references.
If you have multiple Hidden Fields, simply separate their names with a comma in the attribute value:
data-tf-transitive-search-params=”firstfield, secondfield, thirdfield”
For example, if your website URL is www.myproducts.com/?name=Tony&country=USA, you would write:
data-tf-transitive-search-params=”name, country”
In our “name” and "country" example above, here’s how your code will look before you add the new attribute:
<div data-tf-widget="y28S4zB" data-tf-hidden="name=xxxxx,country=xxxxx"
style="width:100%;height:400px;color:#FFFFFF;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
And after, with the new attribute in bold:
<div data-tf-widget="y28S4zB" data-tf-transitive-search-params="name, country"
data-tf-hidden="name=xxxxx,country=xxxxx"
style="width:100%;height:400px;color:#FFFFFF;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
How do I display Hidden Fields in my full-page typeform from my website URL?
Reference Hidden Fields from a website URL in a full-page typeform embed requires access to your site code and a few quick coding tricks.
1. Copy the full-page embed code for your typeform and insert it into your site. (In this example, we’re using a typeform with a Hidden Field for “name”.)
2. Access your website code and find where your typeform is embedded. It should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New orders</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#wrapper {
width: 100%;
height: 100%;
}
iframe {
border-radius: 0 !important;
}
</style>
</head>
<body>
<div id="wrapper" data-tf-widget="y28S4zB" data-tf-inline-on-mobile></div>
<script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>
3. Locate the code between the <body> tags. We’ve bolded it for you here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New orders</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#wrapper {
width: 100%;
height: 100%;
}
iframe {
border-radius: 0 !important;
}
</style>
</head>
<body>
<div id="wrapper" data-tf-widget="y28S4zB" data-tf-inline-on-mobile></div>
<script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>
4. Go back to Typeform and open the typeform you’re embedding. Copy the code for the standard embed mode. Replace the code we bolded just above with the standard embed code.
Your code should now look something like this, with the new addition bolded:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New orders</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#wrapper {
width: 100%;
height: 100%;
}
iframe {
border-radius: 0 !important;
}
</style>
</head>
<body>
<div data-tf-widget="y28S4zB" data-tf-hidden="name=xxxxx"
style="width:100%;height:400px;color:#FFFFFF;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>
Tips! Since you’re inserting the standard embed code into the body of a full-screen iframe, you can edit the iframe CSS to adjust how the embedded typeform will look. For example, you might add a body rule to remove the margin around the form.
5. After the data-tf-widget attribute, add the following:
data-tf-transitive-search-params="nameofthefield"
6. Swap out “nameofthefield” for the name of the Hidden Field your website URL references. For example, if your website URL is www.myproducts.com/?name=Tony, you would write:
data-tf-transitive-search-params="name"
If you have multiple Hidden Fields, simply separate their names with a comma in the attribute value:
data-tf-transitive-search-params=”firstfield, secondfield, thirdfield”
Here's how your full-page embed code will look when you've finished:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New orders</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body,
#wrapper {
width: 100%;
height: 100%;
}
iframe {
border-radius: 0 !important;
}
</style>
</head>
<body>
<div data-tf-widget="y28S4zB" data-tf-transitive-search-params="name"
data-tf-hidden="name=xxxxx"
style="width:100%;height:400px;color:#FFFFFF;"></div>
<script src="//embed.typeform.com/next/embed.js"></script>
</body>
</html>
{[{article.replace}]}
{[{video.duration}]}