To pass UTM data from a Webflow popup form to a HubSpot Contact record, you'll need to make use of both Webflow and HubSpot's functionality. Here's a step-by-step guide on how to accomplish this:
1. Add UTM fields to your Webflow popup form: In your Webflow project, open the popup form editor and add form fields to capture the UTM parameters you're interested in. For example, you can include fields for utm_source, utm_medium, utm_campaign, etc.
2. Configure hidden fields with UTM parameter values: In the form settings panel, set the "name" attribute of these form fields to match the UTM parameter names (e.g., utm_source, utm_medium).
3. Enable HubSpot integration in Webflow: In your Webflow project settings, navigate to "Integrations" and select HubSpot. Follow the instructions to authenticate your HubSpot account and configure the integration.
4. Map UTM fields to HubSpot Contact properties: When setting up the integration, you'll have an option to map fields between Webflow and HubSpot. Here, you can map the UTM fields from your popup form to relevant HubSpot Contact properties (e.g., utm_source -> hs_utm_source).
5. Test the integration: Open the published Webflow site and submit the form in your popup. Verify that the UTM data is successfully being passed to HubSpot by checking the Contact record in HubSpot. The UTM parameter values should populate the corresponding Contact properties.
6. Utilize UTM data in HubSpot: With the UTM data successfully passed to HubSpot, you can now leverage it for various marketing and tracking purposes. For example, you can use it to record lead source attribution, segment contacts based on UTM parameters, or personalize communications based on the marketing campaigns they originated from.
Remember to thoroughly test the integration to ensure that the UTM data is consistently passed from Webflow to HubSpot with each form submission. This way, you can rely on accurate tracking and leverage the data effectively within your marketing efforts.