フォームの入力値に応じて、次のフォームを出し分ける｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ

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

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