HubSpot技術情報

フォーム入力の確認画面をWebサイト上に設定する方法

HubSpot CMS Hub
フォーム入力の確認画面をWebサイト上に設定する方法

目次

商品の注文や個人情報の送信などでフォームを送信する際に、事前に入力内容を確認したい方も多いのではないでしょうか。
HubSpotにはフォームを作成する機能がありますが、標準機能に確認画面はありません。ですが、コーディング上で工夫することで確認画面を実装することができます。

本記事で、HubSpotでフォームの確認画面を実装する手順をご紹介します。

HubSpotについて相談したい方へ

ご相談・お問い合わせはこちら

JBNについて（資料ダウンロード）

ダウンロードする

HubSpotフォームの確認画面の実装手順

HubSpotフォームで確認画面を生成するには、カスタムモジュール内のフォームフィールドを使用します。
今回は、Forms APIの1つであるSubmit form dataを用いてjQueryで実装します。

1.カスタムモジュールの作成

デザインツールでカスタムモジュールを新規作成し、フォームフィールドを追加します。

image4-2

2.コードの記述

jQueryを読み込み、JavaScriptコードを記述します。必要があれば、CSSコードも記述します。

image3-2

【実際のコード】

{% form form_to_use="{{ module.form.form_id }}" %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
{% require_js %}
<script>
(function() {
  const hsForm = (function () {
    let inputData = [];
    let $formWrapper;
    let $rootElm;
    let $formFields;
    let $submitBtn;
 
    /**
     * 共通で使う変数のセット、HubSpot標準フォームの送信イベントを乗っ取るためのイニシャライズを行う
     * @param  {String} selector
     */
    function initialize(selector) {
      $formWrapper = $(selector);
      $rootElm = $formWrapper.parent();
      $submitBtn = $formWrapper.find('.actions input[type=submit]');
 
      $submitBtn.on('click', function(e) {
        e.preventDefault();
        // 依存フィールドなども考慮しこのタイミングでフィールド収集
        $formFields = $formWrapper.find('.hs-form-field');
        validateForms().done(function (){
          $('.js_hsFormErrorMessage').remove();
          inputData = returnFormData();
          showConfirmation(inputData);
        });
        validateForms().fail(function() {
          if ($('.js_hsFormErrorMessage').length < 1) {
            $('<p class="js_hsFormErrorMessage" style="color: #ff5722;">入力項目を確認してください</p>').appendTo($rootElm);
          }
        });
      });
    }
 
    /**
     * 各フォームパーツに.change()をかけ、HubSpotフォーム標準のバリデーションを呼び出す
     */
    function validateForms() {
      const defer = $.Deferred();
 
      $formFields.each(function() {
        if ($(this).find('select').length) {
          $(this).find('select').trigger('change');
        } else if ($(this).find('textarea').length) {
          $(this).find('textarea').trigger('change');
        } else if ($(this).find('input[type=radio]:checked').length) {
          return true;
        } else {
          $(this).find('input').change();
          // TODO: Eメールが漏れることある
        }
      });
 
      // エラーメッセージを確実に出してから判定したいためsetTimeout
      setTimeout(function() {
        if ($('.hs-error-msg').length) {
          defer.reject();
        } else {
          defer.resolve();
        }
      }, 100)
 
      return defer.promise();
    }
 
    /**
     * 確認画面の表示、またHubSpot CRMヘデータ送信するために各フォームからデータを収集し、オブジェクトを含んだ配列を返す
     * @return {Array} 各オブジェクトはlabel, name, value, valueLabelをキーに持つ
     */
    function returnFormData() {
      return $formFields.map(function() {
        let $formParts;
        let name;
        let valueLabel = [];
 
        if ($(this).find('.hs-dateinput').length) {
          $formParts = $(this).find('input');
        } else if ($(this).find('select').length) {
          $formParts = $(this).find('select');
          const $option = $formParts.find('option[value=' + $formParts.val() + ']')
          valueLabel.push($option.text());
        } else if ($(this).find('textarea').length) {
          $formParts = $(this).find('textarea');
        } else if ($(this).find('input[type=radio]').length) {
          $formParts = $(this).find('input[type=radio]:checked');
          valueLabel.push($formParts.siblings('span').text());
          // チェックしていないときのために、:checked以外でnameを取得
          name = $(this).find('input[type=radio]').attr('name');
        } else if ($(this).find('input[type=checkbox]').length) {
          $formParts = $(this).find('input[type=checkbox]:checked');
          name = $(this).find('input[type=checkbox]').attr('name');
          $formParts.each(function() {
            valueLabel.push($(this).siblings('span').text());
          })
        } else {
          $formParts = $(this).find('input');
        }
 
        const label = $(this).find('label span:first').text().replace(/\*/, '');
        const val = (function() {
          if ($formParts.length > 1) { // チェックボックスなど複数の値がある場合
            return $formParts.map(function() {
              return $(this).val();
            }).get();
          } else {
            return $formParts.val();
          }
        })();
 
        return {
          label: label,
          name: name ? name : $formParts.attr('name'),
          value: val,
          valueLabel: valueLabel.join('、')
        }
      }).get();
    }
 
  /**
 * 確認画面を生成する
 * @param  {Array} data
 */
function showConfirmation(data) {
  // 現在のスクロール位置を保存
  const scrollTop = $(window).scrollTop();

  $formWrapper.hide();

  // 確認用テーブルの生成、アペンド
  let $confirmationWrapper = $('<div class="form-confirm"></div>');
  let $table = $('<table></table>');

  function generateConfirmationValue(inputDataItem) {
    if (inputDataItem.value === 'true') {
      return 'はい';
    } else if (inputDataItem.value === 'false') {
      return 'いいえ';
    } else {
      // プルダウンやラジオボタン、複数のチェックボックスなどはvalueに対応するラベルを表示する ex)man→男 woman→女
      if (inputDataItem.valueLabel) {
        return inputDataItem.valueLabel;
      }
      return inputDataItem.value ? inputDataItem.value : '';
    }
  }

  // 入力のあった項目のみを表示するための変更
  data.forEach(function (item) {
    if (item.value) { // 入力がある場合のみ表示
      const val = generateConfirmationValue(item);
      $('<tr><th>' + item.label + '</th><td>' + val + '</td></tr>').appendTo($table);
    }
  });

  $table.appendTo($confirmationWrapper);
  $confirmationWrapper.appendTo($rootElm);

  // 戻る/送信ボタンの生成、アペンド
  let $btnWrapper = $('<div class="form-buttons"></div>')
  const $prevBtn = $('<a href="#" class="form-buttons__button--return">戻る</a>');
  const $submitBtn = $('<a href="#" class="form-buttons__button--submit">送信</a>');
  $prevBtn.on('click', function() {
    $confirmationWrapper.hide();
    $formWrapper.show();
  });
  $submitBtn.on('click', function() {
    sendDataToHS(data);
  });

  $prevBtn.appendTo($btnWrapper);
  $submitBtn.appendTo($btnWrapper);
  $btnWrapper.appendTo($confirmationWrapper);

  // ページトップにスクロール
  $(window).scrollTop(0); 
  updateConfirmationHeading();
}
 
    /**
     * HubSpot CRMへデータ送信
     * @param  {Array} data
     */
    function sendDataToHS(data) {
      // 入力のない項目を削除
      let filteredFormData = data.filter(function (item) {
        return item.value;
      });
      // HubSpot APIの形に合わせ不要なプロパティの削除、配列をセミコロンで結合
      const formData = filteredFormData.map(function (item) {
        delete item.label;
        delete item.valueLabel;
        if (Array.isArray(item.value)) {
          item.value = item.value.join(';');
        }
        return item;
      });
      
      function getCookieAsObj(){
        if(document.cookie === '') return false;
      
        let obj = {}
        document.cookie.split(';').forEach(function(str) {
          const keyValArr = str.split('=');
          obj[keyValArr[0].replace(/ +/g, '')] = decodeURIComponent(keyValArr[1])
        })
        return obj;
      }
 
      const sendData = {
        fields: formData,
        context: {
          hutk: getCookieAsObj().hubspotutk,
          pageUri: '{{ content.absolute_url }}',
          pageName: '{{ page_meta.html_title }}'
        },
      }
 
      $.ajax({
        type: 'POST',
        url: 'https://api.hsforms.com/submissions/v3/integration/submit/{{ hub_id }}/{{ module.form.form_id }}',
        dataType: 'json',
        headers: {
          'Content-Type':'application/json'
        },
        data: JSON.stringify(sendData)
      })
      .done(function (data) {
        afterSubmit();
      })
      .fail(function (jqXHR, textStatus, err) {
        console.error(textStatus);
        if ($('.js_hsFormErrorMessage').length < 1) {
          $('<p class="js_hsFormErrorMessage" style="color: #ff5722;">データの送信に失敗しました。インターネットの接続状況をご確認いただくか、お手数ですが時間をおいて再度お試しください。</p>').appendTo($rootElm);
        }
      });
    }
 
    /**
     * ページ編集画面のカスタムモジュールの設定に基づいた、フォーム送信後の挙動を実現
     */
    function afterSubmit() {
      if ('{{ module.form.response_type }}' === 'redirect') {
        location.href = '{{ module.form.redirect_id ? page_by_id(module.form.redirect_id).absoluteUrl : module.form.redirect_url }}';
      } else {
        $rootElm.children().remove();
        $('{{ module.form.message|replace("\n", "") }}').appendTo($rootElm);
      }
    }
 
    return {
      init: initialize
    }
  })()
 
  window.addEventListener('message', event => {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
      hsForm.init('.hsForm_{{ module.form.form_id }}');
    }
  });
})();
</script>
{% end_require_js %}

