---
title: フォーム送信時に独自の処理を挟む方法2つ
description: "「フォーム送信時、他の解析タグにもデータを送りたい」などの場面で使える方法です。フォーム送信時に処理を発火させる方法は ・フォーム埋め込みコードに指定する方法 ・windowオブジェクトのグローバルイベントを利用する方法\nの2通りあり、それぞれにメリット・デメリットがあるのでまとめます。"
---

フォーム送信時に独自の処理を挟む方法2つ

# フォーム送信時に独自の処理を挟む方法2つ

[半田 惇志](https://demo.100inc.co.jp/category-test/author/半田-惇志)  Jul 12, 2021, 12:00:00 AM

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

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

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

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

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

![フォーム埋め込みコード取得時の画面のキャプチャ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported_Blog_Media/on-form-submit.png?width=650&name=on-form-submit.png)

埋め込みコードに `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](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](https://legacydocs.hubspot.com/global-form-events)

[コンタクト](https://demo.100inc.co.jp/category-test/tag/コンタクト) , [Eメール](https://demo.100inc.co.jp/category-test/tag/eメール) , [会員機能](https://demo.100inc.co.jp/category-test/tag/会員機能) , [CMS Hub](https://demo.100inc.co.jp/category-test/tag/cms-hub)

[コンタクト](https://demo.100inc.co.jp/category-test/tag/コンタクト)[Eメール](https://demo.100inc.co.jp/category-test/tag/eメール)[会員機能](https://demo.100inc.co.jp/category-test/tag/会員機能)[CMS Hub](https://demo.100inc.co.jp/category-test/tag/cms-hub)