ブログ

フォーム送信時に独自の処理を挟む方法2つ｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ

作成者: Admin｜Jul 11, 2021 3:00:00 PM

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

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

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

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

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

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

  
    
   
  1. <script>
    2. 
   
  2.  hbspt.forms.create({
    3. 
   
  3.  region: "（フォーム毎のregion）",
    4. 
   
  4.  portalId: "（ポータルID）",
    5. 
   
  5.  formId: "（フォームID）",
    6. 
   
  6.  onFormSubmit: function($form) {
    7. 
   
  7.  // 送信時の処理を指定
    8. 
   
  8.  }
    9. 
   
  9.  });
    10. 
   
  10. </script> 
    11.
メリット
  • 埋め込みコードを拡張するのでコードが散らばらない
デメリット
  • jQuery必須っぽい
  • HubLによるフォーム埋め込みの場合は利用できない

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

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

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

  
    
   
  1. <script>
    2. 
   
  2.  window.addEventListener("message", (event) => {
    3. 
   
  3.  if (
    4. 
   
  4.  event.data.type === "hsFormCallback" &&
    5. 
   
  5.  event.data.eventName === "onFormSubmit"
    6. 
   
  6.  ) {
    7. 
   
  7.  // 送信時の処理を指定
    8. 
   
  8.  }
    9. 
   
  9.  });
    10. 
   
  10. </script>
    11.
メリット
  • HubLによるフォーム埋め込みでも利用できる
  • jQuery非依存
デメリット
  • scriptタグによる埋め込みの場合、コードが若干散らかりがちかも（大した問題じゃないですが）

該当ドキュメント：https://legacydocs.hubspot.com/global-form-events
完全な記事を表示