HubSpotフォームのJavaScriptイベント

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

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

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

MessageEventについて

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

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

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

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

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

フォームイベント

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

ロード時

• onBeforeFormInit
  フォームがページにロードされる前に呼び出されます。 基本的なコードの書き方は上記のonBeforeFormInitの部分を書き換えるだけです。
  
  jQueryだと以下のようになります。
  
• onReady
  フォームがページにロードされた後に呼び出されます。
• onFormReady
  onReadyと同様でフォームがページにロードされた後に呼び出されます。
• onBeforeValidationInit
  フォームがページにロードされた後のバリデーション実行前に呼び出されます。

送信時

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

おわりに

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

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