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

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

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

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

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

という感じです。

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

{%- set forms = module.conditional_form|map('form') -%}
{%- set content_ids = forms|map('redirect_id') -%}
{%- set contents = content_by_ids(content_ids) -%}
{%- set conditional_forms_with_url = [] -%}

{%- for obj in module.conditional_form -%}
  {%- set url = [obj.form.redirect_url] -%}

  {%- if obj.form.redirect_id -%}
    {%- for cont in contents -%}
      {%- if cont.id == obj.form.redirect_id -%}
        {%- do url.clear() -%}
        {%- do url.append(cont.absolute_url) -%}
      {%- endif -%}
    {%- endfor -%}
  {%- endif -%}

  {%- do conditional_forms_with_url.append({
    property_value: obj.property_value,
    form_id: obj.form.form_id,
    response_type: obj.form.response_type,
    redirect_url: url[0],
    message: obj.form.message|escape,
  }) -%}
{%- endfor -%}

<script
  charset="utf-8"
  type="text/javascript"
  src="//js.hsforms.net/forms/v2.js"
></script>
<script>
  const firstFormId = "{{ module.form.form_id }}"
  const conditonalForms = {{ conditional_forms_with_url|tojson }}
  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 === '{{ module.propety_for_condition }}')
      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: "{{ hub_id }}",
        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経由でフォーム送信することになるでしょう。