自社のヒント&ナレッジ共有

Yoshi
HubSpot Employee
HubSpot Employee

HubSpotでフォーム確認画面を実装する方法

現在、HubSpotの標準機能でフォーム送信完了前の確認画面を実装する機能はございませんが、少しのコーディング作業と設定の工夫で、フォーム確認画面の実装が実は可能です。

この記事では、HubSpotのCMSを使って、どのようにフォーム送信の確認画面を実装方法を、ご案内いたします。

 

具体的に実装するフォームの動きを下図にまとめてみました。本文を読み進める前に、参考にしてみてください。

 

Screenshot 0002-01-16 at 5.02.42 PM.png

 

ステップ1:入力画面の作成

カスタムモジュール作成

Screenshot 0002-01-16 at 5.04.40 PM.png

 

通常だと、HubSpotのフォームを作成してから、フォーム入力ページを作成を行うのですが、今回はHTMLフォームをカスタムモジュールで作成し、ページに埋め込んでいきます。HTMLで、フォームを記述する際に、を使用することにより、訪問者が入力したデータを、確認画面のURLのクエリパラメーターに引き渡すことができるからです。

 

HTMLでフォームを作成した時に、action属性にURLを記述すると、フォーム送信を行なったあとのリダイレクト先が指定でき、『method="get"』を利用することにより、フォームのフィールドに入力した値が、リダイレクト先のULRのクエリパラメーターに自動的に加えられます。

 

<form action="www.sample.com" method="get">
        <div>
            <label for="lastname">姓名</label>
            <input type="text" id="lastname" name="lastname">
        </div>
         <div>
            <label for="firstname">名前</label>
            <input type="text" id="firstname" name="firstname">
        </div>
        <div>
            <label for="email">Eメール</label>
            <input type="text" id="email" name="email">
        </div>

        <input type="submit" value="送信する">

</form>

 

 

 

例えば、上記のHTMLで記述されたフォームを送信した場合には、リダイレクト先のURLが『www.sample.com?firstname=名前&lastname=姓名&email=e-mailアドレス』と、なります。

 

早速カスタムモジュールを作ってみましょう。

1:デザインマネージャーを開く

マーケティング>ファイルとテンプレート>デザインツールをクリック

 

2:画面右上のファイル>新規ファイル>モジュールを選択し、モジュールのタイプを選択しファイルの名前を設定してください。ここでは、ページテンプレート、ローカルモジュールを選択し、『HTMLフォーム』と名付け、作成をクリックしてください。

Screenshot 0002-01-16 at 5.11.43 PM.png

 

 

3:以下のコードをHTML+HubLのウィンドウにペーストしてください。

 

<form action="ここにHubLをペースト" method="get">

        <div>

            <label for="lastname">姓名</label>

            <input type="text" id="lastname" name="lastname">

        </div>

         <div>

            <label for="firstname">ファーストネーム</label>

            <input type="text" id="firstname" name="firstname">

        </div>

        <div>

            <label for="email">Eメール</label>

            <input type="text" id="email" name="email">

        </div>

        

        <input type="submit" value="送信する">

  

</form>

 

上記のコードは、姓名、名前、Eメールアドレスを入力するフォームが作成できます。

 

4:次に、作成したモジュールを使って、マーケティング担当者がページ編集画面でリダイレクト先のページを指定しやすくするために、フィールドを追加しましょう。

フィールドを追加するには、フィールドの追加をクリックし、セレクターの欄からURLを選択し、フィールドの名前(リダイレクト先指定)と入力します。HubL変数名にはアルファ

ベットとアンダーバーを使用し、変数名(例:redirect_url)を入れてください。

 

Screenshot 0002-01-16 at 5.12.28 PM.png

Screenshot 0002-01-16 at 5.13.46 PM.png

 

5:フィールドの追加が完了したら、変数名をコードに入力しましょう。

HubL変数名の右側にあるコピー、スニペットをコピーをクリックし、値をコード一行目のフォームアクションにペーストしてください。

Screenshot 0002-01-16 at 5.15.14 PM.png

上記ステップが完了したら、変更を公開をクリックして、モジュールの完成です。

 

6:入力ページ作成

このステップでは、上記で作成したカスタムモジュールを入力画面に埋め込み、必要に応じてテキストを加えていただき、入力画面の公開をして完了です。

Screenshot 0002-01-16 at 5.19.44 PM.png

 

 

ステップ2:確認画面の作成

Screenshot 0002-01-16 at 5.20.36 PM.png

1:HubSpotフォームの作成

今回の例では、姓名、名前、Eメール、フォーム送信同意のフィールドを含んだフォームを作ります。作成が完了しましたら、姓名、名前、Eメールのフィールドを非表示にして、公開してください。

Screenshot 0002-01-16 at 5.21.37 PM.png

 

2:確認画面の作成

まず確認画面に上記のステップで作成したフォームを埋め込みます。

Screenshot 0002-01-16 at 5.22.38 PM.png

 

