如何修改系统生成的 Hubspot JavaScript 表单

Question

我遇到一个问题，我试图在他们的 CMS 中扩展 Hubspot 表单以从中获得一些附加功能。

不幸的是，我无法编辑他们在 CMS 中的代码，因此我认为可能有一种方法可以在他们的代码后添加一些 javascript 以添加我想做的事情。

他们生成的代码如下所示：

      hbspt.forms.create({ 
        portalId: '435515',
        formId: '19046100-d845-4f9c-96cf-974286fc6b45', 
      });

我想在提交后获取表单数据，因此它需要如下所示：

      hbspt.forms.create({ 
        portalId: '435515',
        formId: '19046100-d845-4f9c-96cf-974286fc6b45',
        onFormSubmit: function($data) {
          console.log( $("input[name=firstname]").val() );
        }    
      });

但我无法编辑它们生成的代码。有没有办法将 onFormSubmit 添加到此函数而不编辑它们生成的代码。

所以像这样：（这不起作用）

    //Their original code
    <script>    
      hbspt.forms.create({ 
        portalId: '435515',
        formId: '19046100-d845-4f9c-96cf-974286fc6b45',   
      });
    </script> 

    //My added function
    <script> 
        onFormSubmit: function($data) {
          console.log( $("input[name=firstname]").val() );
        }          
    </script>  

谢谢

Answer 1

除了 @Kirk H 提到的之外，另一种方法可能是监视页面的事件消息，并在发布消息且与 HubSpot 表单相关（例如表单提交）时执行操作。

当然，它不是最佳解决方案，因为您实际上通常监视页面的事件，但就成本而言，它不需要任何外部库、服务或任何 Pro/Enterprise 帐户，并且应该以简单的方式完成工作并且不是繁重的工作负载场景。

例如，这对于与其他系统集成非常有用，例如 Google 跟踪代码管理器：

window.addEventListener("message", function(event) {
  // An event regarding HS form occured, and it is a form submission here.
  if(event.data.type === 'hsFormCallback' &&
    event.data.eventName === 'onFormSubmitted') {
    window.dataLayer.push({
      'event': 'hubspot-form-success',
      'hs-form-guid': event.data.id
    });
  }
});