---
title: フォームの入力値に応じて、次のフォームを出し分ける｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: 例えば最初のフォームにラジオボタンがあったとして、Aを選択した場合→続けてAフォームを出したい、Bを選択した場合→続けてBフォームを出したい、という場合に使えるものです。アイデア次第でステップフォームの入力とかに使えるやつですね。カスタムモジュールとして作成し、汎用的に使える仕組みを解説します。
---

[ブログ](https://demo.100inc.co.jp/blog)

# [フォームの入力値に応じて、次のフォームを出し分ける｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ](https://demo.100inc.co.jp/blog/tips/sequence-conditional-form)

 作成者: [Admin](https://demo.100inc.co.jp/blog/author/admin)｜Jan 12, 2022, 3:00:00 PM

例えば最初のフォームにラジオボタンがあったとして、

- Aを選択した場合→続けてAフォームを出したい
- Bを選択した場合→続けてBフォームを出したい

という場合に使えるものです。アイデア次第でステップフォームの入力とかに使えるやつですね。カスタムモジュールのフィールドとしては

- フォーム選択（フォームセレクタフィールド）
- 出し分けに利用するプロパティ名（テキストフィールド）
- 出し分けフォーム（グループ&リピート） 
    - プロパティ値（テキストフィールド）
    - フォーム選択（フォームセレクタフィールド）

という感じです。

 カスタムモジュールのフィールド構成

コードはおおよそ次の通りです。最初のデータ整形の部分が少しゴチャゴチャしてしまっていますが……redirectUrlを<script>内で後からHubLで取れないので仕方ないですね。

```

  
   
   
   
   
    
   
    
   <script
    charset="utf-8"
    type="text/javascript"
    src="//js.hsforms.net/forms/v2.js"
   ></script>
   <script>
    const firstFormId = ""
    const conditonalForms = 
    let valForCondition
    let currentFormId = firstFormId
    
    window.addEventListener('message', event => {
    if(
    event.data.type !== 'hsFormCallback'
    || firstFormId !== currentFormId
    ) {
    return false;
    }
    if(event.data.eventName === 'onFormSubmit') {
    const prop = event.data.data.find(obj => obj.name === '')
    valForCondition = prop.value
    }
    if(event.data.eventName === 'onFormSubmitted') {
    const form = conditonalForms.find(obj => obj.property_value === valForCondition)
    currentFormId = form.form_id
    
    const formOption = {
    region: "na1",
    portalId: "5692228",
    formId: form.form_id,
    }
    
    if(form.response_type === 'redirect') {
    formOption.redirectUrl = form.redirect_url
    } else if (form.response_type === 'inline') {
    formOption.inlineMessage = form.message
    }
    
    hbspt.forms.create(formOption);
    }
    });
   </script>
  
```

この例では1つ目のフォーム送信後はインラインメッセージを表示させ、そのまま2つ目のフォームを表示させることを想定していますが、1つ目送信後に遷移させたページの方で出し分けを行うことも可能です。

フォームを分けるのが嫌で、全体として1つのステップフォームとしたい場合はスクラッチでフォームをマークアップして、[Submit data to a form](https://legacydocs.hubspot.com/docs/methods/forms/submit_form)のAPI経由でフォーム送信することになるでしょう。

[完全な記事を表示](https://demo.100inc.co.jp/blog/tips/sequence-conditional-form)

```json
{
  "@context" : "http://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Admin"
  },
  "dateModified" : "2022-12-30T06:41:33.925Z",
  "datePublished" : "2022-01-12T15:00:00Z",
  "headline" : "フォームの入力値に応じて、次のフォームを出し分ける",
  "image" : {
    "@type" : "ImageObject",
    "height" : 60,
    "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
    "width" : 60
  },
  "mainEntityOfPage" : "https://demo.100inc.co.jp/blog/tips/sequence-conditional-form",
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "height" : 60,
      "url" : "/hs/hsstatic/content_shared_assets/static-1.4092/img/default-amp-logo.png",
      "width" : 60
    },
    "name" : "ブログ"
  }
}
```