フォーム送信時に独自の処理を挟む方法2つ

「フォーム送信時、他の解析タグにもデータを送りたい」などの場面で使える方法です。
フォーム送信時に処理を発火させる方法は

• フォーム埋め込みコードに指定する方法
• windowオブジェクトのグローバルイベントを利用する方法

の2通りあり、それぞれにメリット・デメリットがあるのでまとめます。

フォーム埋め込みコードに指定する方法

フォーム埋め込みに下記の画面から取得するscriptタグを利用する際に使える方法です。

埋め込みコードに onFormSubmit を追加し、コールバック関数を記述する形になります。コールバック関数の引数にはフォームのjQueryオブジェクトが入るようで、引数を使うのであればjQuery必須のようです。

<script>
  hbspt.forms.create({
    region: "（フォーム毎のregion）",
    portalId: "（ポータルID）",
    formId: "（フォームID）",
    onFormSubmit: function($form) {
      // 送信時の処理を指定
    }
  });
</script> 

メリット

• 埋め込みコードを拡張するのでコードが散らばらない

デメリット

• jQuery必須っぽい
• HubLによるフォーム埋め込みの場合は利用できない

該当ドキュメント：https://legacydocs.hubspot.com/docs/methods/forms/advanced_form_options

windowオブジェクトのグローバルイベントを利用する方法

2つ目の方法はグローバルイベントを利用する方法です。HubSpotのフォームはライフサイクルに合わせて、それぞれグローバルにイベントを送信しています。このうち onFormSubmit のイベントを利用し、コールバック関数を書く形になります。フォームの送信データを取得するには、コールバック関数の引数を利用します（下記では event）。

<script>
  window.addEventListener("message", (event) => {
    if (
      event.data.type === "hsFormCallback" &&
      event.data.eventName === "onFormSubmit"
    ) {
      // 送信時の処理を指定
    }
  });
</script>

メリット

• HubLによるフォーム埋め込みでも利用できる
• jQuery非依存

デメリット

• scriptタグによる埋め込みの場合、コードが若干散らかりがちかも（大した問題じゃないですが）

該当ドキュメント：https://legacydocs.hubspot.com/global-form-events