Webflow popup form UTMs > Make > Hubspot halp!

Questions & Answers
1

Hello, I’m trying to get some UTM data from a Webflow popup form to a Hubspot Contact record. I’m not the Webflow contractor & don’t know a whole lot about Webflow (yet!)

Context: my client has multiple Google and Facebook ads. The Webflow webpage builds a CTA button’s URL with the UTM data as query parameters. I’m using a Make scenario to watch for the Webflow popup form submissions. When they arrive, though, the UTM data is not available to Make in the popup form object. Nor does it look like it is available to query with an API call (after looking over the Webflow API docs)

IMG_2942
IMG_29421366×869 136 KB

I was hoping, per this article: How to get UTM parameters and send them inside Webflow Form - Webflow Tips - Forum | Webflow …that we could get the UTM data delivered along with the popup form responses in hidden fields within the Webflow popup form, but the Webflow contractor is saying they don’t think it can be done dynamically (per whichever ad source channel is engaged.)

TBH, they’re kinda checked out (just got a ft gig elsewhere) & i’m not very convinced by their assessment. Has anyone crossed this bridge and know for certain if there is a solution or not with this workflow?

Thanks!

4

Turns out the Webflow Tips article is correct!

All I had to do was follow along with the article in order to

  1. add the Javascript to the head of the page in question
    • this pulls the query parameter data into the Webflow form object
    • i.e. pre-fills the UTM data, and
  1. add the “embed code” component to the popup form
    • This is where you’d enter the HTML that builds the actual text-entry fields that’ll get hidden & pre-filled.

Of note, the “hidden” setting in the HTML didn’t work quite right, so I removed it and used the Webflow controls to hide the text-entry components. Maybe this behavior is because I’m using a popup modal form (not a full page or embedded page) and the HTML “hidden” syntax doesn’t jive well? TLDR hiding the popup form’s UTM fields the Webflow way keeps the size of the popup form the same as before adding any code. Using the HTML “hidden” syntax, the resulting text entry fields were hidden, but the form was still as long as if they were there. YMMV.

Further magic - I am not sure where it is configured, but Webflow<>Hubspot integration alone seems to support UTM params going to the Hubspot Contact record (matching on e-mail). E.g. while I do need to use Make to grab the Webflow form responses (email, name…), I do not need to explicitly configure the Hubspot “Create/Update Contact” module to deliver the UTM data that the Trigger module (Watch for Webflow Forms getting turned in) obtains. It just shows up on the Contact record.

Like FBCID or GCLID data, once the Contact object is manually configured to have properties setup for the UTM fields, they just get in there :man_shrugging:

See here for a walkthrough of setting up the Contact object in Hubspot: UTM tracking in HubSpot with custom properties and forms - YouTube

From this article: Setup UTM Tracking in HubSpot with Custom Properties and Forms

5

Oh, I think this explains the Hubspot<>Webflow magic:

  1. Install the HubSpot tracking code
  2. Set up site tracking in HubSpot
  3. Understand HubSpot's traffic sources in the traffic analytics tool

i.e. the tracking code is installed in the Webflow site.

1 Like
6

Nailed it @mixelpix :clap:

Awesome work finding the resources and working out the solution by yourself.

Thank you so much for stepping back in and sharing what you learned with us. Super valuable stuff! :pray:

1 Like