3:次にリッチテキストに、フォームの送信内容を表示させるHubLを記述していきます。

今回使用するHubLは、URLのクエリーパラメーターを読み込んでくる、{{ request.query_dict }}を利用します。

 

今回の使用するフォームのフィールドに合わせて、以下の内容を、リッチテキストに記述してください。

以下の内容でよろしいですか?

姓名:{{ request.query_dict.lastname}}

名前:{{ request.query_dict.firstname }}

Eメール:{{ request.query_dict.email }}

 

 

Screenshot 0002-01-16 at 5.23.17 PM.png

 

これで、確認画面の作成が完了しました。

 

ステップ3:送信完了ページの作成

 

Screenshot 0002-01-16 at 5.24.31 PM.png

 

現在、私はマイグレーションスペシャリスト(お客様のウェブサイトのコンテンツとデザインをHubSpotプラットフォームに移行するサービス担当者)としてHubSpotで働いておりますが、部署移動する前は、カスタマーサポートとして働いておりました。HubSpotのツールを使用していただく上で、ほとんどのお客様が『入力ページ』→『確認画面』→『送信完了ページ完了ページ』の順番で作成しておりましたが、実は順番を逆にした方が、各ページでリダイレクト先を選ぶ時や、細かい設定を行う時に効率が上がるので、まずは訪問者がたどり着く最後のページを作りましょう。

 

この記事では完了ページの作り方は省きますが、ページの作成方法は、こちらの記事を参考に作成してください。

 

実際にテストしてみましょう

こちらのページから、フォームを送信。

 

Screenshot 0002-01-16 at 5.25.33 PM.png

 

 

すると、フォーム内容確認ページにリダイレクトし、同時にURLにフォームに入力した内容がクエリに引き渡され、記述したHubLがクエリの内容を検知しフォーム内容を表示し、非表示にしたフォームフィールドにも値が自動入力されています。

 

Screenshot 0002-01-16 at 5.26.26 PM.png

 

 

最後にプライバシーポリシーに同意するのチェックボックスにチェックを入れ、送信をクリックすると、HubSpot内にコンタクトが作成されます。

 

まとめ

細かい説明と大量のスクショのため長くなってしまいましたが、実際には5~10分もあれば実装できるので、ぜひお試しください!

プロフェッショナルサービス


栁澤啓明|シニアテクニカルコンサルタント

6件の返信
assi
ガイド役

HubSpotでフォーム確認画面を実装する方法

@neemo はい、入力内容は残ったまま編集画面に戻ることができます。

下記は機能テストのため見た目は全然整えていないのですが、実際にはこのように動作します。

https://share.getcloudapp.com/RBu4bJA7

(このロジックを基に見た目を整えて、実際に納品して事例も幾つかあります)

上記デモのテストページを残しておりますので、よろしければお試しください!

 http://6891652.hs-sites.com/-temporary-slug-9ca03744-e378-479f-93ce-776bc0c1fb83?hs_preview=PKmJuFc...

 


HS Tech Ninja Atsushi Handa
独立しました:https://assialiholic.net/about
Twitter logo
neemo
トップ投稿者

HubSpotでフォーム確認画面を実装する方法

@assi ありがとうございます!
仰る通り、できました🤲🤲
assi
ガイド役

HubSpotでフォーム確認画面を実装する方法

@SYM さん

 

> エラーチェックなどの機能をそのまま利用したい

 

私も同じことを考えまして、HubSpotのフォームの標準バリデーションを使用しつつ、確認画面を生成する開発をしたことがあります。

詳細は下記ブログ記事にて解説しておりますので、よろしければご参考までにどうぞm(_ _)m

https://hubspot.pensees.co.jp/tips/build-form-confirmation-preview-with-jquery


HS Tech Ninja Atsushi Handa
独立しました:https://assialiholic.net/about
Twitter logo
neemo
トップ投稿者

HubSpotでフォーム確認画面を実装する方法

@assi さん、ありがとうございます。

こちらを実装した場合「戻る」を押すとどうなりますか?

入力したまま残りますでしょうか?

0 いいね!
SYM
メンバー | Elite Partner
メンバー | Elite Partner

HubSpotでフォーム確認画面を実装する方法

Hubspotの入力画面を利用して(エラーチェックなどの機能をそのまま利用したい)確認画面を作成する方法はありますか?

また確認画面から戻るを押すと入力された値がすべて消えてしまうと思うのですが認識あっていますか?

0 いいね!
Yoshi
HubSpot Employee
HubSpot Employee

HubSpotでフォーム確認画面を実装する方法

@SYM さん

ご返信ありがとうございます。

HubSpotのフォームをしようすると、確認画面が出せないため、カスタムモジュールでフォームを使用し、クエリーパラメーターに引き渡し、HubLを使って値を表示させるようにしております。

 

こちらのページ(https://www.biglytics.jp/html-form-page)を試しに送信してもらい、戻るを押すと入力された値は消えてしまいます。

プロフェッショナルサービス


栁澤啓明|シニアテクニカルコンサルタント

0 いいね!