如何将URL参数传递至Hubspot落地页内嵌的Typeform表单

没问题，我来帮你搞定这个需求！要把utm_source、email和referralcode这些URL参数传递到Typeform内嵌表单里，只需要两步：抓取页面URL参数，再动态修改Typeform的嵌入链接即可。

第一步：写个工具函数抓取URL参数 #

首先咱们需要一个小函数，用来从当前页面的URL里提取指定的参数值。把这段代码放在你的页面脚本区域：

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

这个函数的作用很简单：传入参数名（比如utm_source），它会返回对应的参数值；如果参数不存在，就返回空字符串，避免后续拼接出无效链接。

第二步：动态修改Typeform的嵌入链接 #

接下来咱们要改造原来的Typeform嵌入代码，把抓取到的参数作为隐藏字段拼接到Typeform的URL里——Typeform支持通过URL参数传递隐藏字段，格式就是在链接后加?字段名=值，多字段用&分隔。

把你原来的代码替换成下面这段：

<div class="typeform-widget" data-transparency="50" data-hide-headers=true data-hide-footer=true style="width: 100%; height: 600px;" ></div>
<script>
(function() {
    // 定义抓取参数的工具函数
    function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    // 抓取需要传递的三个参数
    var utmSource = getUrlParameter('utm_source');
    var email = getUrlParameter('email');
    var referralCode = getUrlParameter('referralcode');

    // 拼接Typeform链接，只保留有值的参数
    var baseTypeformUrl = 'https://xxxxxx.typeform.com/to/xxxx'; // 替换成你的Typeform链接
    var hiddenFields = [];
    if (utmSource) hiddenFields.push('utm_source=' + utmSource);
    if (email) hiddenFields.push('email=' + email);
    if (referralCode) hiddenFields.push('referralcode=' + referralCode);
    
    if (hiddenFields.length > 0) {
        baseTypeformUrl += '?' + hiddenFields.join('&');
    }

    // 给嵌入容器设置最终的Typeform链接
    var typeformWidget = document.querySelector('.typeform-widget');
    typeformWidget.setAttribute('data-url', baseTypeformUrl);

    // 加载Typeform的官方嵌入脚本
    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>

关键注意事项 #

• 记得把代码里的https://xxxxxx.typeform.com/to/xxxx替换成你自己的Typeform表单链接。
• Typeform后台要提前配置对应隐藏字段：在你的Typeform表单里创建三个隐藏字段，字段名必须和传递的参数名完全一致（utm_source、email、referralcode），不然表单接收不到这些值。
• 这段代码只会拼接存在的参数，不会出现utm_source=这种空值参数，避免干扰表单逻辑。

这样修改后，用户访问你的HubSpot落地页时，URL里的参数就会自动传递到内嵌的Typeform表单中啦！

内容的提问来源于stack exchange，提问作者Hajo de Bel