<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=211808849452561&amp;ev=PageView&amp;noscript=1">

HubSpotの基本的な使い方から現場ベースのナレッジまで、HubSpotに特化して情報をご提供します。
どんどんコンテンツを追加していきますので、ご期待ください!

  1. Penseesトップ
  2. How to HubSpot
  3. フォームの入力値に応じて、次のフォームを出し分ける

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

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

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

MAIL NOTIFY

パンセへのご相談はこちら

HubSpotお役立ち情報 コツや使い方をご紹介します!

POST SEARCH

    RECOMMEND

    CATEGORY