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

I just released our new website in Webflow, but there is no easy way to collect UTM values from the URL and push them to the form fields. I created the 5 UTM hidden fields (UTM Medium, UTM Source, UTM Campaign, UTM Content, UTM Term). Now I need to add a HTML code to the page to push the values from the URL.

I was given this script:

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

However, it looks like all the values are pushed into one single field. Can anyone rewrite this script to reflect that each value should be added to the right field?

This is an example of a URL with UTMs: google.com/?utm_source=crowdcast&utm_medium=webinar&utm_campaign=blog&utm_content=how-we-use-linkedin-ads

The URL where the form lives is https://saasmql.com/contact-us

This is the code for the form:

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

Solution

This should work

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();
  }
});

Make sure to have all your fields strictly follow this naming:
utm_source
utm_medium
utm_campaign
utm_term
utm_content