Passing UTM Param to TypeForm Embed

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

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

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

Here’s a working solution for popup embed

    <a id="typef_orm_link" class="typeform-share button" href="#" data-mode="popup" style="display:inline-block;text-decoration:none;background-color:#FF6900;color:white;cursor:pointer;font-family:Helvetica,Arial,sans-serif;font-size:20px;line-height:50px;text-align:center;margin:0;height:50px;padding:0px 33px;border-radius:25px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:bold;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;" data-size="100" target="_blank">Oferta pe Mail </a>
    <script src="https://embed.typeform.com/embed.js"></script>


    <script> 
      var p = new URLSearchParams(window.location.search);
      var url = "https://homefinders.typeform.com/to/YNpMBLfT?typeform-medium=embed-snippet";
  url += '&utm_source=' + p.get('utm_source');
  url += '&utm_medium=' + p.get('utm_medium');
  url += '&utm_content=' + p.get('utm_content');
  url += '&utm_term=' + p.get('utm_term');
  url += '&utm_campaign=' + p.get('utm_campaign');
  
  window.addEventListener("DOMContentLoaded", function() {
  	document.getElementById('typef_orm_link').href = url;
  });
 </script>