ランディングページの摩擦を減らすための8つのマルチステップフォームの例

公開: 2017-08-28

クリック後のランディングページが長すぎるか、リードキャプチャフォームが多くの情報を要求するため、Webユーザーがクリックして離れるのは珍しいことではありません。 マルチステップフォームは訪問者情報を収集するために不可欠ですが、多くのマーケターはそれらを正しく設計できず、貴重なリードを失うことになります。 そのため、クリック後のランディングページをデザインして、訪問者のエンゲージメントを維持し、長いフォームに脅かされないようにすることが不可欠です。

これを行う1つの方法は、マルチステップフォームを使用することです。

マルチステップフォームとは何ですか?

マルチステップフォームは、長いフォームを短く、気の遠くなるようなステップに分割したものです。 マーケティング担当者の観点からは、詳細な見込み情報を収集したい状況に最適です。これは、小さなチャンクで収集するためです。 見込み客の観点からは、マルチステップフォームを使用すると、短いフォームに記入してから追加のフォームフィールドに進み、自分自身やビジネスについてさらに共有することで、関心を示すことができます。

追加情報の要求は、ユーザーがベースライン情報を送信した後にのみ表示されるためです。 マルチステップフォームは、クリック後のランディングページの摩擦を減らすことができます。 このようにフォームを設計すると、訪問者のページ滞在時間が長くなり、より多くのリードが生成され、より適格なリードについての洞察を得るのに役立ちます。 もちろん、これはマーケティングの目標到達プロセスを通じて育成して販売することができます。

マルチステップフォームと2ステップオプトインフォーム

マルチステップフォームと2ステップオプトインフォームはどちらも、リードを引き付けて資格を与えるのに役立ちます。 それらが異なるのは、ページでの表示方法です。 マルチステップフォームにはステージがあり、後続の各ステージは、前のステージが完了した後にのみ表示されます。 逆に、訪問者がCTAボタンをクリックすると、2段階のオプトインフォームが表示され、ポップアップボックスにフォームが表示されます。

ページ上のフォームまたは2ステップのオプトインフォームの代わりにマルチステップフォームを使用すると、「ゴルディロックス症候群」と呼ばれるものを回避できます。 長すぎると、見込み客がそれを完了するのを思いとどまらせる可能性があります。 短すぎると、使用できないリード、または販売よりもマーケティングに適したリードになってしまいます。 見込み客が現在居住しているマーケティングファネルのオファーとステージに基づいてクリック後のランディングページフォームを最適化することにより、より適切な情報を要求し、ひいてはより良いコンバージョン率を生み出すことができます。

「1つのサイズですべてに対応」するテンプレート自体はないかもしれませんが、以下のマルチステップフォームの例は、次のデザインでエミュレートするための優れた出発点です。 世界最大のブランドのいくつかがマルチステップフォームを使用して訪問者を引き付け、リードを最大化する方法を見てみましょう。

マルチステップフォームの例

Uber

Uberは、このクリック後のランディングページを使用して、副業として運転するように人々を誘導します。

マルチステップフォームユーバー

ページ上でマルチステップフォームを使用して、訪問者のスムーズな変換プロセスを作成します。 CTAボタンに「次へ」と表示され、トラフィックをフォームの2番目のステップに誘導する矢印が表示されていることに注目してください。 これらは両方とも、プロセスに少なくとも1つの追加ステップがあることを示しています。

エグゼクティブ&プロフェッショナルの誰が誰ですか

この選択的なネットワーキングフォーラムは、訪問者がネットワークへの参加資格を申請することを奨励するために、ホームページにマルチステップフォームを配置しました。

マルチステップフォームビジュアルキュー

フォームは、訪問者が後続の各ステップに進む必要があることを示すために、ステップインジケーター(それぞれが矢印の形をした視覚的な手がかり)を使用して適切に設計されています。 CTAボタンには矢印も含まれており、申請プロセスがまだ完了していないことを見込み客に示します。

ページ上のスペースが限られているため、ページ上のフォームでは、大きなフォント、長いフィールド、さらにはフィールドラベルさえも使用できるとは限りません。 逆に、マルチステップフォームはセクションに表示されるため、より多くのスペースを作成します。したがって、より多くのバリエーションと視覚的な手がかりが可能になります。 多くの場合、ユーザーはサインアッププロセスの進行状況を追跡できるように、プログレスバーも含まれています。

フェニックス大学

フェニックス大学の大学院が上部近くのプログレスバーをどのように使用しているかをご覧ください。

マルチステップフォームフェニックス

