How can I pass UTM data from a Webflow popup form to a Hubspot Contact record?
TL;DR
- Add hidden UTM fields to your Webflow popup form and populate them with values from the URL using JavaScript.
- Submit the form data to HubSpot through native integration or tools like Zapier, ensuring UTM fields match HubSpot contact properties.
To pass UTM data from a Webflow popup form to a HubSpot Contact record, you need to capture UTM parameters in the URL, store them temporarily (e.g., in cookies or hidden fields), then send them with the form to HubSpot.
1. Capture UTM Parameters from URL
- Use a small JavaScript snippet to detect UTM parameters in the URL (e.g.,
utm_source,utm_medium,utm_campaign). - Store them in hidden input fields within your Webflow form or cookies/localStorage to persist across pages.
2. Add Hidden Fields to Your Webflow Form
- Go to your popup form in Webflow Designer.
- Add hidden input fields for each UTM parameter you want to track (e.g.,
utm_source,utm_medium, etc.). - Set each field’s Name and ID to match the UTM key.
- Example: Name =
utm_source, ID =utm_source.
3. Populate Hidden Fields with JavaScript
- Use custom code in your Webflow Page Settings > Footer Custom Code section or inside an Embed component.
- Example pseudocode (actual syntax omitted for clarity per guidelines):
- For each hidden field (e.g.,
utm_source), get its matching value from the URL or cookie and assign it to the field’s value property. - Make sure the script runs before the form is submitted, ideally on page load.
4. Send Form Data to HubSpot
- If you're using Webflow’s native form submission, integrate Webflow with HubSpot via Zapier, Make, or custom webhook. Ensure that your integration maps hidden fields to HubSpot properties.
- Alternatively, if you’re using a HubSpot embedded form, it will handle field mapping automatically, as long as the field names match properties in HubSpot.
5. Create Custom Properties in HubSpot (If Needed)
- Go to your HubSpot Settings > Properties.
- Create new contact properties that match your UTM fields (e.g.,
utm_source) if they don’t already exist. - Ensure those properties are configured to receive data from incoming form submissions.
Summary
To pass UTM data from a Webflow popup form to a HubSpot Contact, add hidden fields to your form, populate them with URL values using JavaScript, and ensure the form data is pushed to HubSpot via direct form integration or third-party tools. Make sure UTM fields have matching properties in HubSpot to store the data.