HubSpotでマルチステップフォームを実装してCVR改善

フォームの項目を複数のステップに分け、段階的に入力を促すフォームをマルチステップフォーム（ステップフォームともいいます）と呼びます。

このステップ式のフォームはBtoC、BtoB関わらず、フォームのコンバージョン率の向上や離脱箇所の分析・改善アクションを行うために重要な仕様です。

これまでHubSpotではステップフォーム機能が標準で搭載されておりませんでしたが、ベータ版としてステップフォーム機能の利用が可能になりました。

本記事では、HubSpotの新機能であるマルチステップフォーム機能のご紹介と当社で行ったステップフォームの開発についてご紹介します。

▽こんな方にオススメ
・HubSpotでマルチステップフォームを利用したい

1．マルチステップフォームとは？

マルチステップフォームとは、上記のようにユーザーが入力する項目をいくつかに分割した形式の入力フォームです。

従来は、フォームのすべての入力項目が1ページに表示されている形式が一般的でした。
こちらのフォームの形式は、入力するべき項目の全体感や内容を一度に把握することができ、答えやすい内容を選んで入力することができる点がメリットとなります。
ただし、入力項目が多い場合、ユーザーがその量に圧倒され、離脱率が高まるといったことや、
任意の項目から答えることができるため、どの項目が離脱につながったのかを分析することが困難でした。

一方で、マルチステップフォームは、複数のステップに分かれているため下記のようなメリットがあります。
・ユーザーの心理的負担の軽減
・フォームの入力を順番に進めることができる
・フォーム入力の進捗状況がわかる
・選択形式を工夫することで入力を簡単に行える
・フォームの離脱箇所を把握できる

ステップフォームは、ユーザーが一度に視認できる入力項目が少なく、情報量を減らせるためユーザーの心理的負担を軽減することができます。
1つのステップに表示する情報量を制限することで、ユーザーに「これくらいなら入力してもいいかな、、」という心理を引き出すことができます。
ステップフォームの序盤は特に選択式の項目とするとこの効果をより引き立たせることができます。

また、分析や改善アクションも行いやすいため、ユーザーファーストな設計を施しCVRの向上を狙うことができます。

2．【新機能！】マルチステップフォームを作る方法

これまでHubSpotでマルチステップフォームを作成する場合、複数のフォームをつなげる方法や連携アプリを活用する方法で実装する必要がありました。
HubSpotコミュニティー

今回は、HubSpotで新しくローンチされたマルチステップフォーム機能（ベータ版）を活用してステップフォームを作成する方法をご紹介します。

2.1 ベータ版のインストール

HubSpotの「製品の最新情報」からベータ版として表示されている「マルチステップフォーム」のベータ版に参加します。（記事執筆時点：2024.10.22）

本ベータ版は下記のプランが対象となりますので、ご注意ください。

Content Enterprise
Marketing Starter、Marketing Pro、Marketing Enterprise
Marketing+ Pro、Marketing+ Enterprise
Sales Starter、Sales Pro、Sales Enterprise
Service Starter、Service Pro、Service Enterprise

また、下記のベータ版にもご参加ください。
・フォームの条件付きロジック
・フォームのスタイル設定とレイアウトのカスタマイズ

2.2 フォームの作成

ベータ版への参加が完了したらHubSpotのフォーム作成画面から「フォームを作成」をクリックします。
下記の画面に遷移するので、左側の「新しいフォームエディター」を選択してください。

フォームの編集画面に移動します。

画面の基本構成は通常フォームと変わりありませんが、利用できる機能が異なりますので、ご紹介します。

・追加タブ
フィールドやプロパティー、テキスト情報をフォームにドラッグアンドドロップで追加することができます。

・スタイルタブ
フォームの要素全体のカラーやフォントを設定することができます。
デフォルトではブランドで設定しているカラーになりますので、適宜調整を行う必要があります。

・ロジックタブ
フォームの回答に応じて次に表示する設問を変更できる機能がロジックです。
パーソナライズしたフォーム回答体験を提供することができるため、ユーザー体験の向上が見込めます。

そのほか、要素ごとのレイアウト設定や自動化、最適化、設定なども通常フォームと同様に設定することができます。

2.3 フォーム公開

フォームの作成が完了したらいよいよ公開です。
下記のように「HubSpotに埋め込む」「埋め込みコードを取得」「共有リンクをコピー」の3つの公開方法があります。ベータ版公開当初は埋め込みコード発行ができなかったため、少しずつアップデートされているようです。

3．ステップフォーム機能の注意点

このマルチステップフォームはHTMLソースを編集することはできないため、装飾を付けたりデザインを自在に調整することができない点にご注意ください。

少し機能が制限されてしまいますが、BtoBのお問い合わせページやBotCの登録フォームとして十分利用できるシーンがあるかと思います。
ぜひ活用してみてください。

4．その他、HubSpotでステップフォームを作成する方法

HubSpotでステップフォームを作成する方法は上記以外にも開発や拡張アプリを利用するケースがあるかと思います。ただ、扱いづらいことやアプリ利用料金が発生することがあり、少し導入しづらいと感じている方は少なくないのではないでしょうか。

当社では、HubSpotで作成したウェブサイトやLPを用いて広告運用を行うことも多く、リード獲得のためのCVR改善は非常に重要でした。

そこでHubSpot内で作成したウェブサイトやLPにHubSpotフォームを加工してステップフォーム化することを実現しました。
下記では、スクラッチ開発したLPのメインビジュアルにステップフォームを埋め込んでいます。

フォームの進捗状況を表示し、ラジオボタンはクリックしやすいボタン形式に変更するなど調整しています。
その結果、CVRは大きく改善され、順調にリード獲得数を伸ばすことができています。

HubSpotで作成したウェブサイトやLPに、HubSpotのフォームを活用したステップフォームを実装したい方は下記よりご相談くださいませ。

関連記事
【CVR改善】フォーム離脱率を計測してリード数と質を改善（GTM・CSSセレクタを活用）

5．ステップフォーム実装でCVR改善

いかがでしたか。
今回はHubSpotのベータ版としてリリースされているマルチステップフォームについて解説しました。
HTML編集を行えないため、少し利用範囲が制限されてしまいますが、今後のアップデートに期待しましょう。

ステップフォームはリード獲得において非常に重要な要素です。
これまでウェブサイトに埋め込んだフォームをステップ式にしたいけど実装できず、断念していた方も少なくないかと思います。

HubSpot内でスクラッチ制作したウェブサイトやランディングページにステップフォームを埋め込みたい方は、是非お気軽にご相談ください。