フォームは、訪問者からの非侵襲的な情報(研究分野、学位レベル、学習形式、および郵便番号)の要求を開始します。 プログレスバーは、クイックスタートガイドをダウンロードする前にフォームがどのくらいの長さであるかを訪問者に明確に示すので、いい感じです。

ソーシャルメディアとの接続は、マルチステップフォームの設計に関してもう1つの効果的な戦術です。 実際、ソーシャルメディアの自動入力を使用すると、コンバージョン率が189%も増加する可能性があります。 この機能を実装することにより、ユーザーの関連するソーシャル情報がフォームに自動的に挿入されます。

また、ユーザーエクスペリエンスに関しては、プレースホルダーテキストは、ソーシャルアカウントによって既に自動入力されているフィールドと間違える可能性があるため、訪問者を苛立たせ、混乱させる可能性があります。 代わりに、ボックスの上の各フィールドにラベルを付けて、摩擦を減らし、フォーム内でユーザーをスムーズにガイドします。

GreenGeeks

GreenGeeksは、マルチステップフォームを含めるために、このクリック後のランディングページを作成しました。 まず、クリック後のランディングページがオファーを行います。

マルチステップフォームの例GreenGeeks1

訪問者が[今すぐ開始] CTAボタンをクリックすると、次のフォームのステップ1でこのページが表示されます。

マルチステップフォームの例GreenGeeks2

この時点では、ユーザーは識別情報を求められることはなく、ドメイン(新規または既存)のみが求められるため、目標到達プロセスの最後まで進んでいないユーザーは、長く複雑なフォームに惑わされることはありません。 訪問者がサインアップを続行する準備ができると、フォームのステップ2であるこのページに移動します。

マルチステップフォームの例GreenGeeks3

これは、各セクションと個々のフィールドに明確にラベルが付けられた別のマルチステップフォームであり、顧客にシームレスなサインアッププロセスを提供します。

Ciriusマーケティング

これがCiriusMarketingの例です。 ポップアップボックスにマルチステップフォームを備えた2ステップのオプトインページを使用します。 これはクリック後のランディングページで、折り目のすぐ上にCTAボタンが表示されています。

マルチステップフォームの例CiriusMarketing 1

ポップアップボックスのマルチステップフォームは次のとおりです。

マルチステップフォームの例CiriusMarketing 2

ウィンドウの上部に50%完了したことを示す進行状況バーに注目して、見込み客に提供する必要のある情報はこれだけではないことを知らせます。

スプラウトソーシャル

Sprout Socialは、見込み客が記入できるように、このマルチステップフォームを設計しました。

マルチステップフォームスプラウトソーシャル

この最初のステップは、アカウントを作成する場所です。 次に、ソーシャルプロファイルを添付できる2番目のステップに移動します。 最後に、ステップ3で、サインアッププロセスを完了し、Sproutの使用を開始できます。

クイックベース

以下のクイックベースのクリック後のランディングページは、従業員トレーニングサービスを提供します。

マルチステップフォームの例QuickBase1

見込み客が無料トライアルを開始する準備ができたら、協力的なCTAボタン(ページ上に合計3つ)のいずれかをクリックし、このマルチステップ登録フォームのステップ1に到達します。

マルチステップフォームクイックベース

フォームのこの部分が「ステップ1/2」と具体的にラベル付けされていることに注目してください。 無料トライアルから「数秒」離れていることを見込み客に知らせることは、フォームへの記入にそれほど時間がかからないことを示しています。

Hootsuite

Hootsuiteは、明確に定義された手順で、アカウントのサインアッププロセスを通じて見込み客をガイドします。

マルチステップフォームhootsuite

見出しには、サインアップするまでのステップ数が記載されているため、見込み客はそれが何を伴うのかをすぐに知ることができます。 次に、各ステップにセクションヘッダーが明確にラベル付けされているため、訪問者は簡単に完了できます。

マルチステップフォームによるページエンゲージメントの増加

最善の変換シナリオで見込み客からの多くの情報が必要であり、威圧的になりたくない場合。 マルチステップフォームを使用して状況を単純化すると、これらの問題を軽減するのに役立ちます。 これらのマルチステップフォームの例は、摩擦を減らし、顧客に情報であなたを信頼するように説得し、最終的にはあなたが探しているコンバージョンにつながるのに役立ちます。

顧客獲得あたりのコストを下げるために、常にすべての広告をパーソナライズされたクリック後のランディングページに接続してください。 今すぐInstapageEnterpriseデモにサインアップして、専用のポストクリックページの作成を開始してください。