Issues with UTM Parameter Tracking in Formstack Forms on Webflow

Hi Webflow Community,

I’m using Formstack for my forms, and everything works perfectly when using Formstack directly. However, when I embed the same form in Webflow, the UTM parameters are not being saved in the form submissions.

Here are the details of my implementation:

Code I added on Webflow Page:

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    // Function to get query parameters
    function getQueryParams() {
      const params = {};
      window.location.search.slice(1).split('&').forEach(pair => {
        const [key, value] = pair.split('=');
        params[key] = decodeURIComponent(value || '');
      });
      console.log('Query Parameters:', params); // Log query parameters
      return params;
    }
    // Function to set cookies
    function setCookies(params) {
      const expiryDays = 7; // Set cookie expiry (in days)
      for (const key in params) {
        if (params.hasOwnProperty(key)) {
          console.log(`Setting cookie: ${key} = ${params[key]}`); // Log each cookie being set
          Cookies.set(key, params[key], { expires: expiryDays });
        }
      }
    }
    // Get query params from the URL and set cookies
    const queryParams = getQueryParams();
    setCookies(queryParams);
  });
</script>

Code in the Formstack Form (Embedded as HTML):

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/3.0.1/js.cookie.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    console.log('Document is ready');

    // Function to get query parameters
    function getQueryParams() {
      const params = {};
      window.location.search.slice(1).split('&').forEach(pair => {
        const [key, value] = pair.split('=');
        params[key] = decodeURIComponent(value || '');
      });
      console.log('Query Parameters:', params); // Log query parameters
      return params;
    }

    // Function to set cookies
    function setCookies(params) {
      const expiryDays = 7; // Set cookie expiry (in days)
      for (const key in params) {
        if (params.hasOwnProperty(key)) {
          console.log(`Setting cookie: ${key} = ${params[key]}`); // Log each cookie being set
          Cookies.set(key, params[key], { expires: expiryDays });
        }
      }
    }

    // Get query params from the URL and set cookies
    const queryParams = getQueryParams();
    setCookies(queryParams);

    // Retrieve UTM values from cookies
    var form_utm_source = Cookies.get('utm_source') || "";
    var form_utm_campaign = Cookies.get('utm_campaign') || "";
    var form_utm_medium = Cookies.get('utm_medium') || "";
    var form_utm_term = Cookies.get('utm_term') || "";
    var form_utm_content = Cookies.get('utm_content') || "";
    var form_utm_gclid = Cookies.get('gclid') || "";

    console.log('UTM Source:', form_utm_source);
    console.log('UTM Campaign:', form_utm_campaign);
    console.log('UTM Medium:', form_utm_medium);
    console.log('UTM Term:', form_utm_term);
    console.log('UTM Content:', form_utm_content);
    console.log('UTM Gclid:', form_utm_gclid);

    // Add event listener to the form submit button
    $('#fsSubmitButton5761941').on('click', function(event) {
      console.log('Submit button clicked');

      // Ensure the input fields are being targeted correctly
      const sourceField = $('input[name="field169318150"]');
      const campaignField = $('input[name="field169318151"]');
      const mediumField = $('input[name="field169318152"]');
      const termField = $('input[name="field169318153"]');
      const contentField = $('input[name="field169318154"]');
      const gclidField = $('input[name="field169318155"]');

      if (sourceField.length > 0) {
        sourceField.val(form_utm_source);
        console.log('UTM Source field populated');
      } else {
        console.log('UTM Source field not found');
      }

      if (campaignField.length > 0) {
        campaignField.val(form_utm_campaign);
        console.log('UTM Campaign field populated');
      } else {
        console.log('UTM Campaign field not found');
      }

      if (mediumField.length > 0) {
        mediumField.val(form_utm_medium);
        console.log('UTM Medium field populated');
      } else {
        console.log('UTM Medium field not found');
      }

      if (termField.length > 0) {
        termField.val(form_utm_term);
        console.log('UTM Term field populated');
      } else {
        console.log('UTM Term field not found');
      }

      if (contentField.length > 0) {
        contentField.val(form_utm_content);
        console.log('UTM Content field populated');
      } else {
        console.log('UTM Content field not found');
      }

      if (gclidField.length > 0) {
        gclidField.val(form_utm_gclid);
        console.log('UTM Gclid field populated');
      } else {
        console.log('UTM Gclid field not found');
      }

      console.log('Form fields populated with UTM values');
    });
  });
</script>

Is there anything specific that needs to be adjusted when using Formstack forms on Webflow to ensure that UTM parameters are correctly populated and saved in the form submissions? Any insights or suggestions would be greatly appreciated.

Thank you!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

@nikhil_018

FYI: Webflow loads jQuery on every site and page already, v3.5.1

Thanks for the reply @webdev. Is there any tutorial, video, or documentation I can refer to for learning how to capture UTM parameters in forms created in Webflow?

I’m unfamiliar with formstack’s setup, but if you’re trying to capture data into a Webflow form as hidden fields, and then submit that to formstack, here’s one easy bridge;

For querystring params, data binding is handled with the ?... construct.

<input wfu-bind="?utm_campaign" type="hidden" name="utm_campaign">

The docs;

@memetican, Thanks for reply. I’m a pure beginner to Webflow and need to create a form for a client who will be running a campaign. Could you please let me know what script needs to be added after creating hidden fields in the form for capturing UTM parameters? Thanks for sharing the documentation!

Hi Nikhil,

The documentation covers everything needed to get the UTM params into your form data. From there it depends on Formstack, which as I said I have not used before. If you need help finding an implementation that works for you, you can direct message me and I can send you my rates.

But at this point it looks like you mostly need to read the documentation and you should be able to find the path you need.

Yaa @memetican. It’s working fine. Thanks

1 Like