.png "HubSpot Employee"){kind=icon}
HubSpotでフォーム確認画面を実装する方法
現在、HubSpotの標準機能でフォーム送信完了前の確認画面を実装する機能はございませんが、少しのコーディング作業と設定の工夫で、フォーム確認画面の実装が実は可能です。
この記事では、HubSpotのCMSを使って、どのようにフォーム送信の確認画面を実装方法を、ご案内いたします。
具体的に実装するフォームの動きを下図にまとめてみました。本文を読み進める前に、参考にしてみてください。
ステップ１：入力画面の作成
カスタムモジュール作成
通常だと、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アドレス』と、なります。
早速カスタムモジュールを作ってみましょう。
１：デザインマネージャーを開く
マーケティング>ファイルとテンプレート>デザインツールをクリック
２：画面右上のファイル>新規ファイル>モジュールを選択し、モジュールのタイプを選択しファイルの名前を設定してください。ここでは、ページテンプレート、ローカルモジュールを選択し、『HTMLフォーム』と名付け、作成をクリックしてください。
３：以下のコードを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メールアドレスを入力するフォームが作成できます。
４：次に、作成したモジュールを使って、マーケティング担当者がページ編集画面でリダイレクト先のページを指定しやすくするために、フィールドを追加しましょう。
フィールドを追加するには、フィールドの追加をクリックし、セレクターの欄からURLを選択し、フィールドの名前（リダイレクト先指定）と入力します。HubL変数名にはアルファ
ベットとアンダーバーを使用し、変数名（例：redirect_url）を入れてください。
5:フィールドの追加が完了したら、変数名をコードに入力しましょう。
HubL変数名の右側にあるコピー、スニペットをコピーをクリックし、値をコード一行目のフォームアクションにペーストしてください。
上記ステップが完了したら、変更を公開をクリックして、モジュールの完成です。
６：入力ページ作成
このステップでは、上記で作成したカスタムモジュールを入力画面に埋め込み、必要に応じてテキストを加えていただき、入力画面の公開をして完了です。
ステップ２：確認画面の作成
１：HubSpotフォームの作成
今回の例では、姓名、名前、Eメール、フォーム送信同意のフィールドを含んだフォームを作ります。作成が完了しましたら、姓名、名前、Eメールのフィールドを非表示にして、公開してください。
２：確認画面の作成
まず確認画面に上記のステップで作成したフォームを埋め込みます。
３：次にリッチテキストに、フォームの送信内容を表示させるHubLを記述していきます。
今回使用するHubLは、URLのクエリーパラメーターを読み込んでくる、{{ request.query_dict }}を利用します。
今回の使用するフォームのフィールドに合わせて、以下の内容を、リッチテキストに記述してください。
以下の内容でよろしいですか？
姓名：{{ request.query_dict.lastname}}
名前：{{ request.query_dict.firstname }}
Eメール：{{ request.query_dict.email }}
これで、確認画面の作成が完了しました。
ステップ３：送信完了ページの作成
現在、私はマイグレーションスペシャリスト（お客様のウェブサイトのコンテンツとデザインをHubSpotプラットフォームに移行するサービス担当者）としてHubSpotで働いておりますが、部署移動する前は、カスタマーサポートとして働いておりました。HubSpotのツールを使用していただく上で、ほとんどのお客様が『入力ページ』→『確認画面』→『送信完了ページ完了ページ』の順番で作成しておりましたが、実は順番を逆にした方が、各ページでリダイレクト先を選ぶ時や、細かい設定を行う時に効率が上がるので、まずは訪問者がたどり着く最後のページを作りましょう。
この記事では完了ページの作り方は省きますが、ページの作成方法は、こちらの記事を参考に作成してください。
実際にテストしてみましょう
こちらのページから、フォームを送信。
すると、フォーム内容確認ページにリダイレクトし、同時にURLにフォームに入力した内容がクエリに引き渡され、記述したHubLがクエリの内容を検知しフォーム内容を表示し、非表示にしたフォームフィールドにも値が自動入力されています。
最後にプライバシーポリシーに同意するのチェックボックスにチェックを入れ、送信をクリックすると、HubSpot内にコンタクトが作成されます。
まとめ
細かい説明と大量のスクショのため長くなってしまいましたが、実際には5~10分もあれば実装できるので、ぜひお試しください！
HubSpotでフォーム確認画面を実装する方法
@neemo はい、入力内容は残ったまま編集画面に戻ることができます。
下記は機能テストのため見た目は全然整えていないのですが、実際にはこのように動作します。
https://share.getcloudapp.com/RBu4bJA7
（このロジックを基に見た目を整えて、実際に納品して事例も幾つかあります）
上記デモのテストページを残しておりますので、よろしければお試しください！
 | Atsushi Handa https://assialiholic.net/  |
HubSpotでフォーム確認画面を実装する方法
HubSpotでフォーム確認画面を実装する方法
@SYM さん
> エラーチェックなどの機能をそのまま利用したい
私も同じことを考えまして、HubSpotのフォームの標準バリデーションを使用しつつ、確認画面を生成する開発をしたことがあります。
詳細は下記ブログ記事にて解説しておりますので、よろしければご参考までにどうぞm(_ _)m
https://hubspot.pensees.co.jp/tips/build-form-confirmation-preview-with-jquery
| | Atsushi Handa https://assialiholic.net/ |
