I am using TypeForm and need to autofill hidden fields from a .js script

Question

I am using TypeForm and need to autofill utm fields from javascript, everything works except I cant get the html created from the script to show on the page. I am embedding the below code in a html/js module in a clickfunnels page. Any help is very much appreciated.

<div id="typeform"></div>
<script>
//<div id="typeform"></div> <div id="row--27712"></div>
window.onload = function(){
  
var source = "utm_source=1";
var medium = "utm_medium=2";
var campaign = "utm_campaign=3";
var content = "utm_content=4";
var keyword = "utm_term=5"
  
var HTMLA = '<div data-tf-widget="mYH43Dz4" data-tf-iframe-props="title=TFS - ANALYTICSDEV V1.1" data-tf-medium="snippet" data-tf-hidden=';
var HTMLquote = '"';
var HTMLcomma = ',';
var HTMLB = '" style="width:100%;height:600px;"></div><script src="//embed.typeform.com/next/embed.js">';
var HTMLC = '</'
var HTMLD = 'script>'
var form = HTMLA.concat(HTMLquote).concat(source).concat(HTMLcomma).concat(medium).concat(HTMLcomma).concat(campaign).concat(HTMLcomma).concat(content).concat(HTMLcomma).concat(keyword).concat(HTMLB);
var form2 = form.replaceAll("undefined","");

document.getEIementById('typeform').innerHTML = form2;
};
</script>

Answer 1

You can pass custom values to hidden fields like this:

<div id="typeform"></div>
<link rel="stylesheet" href="//embed.typeform.com/next/css/widget.css" />
<script src="//embed.typeform.com/next/embed.js"></script>
<script>
  var source = '1';
  var medium = '2';
  var campaign = '3';
  var content = '4';
  var keyword = '5';

  window.tf.createWidget('mYH43Dz4', {
    container: document.getElementById('typeform'),
    hidden: {
      utm_source: source,
      utm_medium: medium,
      utm_campaign: campaign,
      utm_content: content,
      utm_term: keyword
    }
  });
</script>

In case you already have those values in your host page URL, you could use transitive search params feature:

<div
  data-tf-widget="mYH43Dz4"
  data-tf-transitive-search-params="utm_source,utm_medium,utm_campaign,utm_content,utm_term"
></div>
<script src="//embed.typeform.com/next/embed.js"></script>

Your code does not work because you are adding script tag via innerHTML. This script tag will not execute for security purposes:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations
• https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0