HubSpot Form v4: Setup UTM parameter tracking

Use our AFL UTM Tracker plugin to capture and populate dynamic UTM parameters for your 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 Forms v4
• 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 v4 Javascript file (hubspot-v4.min.js) instead of custom code snippet.

Steps

Let’s summarize the steps to populate the UTM parameters into your HubSpot Form v4.

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.

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.

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.

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. Add to Form > Properties.
   • Search Property > AFL UTM Source.
   • Default value: afl_utm_js:utm_source|default:none
   • Hidden field: Enable
2. Add to Form > Properties.
   • Search Property > AFL UTM Medium
   • Default value: afl_utm_js:utm_medium|default:none
   • Hidden field: Enable
3. Add to Form > Properties.
   • Search Property > AFL UTM Campaign
   • Default value: afl_utm_js:utm_campaign|default:none
   • Hidden field: Enable

Hidden Fields for First Touch UTM parameters

1. Add to Form > Properties.
   • Search Property > AFL UTM Source (First).
   • Default value: afl_utm_js:utm_source_1st|default:none
   • Hidden field: Enable
2. Add to Form > Properties.
   • Search Property > AFL UTM Medium (First)
   • Default value: afl_utm_js:utm_medium_1st|default:none
   • Hidden field: Enable
3. Add to Form > Properties.
   • Search Property > AFL UTM Campaign (First)
   • Default value: afl_utm_js:utm_campaign_1st|default:none
   • Hidden field: Enable

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 “Review and update” button on the top right corner.
4. Click on the “Update” button.
5. Click on “Get embed code”.
6. Copy the Embed Code (we will use this in the next section).

6. Get our Appfromlab HTML Code

You will need to adjust the values in the HTML code below.

1. Replace the Line 2 and 3 with your HubSpot Form Embed Code from your HubSpot account.
2. On Line 5, replace MY_DOMAIN_NAME with your website URL.

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.