Preview in the Designer ↗

Send UTM parameters with the native Hubspot integration

The form submission should be sent from a page with URL parameters like...

mydomain.com/?utm_source=newsletter&utm_medium=email&utm_campaign=spring_sale

Instructions:

  1. Create a form in Hubspot.
  2. In addition to regular inputs in Hubspot (i.e., name, email, etc), add 1 extra input for each of the expected URL parameters.
  3. Publish the Hubspot form.
  4. In Webflow, create a form and add the same number of inputs.
  5. Use custom code embeds for each of the UTM parameter inputs and place them before the submit button in the form.
  6. Each UTM-form-input should have a name and hidden attribute. The name attribute on each input should be equal to the expected UTM key — i.e., utm_source.
  7. Get the script from github and add it in page settings before the closing body tag for the page where the form in question is located.
  8. Publish and send a test submission.
  9. Go to Project Settings > Forms > Form Integrations > Map New Form and complete the mapping step.
  10. Test the form again from the URL address that includes the UTM parameters.
  11. Notice submission received in Hubspot with UTM parameters.
Note: The native Hubspot integration is only available on Enterprise plans. Visit the following article to learn more —Webflow University: Hubspot forms integration.
See the github repo for more details ↗
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
This form has three hidden input fields because we expect three pieces of data in the URL with UTM parameters. Go into the Designer and check out the navigator!