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

Design help Custom code
1

Hi everyone,

I use the Webflow form to collect user’s email addresses but post them directly into my Mailchimp (see: www.feelmo.io). I would like to pass on the UTM parameters of a submitter in a hidden field but I can’t seem to get this to work correctly. I’ve looked into these two posts (and many others) but can’t seem to get it to work. Anyone know what I can do? (Track URL from where the form was filled and How to use Hidden Fields to Include your Current URL, Referring Page URL, and form names using one line of JavaScript)

Thanks!
Markus

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
3

Wow. Thank you so much! Took some time to get it working but now it does. Thank you very much @jasondark for the help.

1 Like
4

Hi Jason,

Thank you for writing this explanation. I’m trying to solve the same problem (pass UTM values to hidden fields on a form). I’m a new user of Webflow…

Could you modify this script so that each UTM value (Medium, Content, etc) goes to its own hidden field? So utm_medium → UTM Medium field, etc…

Also, when you say to add the script to the body code of the page, do you mean to just add an “Embed” element anywhere on the body, then make it not visible, or do we need to add this script on the Project Settings?

Thank you in advance!

5

Yes. You would need to create a hidden field for each parameter that you expect then alter the script to suit.

You could do this too. But what I meant is to place the script in the body code of the appropriate page.

image
image904×746 30.1 KB

6

Hi Jason,

Thanks for the quick reply. I created a field for each UTM value, could you rewrite the script so the value from the URL (utm_medium, utm_content etc) gets pushed to the fields? I’m not good at editing scripts :confused:

This is how I was entering the code (embed element directly on the form page, not visible):

image
image2572×1058 245 KB

7

I don’t know if you managed to solve this, but I stumbled across this just now and for completeness to anyone else searching this topic offer the following that we use in one of our projects:

The below works on a url like: Example Domain and with a field named keyword

const urlParams = new URLSearchParams(window.location.search);

const keywordParam = urlParams.get('k');
const keywordField = document.getElementById('keyword');
keywordField.value = keywordParam;

The last three lines can be duplicated as you need to in order to separate out and place any other values you have. I can’t remember why we explicitly pull out individual params in this example instead of for-each-ing it but there was a reason :slight_smile: it’s a working and simple example though.

8

Hi Jason,

Thank you for your code, it’s really simple and very well explained. Let me ask you a question. Our visitors will be landing on the product page and they will bring UTM parameters with them. My issue is that there is no form in my product page other than the Buy Now button (Option list element) that will send them to the checkout page. Is it possible to carry the UTM over to the Checkout page and then submitted with the order when the user clicks on the “place order” button?

Thank you in advance for any guidance you can provide.