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

选项＃1：在富含COS的文本模块中使用可嵌入的表单 - 我知道这些声音倒退，但它可行。这样，您就可以访问 onFormSubmit ，这是开发人员文档的可嵌入HubSpot表单的有效选项：http://developers.hubspot.com/docs/methods/forms/advanced_form_options

选项＃2（需要HubSpot Pro或Enterprise）：在表单提交时触发工作流并包含webhook作为步骤 - 无法修改有效负载，但它会发送整个联系人记录到您选择的端点：http://developers.hubspot.com/docs/methods/workflows/webhook_information

选项＃3（适用于所有产品级别 - 已付费，但最低限额为$$）：使用Zapier.com将HubSpot连接到其他SaaS平台。 Zapier还包括一种自定义webhook有效负载的方法，以将所需数据发送到最终目的地。

Answer 2

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

可以肯定的是，这并不是最佳的解决方案，因为您实际上通常在监视页面的事件，但是就成本而言，它不需要任何外部库，服务或任何Pro / Enterprise帐户，因此应该在简单而不是繁重的工作量情况下工作。

例如，这对于与其他系统集成such as Google Tag Manager很有用：

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
    });
  }
});

Answer 3

最简单的方法是使用HubSpot global form events：

window.addEventListener('message', event => {
  if (
    event.data.type === 'hsFormCallback'
    && event.data.eventName === 'onFormSubmit'
  ) {
    console.log("Form Submitted!");
  }
});

如果页面上有多个表单，还可以使用event.data.id检查其 id 。

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

3 个答案: