---
title: フォーム送信時に独自の処理を挟む方法2つ｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: 「フォーム送信時、他の解析タグにもデータを送りたい」などの場面で使える方法です。フォーム送信時に処理を発火させる方法は ・フォーム埋め込みコードに指定する方法 ・windowオブジェクトのグローバルイベントを利用する方法 の2通りあり、それぞれにメリット・デメリットがあるのでまとめます。
image: https://demo.100inc.co.jp/hubfs/Imported%20images/logo.png
---

[![株式会社100ロゴ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported%20images/logo.png?width=60&height=45&name=logo.png)](https://demo.100inc.co.jp)

Jul 12, 2021, 12:00:00 AM[CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)

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

## 目次

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

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

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

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

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

![フォーム埋め込みコード取得時の画面のキャプチャ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported_Blog_Media/on-form-submit-Dec-30-2022-06-40-47-3207-AM.png?width=650&name=on-form-submit-Dec-30-2022-06-40-47-3207-AM.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://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fon-form-submit)
- [ツイート](https://twitter.com/share?text=%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E9%80%81%E4%BF%A1%E6%99%82%E3%81%AB%E7%8B%AC%E8%87%AA%E3%81%AE%E5%87%A6%E7%90%86%E3%82%92%E6%8C%9F%E3%82%80%E6%96%B9%E6%B3%952%E3%81%A4%EF%BD%9CTips%EF%BD%9C%E6%97%A5%E6%9C%AC%E3%83%88%E3%83%83%E3%83%97%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AEHubSpot%E3%83%86%E3%83%83%E3%82%AF%E4%BC%81%E6%A5%AD+%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%91%E3%83%B3%E3%82%BB&url=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fon-form-submit)

執筆者：[Admin](https://demo.100inc.co.jp/blog/author/admin)

## 関連記事

## 人気の記事

- Nov 22, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater)
- Dec 30, 2022, 3:22:31 PM
    - [#sample](https://demo.100inc.co.jp/blog/tag/sample)
  
  
  [テストpost（複製）](https://demo.100inc.co.jp/blog/アカデミー練習-1-0)
- Jun 20, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [CSSやJSの修正をすぐに確認したければ、プレビューURLで](https://demo.100inc.co.jp/blog/tips/check-update-on-preview-url)
- Dec 11, 2017, 12:00:00 AM
    - [ブログ](https://demo.100inc.co.jp/blog/tag/ブログ)
  
  
  [INBOUND 2017参加レポート サブセッション編](https://demo.100inc.co.jp/blog/tips/inbound-2017-subsessions)
- May 9, 2024, 1:20:53 PM
    - [#通常のタグ](https://demo.100inc.co.jp/blog/tag/通常のタグ)
  
  
  [test](https://demo.100inc.co.jp/blog/test-shida)

© Pensees