How to pass UTM parameters to HubSpot form

Marketing & Content Hub Tips, Tricks & Best Practices
,
1

UTM parameters are useful for tracking and identifying the original source of your website visitors. However, these parameters are not collected in any of HubSpot’s default properties.

As a workaround, similar to auto-populating form fields with query strings, we can use the UTM parameter to auto-populate a hidden form field. When the form is submitted, the UTM parameters will be passed through to corresponding HubSpot properties.

Step 1: Create corresponding HubSpot properties

  1. In your HubSpot account, click the settings icon in the main navigation bar.
  2. In the left sidebar menu, navigate to ‘Properties’.
  3. Click Create Property to create a custom property for each UTM parameter.
  4. In the Create a new property sidebar:
    • For the Group, you can select any existing property group, or create a new property group.
    • For the Label, enter the UTM parameter:
    • Check that the internal name of the parameter matches the UTM parameter exactly. The internal name will usually correspond to the label for the property.

jleow_0-1631089363685.png
jleow_0-1631089363685.png532×575 33.4 KB

  1. For the Field type, click the dropdown and select Single-line text.
  2. Confirm that the Show in forms checkbox is selected.
  3. Click Create to create the property.

jleow_1-1631089363600.png
jleow_1-1631089363600.png538×565 29.4 KB

  1. Repeat for each of the UTM parameters that you’d like to collect.
    1. utm_source
    2. utm_medium
    3. utm_campaign
    4. utm_term
    5. utm_content

Step 2: Add the corresponding properties to your HubSpot form

  1. In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
  2. From the forms tool, select an existing form, or create a new form.
  3. Add each of the newly created properties to the form.
  4. Click the form field and set each of the properties as a hidden form field.
  5. Click Publish or Update in the top-right corner of your page to publish your changes.

jleow_2-1631089363683.png
jleow_2-1631089363683.png1912×780 62.2 KB

Moving forward, when a visitor is directed to your form page using a tracking URL appended with UTM parameters, these hidden fields should automatically populate. When the form is submitted, the contact’s new UTM property values will be updated.

Hope this helps!

2

Exactly what I was looking for! Thank you!

3

Hello there,

We have an issue with embedding the form on a WordPress, whereas the form is working perfectly and it’s collecting UTM parameters(but only on HubSpot itself). I was wondering if we are missing something since we can’t embed it correctly on the WordPress landing page.

Many thanks!

4

Hi Alex :grinning_face:

Adding my comments here just in case others run into the same problem.

After you create your HubSpot forms, you can take the embed code and place that into the HTML section of WordPress.

Have you been able to retrieve the embed code? If not, to access the form embed code:

* In your HubSpot account, navigate to Marketing > Lead Capture > Forms.
* Hover over a form and click Actions > Share.
* Click Copy.
Then, paste the embed code into the HTML module on your external page.

Next, copy the URL of the page and paste it into your tracking URL builder, as well as the values for your UTM parameters. When you share the tracking URL with others, this UTM information should then populate on the Contact record in HubSpot after they’ve submitted.

5

Hi. How would you do the same thing but with sales meetings, not forms. I have a hubspot calendar embedded in webflow. The UTMs are stored in a cookie. I can read the cookie but cannot pass to the form’s hidden fields as there aren’t any. Sales meetings forms do not have hidden fields. How shall I pass UTM values along with the contact that just scheduled a meeting? Thank you