How to Populate Hidden Form Fields via UTM Parameters for Real-Time Attribution

Data is only as valuable as its clarity. A common mistake many businesses make is trying to reverse engineer their analytics weeks after a lead is captured. By then, the trail has often gone cold, and you’re left guessing which ad spend actually drove the revenue.

The gold standard of lead management is Direct Attribution. This means capturing exactly where a user came from at the precise moment they convert and storing that data directly within the form submission. By pushing this data to your Customer Relationship Management (CRM) or Customer Data Platform (CDP), you create a permanent link between marketing spend and closed deals.

Step 1. Prepare Your Form Capture Tool

Before writing a single line of code, you must prepare your bucket. Whether you use Typeform, HubSpot, Formidable Forms, or a custom HTML build, you need to add Hidden Fields to your form. A hidden field is an <input> tag that is invisible to the user but stores data submitted along with their name and email.

Mapping Your Fields

One common hurdle is that form builders often assign unique, non-descriptive IDs or Names to fields (e.g., your builder might name a field input_5 instead of utm_source). To find the correct ID or Name:

1. Open your live form in a browser.
2. Right-click the form field area and select Inspect.
3. Look for the <input type="hidden"> tags and note the id="..." or name="..." attribute. You will need these for the code below.

Step 2. Using Session Storage for Persistence

A major issue with simple URL grabbing is that if a user lands on your homepage with UTM tags but clicks to your Pricing page before signing up, the tags disappear from the URL. To solve this, we first save the tags 1 Session Storage (the browser’s temporary storage) and then retrieve them in the form on the page the user ultimately converts to.

The Vanilla JavaScript Way

This script handles both the saving and the filling. Update the fieldMap to match the specific IDs provided by your form builder.

document.addEventListener("DOMContentLoaded", function() {
    // 1. UPDATE THIS MAP: 'URL_Parameter': 'Your_Form_Field_ID'
    const fieldMap = {
        'utm_source': 'input_458_1',
        'utm_medium': 'input_458_2',
        'utm_campaign': 'input_458_3',
        'gclid': 'google_click_id_field'
    };

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

    // 2. Save any found UTMs into Session Storage so they persist across pages
    for (const param in fieldMap) {
        const val = urlParams.get(param);
        if (val) {
            sessionStorage.setItem(param, val);
        }
    }

    // 3. Populate the hidden fields from Session Storage
    for (const [param, fieldId] of Object.entries(fieldMap)) {
        const storedValue = sessionStorage.getItem(param);
        const field = document.getElementById(fieldId);
        if (storedValue && field) {
            field.value = storedValue;
        }
    }

    // Capture Referrer (Logic: Only save the original referrer for the session)
    if (!sessionStorage.getItem('original_referrer')) {
        sessionStorage.setItem('original_referrer', document.referrer || 'direct');
    }
    const refField = document.getElementById('your_referrer_field_id');
    if (refField) {
        refField.value = sessionStorage.getItem('original_referrer');
    }
});

The jQuery Way

If your site relies on jQuery, use this version. This example uses name attributes, which is the standard for many WordPress form plugins.

$(document).ready(function() {
    // UPDATE THIS MAP: 'URL_Parameter': 'Your_Form_Field_Name_Attribute'
    const fieldMap = {
        'utm_source': 'q1_utm_source',
        'utm_medium': 'q2_utm_medium',
        'utm_campaign': 'q3_utm_campaign'
    };

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

    // Save to session
    $.each(fieldMap, function(param, nameAttr) {
        const val = urlParams.get(param);
        if (val) sessionStorage.setItem(param, val);
        
        // Populate field
        const stored = sessionStorage.getItem(param);
        if (stored) {
            $(`input[name="${nameAttr}"]`).val(stored);
        }
    });
});

Step 3. Pushing to your CRM or CDP

Once the user hits Submit, the hidden values are bundled with the contact info.

• For CRMs: The data creates a Lead or Contact record. Your sales team can now see that John Doe came from the Summer_Sale Facebook ad campaign before they ever call him.
• For CDPs: These values can be sent as traits, allowing you to build highly specific retargeting audiences based on their original entry point.

Step 4. Best Practices & Security