フォーム送信時に独自の処理を挟む方法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