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

【问题标题】：How do I modify a Hubspot javascript form that is system generated如何修改系统生成的 Hubspot javascript 表单
【发布时间】：2016-01-19 01:36:07
【问题描述】：

我遇到了一个问题，我试图在他们的 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>

谢谢

【问题讨论】：

您提到“但我无法编辑他们生成的代码。”您是使用可嵌入表单 html/JS sn-p 还是严格来说是设计管理器/编辑工具中的 COS 模块？
另外——了解您计划如何在提交时使用来自输入的值会很有帮助。例如：操作输入字段值将需要在回调中使用 .change() 强制更新表单的状态。
我正在使用 COS 表单...据我所知，您无法编辑此代码/模块。我想获取表单数据（在提交之后通过验证等）并通过 AJAX 将其发布到其他地方。

标签： javascript hubspot

【解决方案1】：

除了@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
    });
  }
});

【讨论】：

【解决方案2】：

选项#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 有效负载的方法，以将所需数据发送到您的最终目的地。

【讨论】：

谢谢 - 我曾尝试过选项 1，但对用户来说并不理想，因为他们仍需要手动添加嵌入代码。我想捎带所有现有的表单。然而，选项 2 听起来会很好用。谢谢
可以确认选项 2 几乎可以正常工作 - 这么多数据！谢谢
很高兴听到！确保您将工作流程设置为在每次联系人满足条件/提交表单时触发，而不仅仅是第一次 :)

【解决方案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。

【讨论】：