3.カスタムモジュールのページへの追加

確認画面を生成したいページに、先程作成したカスタムモジュールを追加し、該当のフォームを選択します。

image2-2

 

フォームを選択すると、フォームの設定を変更することができますが、確認画面付きのフォームの場合、送信ボタンを押すと確認画面に遷移します。そのため送信ボタンのテキストは「入力内容を確認する」のようにしておくことをおすすめします。

image1-2

4.ページを公開する

ページを公開して完成です。実際に以下のようなフォーム入力の確認画面が生成されます。

確認画面 (1)

フォーム入力画面に戻って修正する際も、入力内容を保持したまま修正できるので、一から入力し直す必要はありません。

以上の手順で、確認画面がないHubSpotのフォームに確認画面を実装することが可能になります。

※掲載したソースコードをご利用される場合は、自己責任のもとご利用ください。

HubSpotの活用にお困りの方へ

JBNは多くの企業様のHubSpotの導入や運用を支援しており、多くの知見があります。HubSpotを導入しているが、活用しきれていないという方にも、お客様のニーズに合わせた支援を行うことが可能です。
どんなお悩みでもお気軽にご相談ください。

 

HubSpot活用や導入支援についてご相談ください

JBNはHubSpotの導入支援やAPI連携、システム開発も得意としています。
「HubSpotを便利に、効果的に使いたい」とお悩みの方はお気軽にご相談ください。

オンライン相談を申し込む

 

JBNについて（資料ダウンロード）

株式会社JBNの特徴や、HubSpotを用いたwebサイトの実績についてご確認いただけます。

 

 

その他のHubSpot関連記事

CONTACT お問い合わせ

詳しいサービスの内容や実績を知りたい方、Webマーケティング戦略、サイト構築、運用支援のご相談など
お気軽にお問い合わせください。

フォームから相談する

24時間365日受付。2営業日以内にご返信します