フォームの入力値に応じて、次のフォームを出し分ける

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

• 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のAPI経由でフォーム送信することになるでしょう。