HubSpotフォームのJavaScriptイベント

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

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

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

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');
      }
    });
  • onReady
    フォームがページにロードされた後に呼び出されます。
  • onFormReady
    onReadyと同様でフォームがページにロードされた後に呼び出されます。
  • onBeforeValidationInit
    フォームがページにロードされた後のバリデーション実行前に呼び出されます。

送信時

  • onFormSubmit
    フォーム送信時に呼び出されます。
  • onBeforeFormSubmit
    こちらもフォーム送信時に呼び出されます。
  • onFormSubmitted
    フォーム送信完了後に呼び出されます。

おわりに

HubSpot公式サイトの説明と殆ど同じ内容ですが、フォーム送信の前後で何かしたい場合に役立つフォームイベントの紹介でした。

もしHubSpotフォームの値を動的に変更したい場合や、高度なことを行いたい場合はこちらを参照すると解決するかもしれません。

 

この記事をシェアする

Facebook Twitter LinkedIn note はてなブログ
アクセサイト編集担当

アクセサイト編集担当

マーケティングDX・営業DXに関連するお役立ち情報を投稿しています。
以下の公式SNSでも情報を発信していますので、ぜひフォローをお願いします!

SHARE

Facebook Twitter LinkedIn note はてなブログ
前の記事へ ブログ一覧へ戻る 次の記事へ