如何通过JavaScript将URL中的隐藏字段数据传入嵌入的Typeform

• 站点架构：基于Notion搭建内容、通过Super平台托管对外发布
• 现有Typeform实现：使用带typeform-share类名的弹出式嵌入代码，依赖官方embed.js脚本完成弹窗唤起、表单加载能力
• 实际需求：从当前访问页面的URL中提取全部UTM类参数（如示例地址usa.domasd.com/?utm_source=Social%20Media&utm_medium=Linkedin&utm_campaign=Mayank%27s%20profile里的utm_source、utm_medium、utm_campaign值），将这些值作为隐藏字段传入Typeform表单，用于后续流量来源统计
• 已尝试无效的操作：
  • 自行编写JS解析URL参数后，通过DOM操作直接给Typeform相关节点赋值，传值未生效
  • 直接照搬Typeform官方文档的隐藏字段传值示例，在当前站点环境下运行后功能异常

• 参数提取环节的优化
  • 放弃手写字符串分割、匹配的URL解析逻辑，改用浏览器原生URLSearchParams接口做参数提取，避免和Super平台自带的URL重写、路由规则产生冲突
  • 参数提取的基础逻辑：

    // 自动读取当前页面URL的查询参数，解码后筛选所有utm开头的参数
    const currentParams = new URLSearchParams(window.location.search);
    const hiddenFieldValues = {};
    for (const [paramKey, paramValue] of currentParams.entries()) {
      if (paramKey.startsWith('utm_')) {
        hiddenFieldValues[paramKey] = decodeURIComponent(paramValue);
      }
    }
    

• 传值环节的适配（针对弹出式typeform-share嵌入）
  • 避免直接修改Typeform的iframe DOM属性：embed.js在初始化加载时会覆盖iframe的src配置，手动修改的DOM属性会被完全重置，这也是之前DOM赋值方法失效的核心原因
  • 匹配embed.js的初始化时序，通过官方提供的实例回调传值，不要在页面加载初期就提前给表单赋值：

    // 脚本需注入到Super平台的全站自定义代码区（页面头部/底部注入模块），不要写在Notion页面的内嵌代码块中
    window.addEventListener('load', () => {
      // 等待embed.js注入的全局对象挂载完成
      if (window.typeformEmbed) {
        // 选中页面上所有typeform-share类的弹出嵌入节点
        const typeformEmbedNodes = document.querySelectorAll('.typeform-share');
        typeformEmbedNodes.forEach((embedNode) => {
          // 绑定Typeform实例完全加载完成的事件
          embedNode.addEventListener('typeform:ready', () => {
            // 将收集到的UTM参数作为隐藏字段传入对应表单实例
            window.typeformEmbed.setHiddenFields(hiddenFieldValues);
          });
        });
      }
    });
    

• Super平台的专属避坑点
  • 不要将自定义JS代码放在Notion页面内的嵌入式代码块中：Notion的渲染规则会将这类代码转为纯静态文本，不会实际执行
  • 调整脚本加载顺序：确保自定义传值脚本的执行优先级低于Typeform的embed.js，避免出现脚本提前运行、表单还未初始化的时序错误
  • 效果校验：访问带UTM参数的测试页面，唤起Typeform弹窗后，在表单的提交预览面板确认隐藏字段的实际取值，检查是否和URL中的参数完全匹配，没有出现空值、编码乱码、字段名错配的问题

注意：如果Typeform表单后台未提前对应创建同名的隐藏字段（比如没有建utm_source、utm_medium这类字段），传值会被表单侧拦截，无法正常入库。

内容的提问来源于stack exchange，提问作者COdeingNinja