将 UTM 值从 URL 推送到隐藏字段的脚本 (Webflow)

Question

我刚刚在 Webflow 中发布了我们的新网站，但是没有简单的方法从 URL 收集 UTM 值并将它们推送到表单字段。我创建了 5 个 UTM 隐藏字段（UTM Medium、UTM Source、UTM Campaign、UTM Content、UTM Term）。现在我需要向页面添加一个 HTML 代码以从 URL.

推送值

我得到了这个脚本：

<script>
    const urlParams = new URLSearchParams(window.location.search);
    const utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];

    let utmFieldValue = '';

    utmParams.forEach(function (param) {
        const paramValue = urlParams.get(param);
        if (paramValue) {
            utmFieldValue += `${param}=${paramValue} `
        }
    });

    const utmField = document.getElementById('utm-field');
    utmField.value = utmFieldValue.trim();
</script>

但是，看起来所有值都被推送到一个字段中。任何人都可以重写此脚本以反映每个值都应添加到正确的字段吗？

这是带有 UTM 的 URL 示例：google.com/?utm_source=crowdcast&utm_medium=webinar&utm_campaign=blog&utm_content=how-we-use-linkedin-ads

表单所在的URL是https://saasmql.com/contact-us

这是表单的代码：

<html>
    ...
    <div id="w-node-07aa8d855a85-8d855a85" class="form-wrap">
        <h2 class="h2 center white">Book an Intro Call</h2>
        <div>
            <div class="w-form">
                <form id="wf-form-Contact-Us-Form" name="wf-form-Contact-Us-Form" data-name="Contact Us Form"
                    redirect="/thank-you" data-redirect="/thank-you">
                    <input type="text" class="text-field w-input" maxlength="256" name="First-2" data-name="First 2"
                        placeholder="First Name" id="First-2" required="" />
                    <input type="text" class="text-field w-input" maxlength="256" name="Last-2" data-name="Last 2"
                        placeholder="Last Name" id="Last-2" required="" />
                    <input type="email" class="text-field w-input" maxlength="256" name="email-2" data-name="Email 2"
                        placeholder="Email Address" id="email-2" required="" />
                    <input type="text" class="text-field w-input" maxlength="256" name="Company-2" data-name="Company 2"
                        placeholder="Company" id="Company-2" required="" />
                    <input type="text" class="text-field w-input" maxlength="256" name="Job-Title-3" data-name="Job Title 3"
                        placeholder="Job Title" id="Job-Title-3" required="" />
                    <textarea placeholder="Comments" maxlength="5000" id="Comments-2" name="Comments-2"
                        data-name="Comments 2" class="text-field w-input">
                    </textarea>
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="utm_source"
                        data-name="utm_source" placeholder="UTM Source" id="utm_source" />
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="utm_campaign"
                        data-name="utm_campaign" placeholder="UTM Campaign" id="utm_campaign-2" />
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="Utm-Content"
                        data-name="Utm Content" placeholder="UTM Content" id="Utm-Content-2" />
                    <input type="text" class="text-field-utm w-input" maxlength="256" name="Utm-Term" data-name="Utm Term"
                        placeholder="UTM Term" id="Utm-Term-3" />
                    <input type="submit" value="SUBMIT" data-wait="Please wait..." class="blue-button full-size w-button" />
                </form>
            </div>
        </div>
    </div>
    ...
</html>

Answer 1

这应该有效

const urlParams = new URLSearchParams(window.location.search);
const utmParams = [
  'utm_source',
  'utm_medium',
  'utm_campaign',
  'utm_term',
  'utm_content'
];

let paramValue, utmField;

utmParams.forEach(function (param) {
  paramValue = urlParams.get(param);
  utmField = document.querySelector("input[name='"+param+"']");

  if (paramValue && utmField) {
    utmField.value = paramValue.trim();
  }
});

确保所有字段都严格遵循此命名方式：
utm_source
utm_medium
utm_campaign
utm_term
utm_content

将 UTM 值从 URL 推送到隐藏字段的脚本 (Webflow)

Script to push UTM values from URL to hidden fields (Webflow)

javascript

html

webflow