[HELP] Send url UTM parameters in hidden field to Mailchimp using Webflow form

Design help Custom code
2

In your Webflow form, create another text field. Give it an ID of utm-field. Now set it to display none so that users don’t see it. Make sure that it is not set to required (in case there is no UTM data to enter).

Next you will need a script that will get UTM parameters from the URL on page load, then put these into the form field. You would put this in the body code of your page:

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

This example puts all UTM parameters into 1 field, you could of course alter this and create multiple form fields to input each specific UTM parameter.

3 Likes