Help firing HubSpot CTA code with WebFlow button

Design help Custom code
1

Hi All,
Well I’ve searched and tried everything I could find to get this working with no luck. So first apologies if the answer is out there and I’ve just been unable to implement on my own. Here is the issue:

  1. I have some “embed code” from a HubSpot CTA (call to action) that will allow us to track various parameters when a button is clicked. Here is the code:
<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="hs-cta-wrapper-eb955a98-292e-43cd-b77d-5ad6c2a8e38c"><span class="hs-cta-node hs-cta-eb955a98-292e-43cd-b77d-5ad6c2a8e38c" id="hs-cta-eb955a98-292e-43cd-b77d-5ad6c2a8e38c"><!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="https://cta-redirect.hubspot.com/cta/redirect/22638569/eb955a98-292e-43cd-b77d-5ad6c2a8e38c" target="_blank" rel="noopener"><img class="hs-cta-img" id="hs-cta-img-eb955a98-292e-43cd-b77d-5ad6c2a8e38c" style="border-width:0px;" src="https://no-cache.hubspot.com/cta/default/22638569/eb955a98-292e-43cd-b77d-5ad6c2a8e38c.png"  alt="Responsive test"/></a></span><script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(22638569, 'eb955a98-292e-43cd-b77d-5ad6c2a8e38c', {"useNewLoader":"true","region":"na1"}); </script></span><!-- end HubSpot Call-to-Action Code -->

  1. While HubSpot does allow me to style the button on their end with CSS, I’m having trouble with the buttons responsiveness in mobile etc. Thus I would like to “fire” the code above using a button formatted natively in WebFlow.

  2. From what I’ve gathered I might be able to use an “event listener” and “on-click” to fire the above code. However, I’ve been unable to get any configuration working.

Any help or a resource for me to decipher would be much appreciated.

2

This might be total garbage in your case but pasting what ChatGTP told me below.

Sure thing! Here are the steps to add a Webflow button that triggers some HubSpot code:

  1. First, add a button element to your Webflow project. You can do this by selecting the “Button” element from the “Add” panel on the left side of the Webflow Designer.
  2. Once you have added the button element to your project, give it a unique class name. You can do this by selecting the button element and then entering a class name in the “Class” field in the right-hand panel.
  3. Next, you will need to add some custom code to your Webflow project. You can do this by selecting the “Custom Code” option from the “Pages” panel on the left side of the Webflow Designer.
  4. In the Custom Code section, select the “Head” section and add the following code:

<script src="//js.hsforms.net/forms/v2.js"></script>

  1. Then, select the “Body” section and add the following code, replacing your-form-id with the ID of your HubSpot form and your-button-class-name with the class name you gave to your Webflow button element:

phpCopy code

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var hubspotForm = hbspt.forms.create({
      portalId: "your-portal-id",
      formId: "your-form-id",
      cssClass: "hs-custom-form",
      target: "#your-button-class-name",
      onFormReady: function() {
        console.log("HubSpot form ready");
      },
      onFormSubmit: function() {
        console.log("HubSpot form submitted");
      }
    });
  });
</script>
  1. Finally, publish your Webflow project and test the button to make sure it is triggering the HubSpot form as expected.

I hope this helps! Let me know if you have any further questions.

3

@Port_of_Folio thanks for the response. I’m at the limits of my current javascript/code ability. But I suspect the answer lies somewhere in the bits in there…I don’t have the ability yet to parse that all out. Nonetheless appreciate the suggestion/education on my end. I have my awesome WebFlow developer working on this via UpWork.com and will post any solutions we get to.

4

Would love an update if you found anything!