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

我遇到了一个问题，我试图在他们的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添加到此函数，而无需编辑它们生成的代码

比如：（这不起作用）

//它们的原始代码
hbspt.forms.create（{
portalId:'435515'，
表格：“19046100-d845-4f9c-96cf-974286fc6b45”，
});
//我的附加功能
onFormSubmit：函数（$data）{
log（$（“输入[name=firstname]”））.val（）；
}          

谢谢

选项#1:在COS富文本模块中使用可嵌入表单--我知道这听起来有点倒退，但它是可行的。这使您可以访问onFormSubmit，这是根据开发者文档的嵌入式HubSpot表单的有效选项：

选项#2（需要HubSpot Pro或Enterprise）：在提交表单时触发工作流，并将webhook作为一个步骤—无法修改有效负载，但它会将整个联系人记录发送到您选择的端点：

---

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

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

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

例如，这可能有助于与其他系统集成：

---

最简单的方法是使用：

---

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

event.data.id

您提到“但我无法编辑它们生成的代码”。您是在使用可嵌入表单html/JS代码段还是在Design manager/编辑工具中严格使用COS模块？此外，了解您计划如何使用提交时输入的值将很有帮助。操作输入字段值需要在回调中使用.change（）强制更新表单的状态。我正在使用COS表单。。。据我所知，您无法编辑此代码/模块。我想获取表单数据（在提交之后，以便通过验证等），然后通过AJAX将其发布到其他地方。谢谢-我尝试了选项1，但对用户来说并不理想，因为他们仍然需要手动添加嵌入代码。我想利用现有的表格。然而，选项2听起来似乎效果不错。感谢您可以确认选项2几乎可以正常工作-数据太多了！谢谢你的好意！确保将工作流设置为在联系人每次满足条件/提交表单时启动，而不仅仅是第一次：）

    //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>  

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

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