HubSpot Form v2: Setup UTM parameter tracking

Use our AFL UTM Tracker plugin to capture and populate dynamic UTM parameters for your legacy HubSpot Forms embedded into your WordPress site.

You will be utilizing our Javascript Merge Tag feature to populate the UTM parameters into your HubSpot form hidden fields which will be then be saved into the HubSpot Contact property.

Minimum Requirements

• AFL UTM Tracker v2.23.3
• Hubspot Form v2 (legacy)
• WordPress v5.0.0

Changelog

• 2025-08-06
  • Updated Appfromlab HTML Code to support optout value.
• 2025-08-05
  • Update steps to use Contact Property Internal Name with “afl_” prefix so that it doesn’t conflict with HubSpot own tracking script.
  • Updated Default value.
  • Added steps for First Touch UTM parameters.
• 2025-08-04
  • Introduce our new HubSpot v2 Javascript file (hubspot-v2.min.js) instead of custom code snippet.

Steps

Let’s summarize the steps to populate the UTM parameter into your HubSpot Form v2.

1. Enable the “Javascript Merge Tag” feature under the AFL UTM Tracker plugin settings.
2. In your HubSpot settings, create Contact Properties for the UTM parameters.
3. In your HubSpot settings, display the UTM parameters as Contact Card.
4. In your HubSpot Form, add the UTM parameter properties as Hidden Fields.
5. Get your HubSpot Form Embed Code.
6. Get our Appfromlab HTML Code.
7. Paste our Appfromlab HTML Code into your WordPress page.
8. Test your HubSpot form.
9. View your HubSpot form submission.

1. Enable the Javascript Merge Tag feature

1. Login to your WordPress Admin dashboard.
2. Go to AFL UTM Tracker > Settings page.
3. Under Attribution section, enable the Javascript Merge Tag feature.
4. Save settings.
5. Clear all page cache from your caching plugin.

2. HubSpot: Create Contact Properties for UTM parameters

Here you will be creating contact properties so that UTM parameters can be saved into a Contact.

1. Login to your HubSpot account > Settings page.
2. Data Management > Objects > Contacts.
3. Setup > Properties > Manage Contact properties.
4. Group tab > Create Group.
   • Name: AFL UTM Tracker

NOTE: For the Internal Name below, we will use our prefix "afl_" so that it does not conflict with HubSpot properties and HubSpot own UTM tracking script.

Create Properties for Last Touch UTM Parameters

1. Properties tab > Create property.
   • Property label: AFL UTM Source
   • Internal name: afl_utm_source
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.
2. Properties tab > Create property.
   • Property label: AFL UTM Medium
   • Internal name: afl_utm_medium
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.
3. Properties tab > Create property.
   • Property label: AFL UTM Campaign
   • Internal name: afl_utm_campaign
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.

Create Properties for First Touch UTM Parameters

1. Properties tab > Create property.
   • Property label: AFL UTM Source (First)
   • Internal name: afl_utm_source_first
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.
2. Properties tab > Create property.
   • Property label: AFL UTM Medium (First)
   • Internal name: afl_utm_medium_first
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.
3. Properties tab > Create property.
   • Property label: AFL UTM Campaign (First)
   • Internal name: afl_utm_campaign_first
   • Object type: Contact
   • Group: AFL UTM Tracker
   • Field type: Single-line text
   • Save.

Want to populate more attribution data?

Refer to our Javascript Merge Tag list to populate First Touch UTM parameters, Last Touch UTM parameters, click identifiers (gclid, fbclid, msclkid) and other attribution data into your HubSpot Form.

3. HubSpot: Create Contact Card to display UTM parameters

Here is how you can display the UTM parameters in an individual Contact view.

1. Go to your HubSpot > Settings page.
2. Data Management > Objects > Contacts.
3. Record Customization tab > Default view.

Create Card for Last Touch UTM parameters

1. Add cards > Create card > Data highlight.
   • Cart title: AFL UTM Tracker (Last Touch)
   • Properties > Add properties.
   • Select the AFL UTM Source property.
   • Select the AFL UTM Medium property.
   • Select the AFL UTM Campaign property.
   • Save.

Create Card for First Touch UTM parameters

1. Add cards > Create card > Data highlight.
   • Cart title: AFL UTM Tracker (First Touch)
   • Properties > Add properties.
   • Select the AFL UTM Source (First) property.
   • Select the AFL UTM Medium (First) property.
   • Select the AFL UTM Campaign (First) property.
   • Save.
2. Save and exit.

4. HubSpot: Add Hidden Fields to your form

Here you will be adding the Contact Properties which you have just created into your form.

1. Go to Hubspot > Marketing > Forms.
2. Select your form.

You will be using our Javascript Merge Tag formula in the hidden field default value property.

Hidden Fields for Last Touch UTM parameters

1. Existing properties > Search > AFL UTM Source.
   • Make this field hidden: Enable
   • Default value: afl_utm_js:utm_source|default:none
2. Existing properties > Search > AFL UTM Medium.
   • Make this field hidden: Enable
   • Default value: afl_utm_js:utm_medium|default:none
3. Existing properties > Search > AFL UTM Campaign.
   • Make this field hidden: Enable
   • Default value: afl_utm_js:utm_campaign|default:none

Hidden Fields for First Touch UTM parameters

1. Existing properties > Search > AFL UTM Source (First).
   • Make this field hidden: Enable
   • Default value: afl_utm_js:utm_source_1st|default:none
2. Existing properties > Search > AFL UTM Medium (First).
   • Make this field hidden: Enable
   • Default value: afl_utm_js:utm_medium_1st|default:none
3. Existing properties > Search > AFL UTM Campaign (First)
   • Make this field hidden: Enable
   • Default value: afl_utm_js:utm_campaign_1st|default:none

Review and update form and published changes.

5. Get your HubSpot Form Embed Code

1. Go to your HubSpot > Marketing > Forms.
2. Select the form > Edit Form.
3. Click on the Embed button on the top.
4. Select the Embed code tab.
5. Copy your portalId and formId value (we will be using these values in the next section).

6. Get our Appfromlab HTML Code

You will need to change the values in the Javascript code.

1. On Line 4, replace MY_DOMAIN_NAME with your website URL.
2. On Line 9, replace the portalId property value with your value.
3. On Line 10, replace the formId property value with your value.

7. Paste our Appfromlab HTML Code into your WordPress Page

1. Login to your WordPress admin dashboard.
2. Add a “Custom HTML” block into your WordPress page.
3. Paste our Appfromlab HTML Code into the block.
4. Save page and clear page cache.
5. Test your HubSpot form.

8. Test your HubSpot Form

1. Generate a UTM URL to your website.
2. Visit your UTM URL in private-browsing mode to simulate a new visitor.
3. Submit form.

9. View your HubSpot Form Submission

Here is how your Form Submission should look like:

Here is how your Contact view should look like:

• Contact card showing the Last Touch UTM parameters
• Contact card showing the First Touch UTM parameters.