HubSpotフォームのJavaScriptイベント

HubSpotフォームを使用していると、フォーム送信の前後で独自のJavaScriptを実行したい場合があります。

例えばフォームが表示されたら画面上の要素を変更したり、フォーム送信後にGoogle Analyticsにデータを送信したりなどです。

このような実装を行うにはフォームのイベントを知る必要があるので重要な部分をまとめました。

1. MessageEventについて
2. フォームイベント
1. 2-1. ロード時
2. 2-2. 送信時
3. おわりに

MessageEventについて

MessageEventとは、HubSpotのフォームが表示されたり、送信を行うとwindowから発行されるイベントです。

以下のようにwindow.addEventListenerでリスナーを登録して使用します。

window.addEventListener('message', event => {
  console.log(event);
});

以下はconsole.log(event)の中身で重要な部分だけ抜粋しています。

data:
  type: "hsFormCallback"
  eventName: "onBeforeFormInit"
  id: "xxxxx-xxxx-xxxx-xxxx-xxxxx"

dataオブジェクトにはフォームのidやイベント状態が入っています。

type: "hsFormCallback"でフォームから発行されたイベントであることが分かり、eventNameキーに様々な状態が入るので、この2つの条件でifを作ることになります。

フォームイベント

ロード時と送信時でいくつかのイベントがあります。
イベントの呼び出し順で列挙していますが仕様変更で前後することがあると思います。

ロード時

onBeforeFormInit
フォームがページにロードされる前に呼び出されます。

window.addEventListener('message', function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onBeforeFormInit') {
    console.log('onBeforeFormInit');
  }
});

基本的なコードの書き方は上記のonBeforeFormInitの部分を書き換えるだけです。

jQueryだと以下のようになります。

$(window).on('message', function(event) {
  if (event.originalEvent.data.type === 'hsFormCallback' && event.originalEvent.data.eventName === 'onBeforeFormInit') {
    console.log('onBeforeFormInit');
  }
});