javascript - 我正在使用 TypeForm，需要从 .js 脚本中自动填充隐藏字段

Question

我正在使用 TypeForm 并且需要从 javascript 自动填充 utm 字段，除了我无法从脚本创建的 html 以显示在页面上之外，一切正常。我将以下代码嵌入到 clickfunnels 页面的 html/js 模块中。很感谢任何形式的帮助。

<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

您可以pass custom values to hidden fields像这样:

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

如果您的主机页面 URL 中已有这些值，您可以使用 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>

您的代码不起作用，因为您通过 innerHTML 添加脚本标签.出于安全目的，此脚本标记不会执行:

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