UTM Link Builder & Hidden Field Mapper

UTM Link Builder & Hidden Field Mapper

Professional campaign tracking made simple

UTM Link Builder

Create trackable campaign URLs in real-time

Hidden Field Mapper Cheat Sheet

Auto-populate form fields with UTM parameters

How it works: Add these hidden fields to your forms and use the JavaScript snippet below to automatically capture UTM parameters from the URL and populate your form fields.

Recommended Hidden Field IDs

UTM Parameter Hidden Field ID
utm_source utm_source
utm_medium utm_medium
utm_campaign utm_campaign
utm_term utm_term
utm_content utm_content

Plugin-Specific Field Names

Form Builder Field Configuration
Gravity Forms Use Parameter Name in “Allow field to be populated dynamically”
WPForms Use Parameter Name in “Dynamic Population” field
Elementor Forms Set ID attribute to Parameter Name in Advanced tab

Auto-Populate JavaScript Snippet

(function() {
  // Get UTM parameters from URL
  const params = new URLSearchParams(window.location.search);
  const utmParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'];
  
  // Populate hidden fields
  utmParams.forEach(function(param) {
    const value = params.get(param);
    if (value) {
      // Try by ID
      const field = document.getElementById(param);
      if (field) {
        field.value = value;
      } else {
        // Try by name (for some form builders)
        const fieldByName = document.querySelector('[name="' + param + '"]');
        if (fieldByName) {
          fieldByName.value = value;
        }
      }
    }
  });
})();
Pro Tip: Add this script to your footer before the closing </body> tag, or use a plugin like “Insert Headers and Footers” to inject it site-wide.