Passing UTM Param to TypeForm Embed

I use TypeForm for a survey and have it embedded on my page. Works very well.

I need to pass UTM code into the TypeForm embed. The embed code they give is this:

<div class="typeform-widget" 
 data-url="https://philipmeese.typeform.com/to/tBv5mF" 
 style="width: 100%; height: 400px;"></div> 

<script> 
(function() { 
var qs,js,q,s,d=document, gi=d.getElementById, 
ce=d.createElement, gt=d.getElementsByTagName, 
id="typef_orm", b="https://embed.typeform.com/"; 

if(!gi.call(d,id)) 
{ js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; 
  q=gt.call(d,"script")[0]; 
  q.parentNode.insertBefore(js,q) 
 } 
  })() 

</script> 

So what I need to do is change the

 data-url="https://philipmeese.typeform.com/to/tBv5mF" 

to add a parameter and the value of that UTM that has been passed into my Unbounce page. So if my Unbounce page were called with:

 https://go.mydomain.com/page.html?utm_zone=Z98

it would read:

data-url="https://philipmeese.typeform.com/to/tBv5mF?utm_zone=Z98" 

I am not a hard core coder so I am clueless here. Any ideas?

I’m curious. Have you received an answer to that question?

Yes. Hristain (h@revise.cc) sorted it out for me.

1 Like

Hi, would love to know the answer to this please!

Can you share the solution to this please as it would be great to know how this was done. Thanks in advance

Hristain (h@revise.cc) would have to share that out as it was his magic. I couldn’t begin to explain how it was done.

1 Like

I had the same issue and after many hours I figured it out.
I found the answer here: (https://glitch.com/edit/#!/tf-embed-with-params)

Essentially you need a HTML file and a .js file (I give my html and JS files the same names)
In the html file you need to refer to the .js file (as it contains the name of the TypeForm)

I wanted to pass multiple parameters, but the sample code was not clear on this.
Edit the .js file and specify each parameter you want to fetch from your URL:

(get the rest of the code from the sample site above)
url += “?dealer=” + params.get(‘dealer’); //Note: You can give it any name
url += “&rep=” + params.get(‘rep’);

For second and third parameters onward you need to change the ? to a &. Simply copy and paste the second line to create additional parameters.

Then call your website as follows: http://yoursite.com/?dealer=Coyote&Rep=RoadRunner

The HTML will call the JavaScript File, and the JS file will open your TypeForm and pass the parameters from your URL to the Hidden Fields of the TypeForm.

I prefer this, since it does not display the name of the TypeForm in the HTML like previously.

Hi dbDesigner,

I have the same issue and tried your solution.
It doesn’t seem to work anymore.

Have you tried it recently ?

Best regards,

Hi Vincent

For some reason, I only saw your question now, so I apologize for the delay.
My forms are still working and pass the parameters just fine.

I created a Typeform Menu and based on the user choice it opens other TypeForms and passes the initial parameters to those sub-forms using the very same method, using the combination of an HTML and JS file. The HTML file contains the name of the JS file and each JS file contains the name of the TypeForm and parameters to be opened.

You need to have these two lines in the body of each html file:
<script src="https://embed.typeform.com/embed.js"></script>
<script src="/script.js"></script>

script.js refers to the file that needs to be in the same folder on your web server as the index.html file.

You can call it any name. I name my .js files the same as the .html files to keep it simple since I now have multiple forms passing parameters to each other.

In the .js file you need to specify the name of the TypeForm and the parameters that you want to pass to the TypeForm.

Remember that the parameters you use in the .js file must be defined as hidden fields in the Typeform.

This line in the js file specifies the parameters:

url += "?utm_source=" + params.get('utm_source');

If you want to specify more parameters, just add more lines:

url += "?utm_source=" + params.get('utm_source');
url += "&affiliate=" + params.get('affiliate');

As you can see, the first parameter must start with ? and the next ones with &

Then simply open the URL as follows: website.com/?utm_source=fb&affiliate=whoever