How can I pass UTM data from a Webflow popup form to a Hubspot Contact record?

To pass UTM data from a Webflow popup form to a HubSpot Contact record, you need to capture the UTM parameters, store them in hidden fields on the form, and ensure those fields map correctly in HubSpot.

1. Set Up Hidden UTM Fields in Your Webflow Form

• Open your Webflow project and navigate to the popup form.
• Add 5 hidden input fields inside the form. The field Name (not ID) attributes should match HubSpot's expected names:
• utm_source
• utm_medium
• utm_campaign
• utm_term
• utm_content

2. Capture UTM Parameters Using Custom JavaScript

• Place a small custom script in your Webflow page (either in the Page Settings “Before tag” section or in an Embed element).
• The script should:
• Parse the UTM parameters from the URL.
• Store them in localStorage or sessionStorage (optional, but helps persist the data across pages or delays).
• Populate the hidden input fields when the popup form loads.

Example (inline logic):

• For each UTM param, run code conceptually like this:
• Check window.location.search for utm_source=...
• If found, set the value of the input with [name="utm_source"] to that value.
• Optionally, store/retrieve from localStorage.

Important: Avoid using raw <script> tags inside your form. Use Webflow’s Embed component or placed scripts.

3. Map UTM Fields in HubSpot

• Go to your HubSpot account and open Settings > Properties.
• Search for or create the matching contact properties:
• utm_source, utm_medium, utm_campaign, etc.
• Make sure these fields are included in the HubSpot form you’ll be syncing with Webflow (if using HubSpot forms), or available via API/Zapier inbound if using custom forms.

4. Send Webflow Form Data to HubSpot

Determine your form submission method:

• If embedding a native HubSpot form inside Webflow:

• HubSpot will auto-populate its fields if the hidden fields are named correctly and use name attributes matching HubSpot’s properties.

• If using Webflow’s native form:

• Set up an integration using Zapier, Make (Integromat), or HubSpot's Forms API.

• Ensure the UTM hidden fields are passed along and mapped to HubSpot contact fields.

5. Test the Flow

• Visit your landing page with test UTM parameters (e.g., ?utm_source=google&utm_medium=cpc).
• Submit the popup form.
• Check in HubSpot if the contact record contains the UTM values.

Summary

To pass UTM data from a Webflow popup form to HubSpot, add hidden fields for each UTM parameter, use custom JavaScript to populate them, and map those fields correctly in HubSpot. Use Zapier or HubSpot’s embedded form for integration if needed.