<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=211808849452561&amp;ev=PageView&amp;noscript=1">

HubSpotの基本的な使い方から現場ベースのナレッジまで、HubSpotに特化して情報をご提供します。
どんどんコンテンツを追加していきますので、ご期待ください!

  1. Penseesトップ
  2. How to HubSpot
  3. フォーム送信時に独自の処理を挟む方法2つ
CMS

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

MAIL NOTIFY

パンセへのご相談はこちら

HubSpotお役立ち情報 コツや使い方をご紹介します!

POST SEARCH

    RECOMMEND

    CATEGORY