任意のWebサイトのスライダーレイアウトでマルチステップフォームを作成する方法

公開: 2021-11-18

詳細に入る前に、スライダーレイアウトを備えたマルチステップフォームとは何かを説明しましょう。

「私たちはスライダーと呼ばれる新しいフォーマットを作成しました。これは、縦長のフォームをマルチステップフォームに変換します。主な目的は、フォームをよりインタラクティブにし、アピールを短くし、任意のランディングページにブレンドできるようにすることです。」
Kate Bojkov、プロダクトオーナー。

マルチステップフォームの目標は、各質問が別々に提示されるように、より長いフォームを分割することです。ユーザーは「次へ」ボタンをクリックして質問をナビゲートし、「前へ」ボタンをクリックして質問に戻ることができます。このタイプの質問表示は、論理的な順序で情報を収集し、ユーザーの集中力を高め、最新のWebサイトのレイアウトにより適合させるのに役立ちます。

マルチステップフォームを作成してWebサイトに埋め込むためのすばやく簡単な方法をお探しの場合は、これを行う方法の詳細なチュートリアルの概要を説明しました。

まず、ログインするか、無料のEmbeFormsアカウントを作成し（まだアカウントを持っていない場合）、次の手順に従います。

フォームページに移動します
既存のフォームを選択するか、新しいフォームを作成します
左側のサイドバーで[レイアウトとテーマ]をクリックし、[スライダー]を選択します
[保存して公開]をクリックします

フォームのリンクを共有して、ユーザーがスライダーフォームにアクセスできるようにしたり、インタラクティブなフォームウィジェットにフォームを埋め込んだりすることができます。

ウィジェットを作成するには、次の手順に従います。

ウィジェットをクリックして、フォームの表示方法を選択します：インラインセクション、フローター、ボタン、またはバナー
[保存]をクリックして、ウィジェットコードをコピーします
フォームを表示するWebサイトの部分にコードを貼り付けます

それでおしまい。以下のビデオを見ることができるように、より詳細なステップバイステップのチュートリアルについては：

ご覧のとおり、完全なフォームを自分で作成する必要はありません。ただし、フォームデザインをWebサイトのフロントエンドに完全に適合させたい場合は、EmbedFromsにカスタムCSSオプションが用意されており、たとえばフォントを変更できます。他のカスタマイズオプションを使用して、送信ボタンのコピーを変更し、ロゴとレイアウトを追加することもできます。

スライダーレイアウトのフォームのデモは次のとおりです。

フォームは、チェックアウトやホームページなど、WordPress、Duda、WixなどのWebビルダーで作成された任意のランディングページに埋め込むことができます。

一番良いところ？プラグインは必要なく、完全に無料です。

マルチステップフォームのベストプラクティス

「2ステップと1ステップの変換フォームのテスト」の調査によると、複数のステップを持つフォームは、1ステップの長いフォームよりもフォーム変換が14％高くなっています。

ただし、最高のコンバージョン率を得るためにマルチステップのオンラインフォームを作成する場合は、覚えておく必要のある簡単な原則がいくつかあります。

論理的な順序で質問を分ける

質問の順序は、回答者の回答に直接影響を与える可能性があります。そのため、フォームの設計に関しては、論理的に順序付けられた質問が重要です。フォーム入力プロセスでの摩擦を減らす最善の方法は、最初に最も重要な質問をし、論理的な順序でフィールドをグループ化することです。

たとえば、電話番号や電子メールアドレスなどの連絡先情報を要求するフィールドがさらにある場合は、それらのフィールドを優先度順に並べ、直感的な順序で相互にフォローする必要があります。多くのフォームビルダーには、質問を簡単かつ迅速に再配置するためのドラッグアンドドロップオプションがあります。

進捗状況を表示

あといくつの質問が残っているかについての不確実性は、マルチステップフォームで摩擦を引き起こす可能性があります。経験則として、プログレスバーまたはフォームを完成させるために残したユーザーを示す任意のタイプのインジケーターを使用することです。

EmbedFormsでは、各質問に「質問2 of 15」という機能があり、回答者に残りの質問の数を示します。

ありがとうページを含める

ありがとうページは、感謝の気持ちを表すだけでなく、送信が成功したことをユーザーに安心させるのにも最適です。何らかの理由で、フォームの送信後に回答者を自分のありがとうページに移動したい場合は、リダイレクトリンクオプションを使用できます。

フォームのA/Bテスト

フォームビルダーは、技術的な問題のリスクなしにフォームテストに最適です。フォームビルダーを使用すると、A/Bテストが非常に簡単になります。フォームの長さ、デザイン、CTAボタンのコピーをテストして、どのフォームデザインがコンバージョンを増加させるかを確認できます。 EmbedFormsを使用すると、同じフォームを異なるデザインまたはウィジェットで複製し、どちらがより多くの回答者を獲得するかをテストできます。

マルチステップフォームを使用する利点

低摩擦

心理的に複数のステップからなるフォームは、フォームを完成させるという回答者の意図により良い影響を与えます。

まず、回答者が次のボタンをクリックするたびに、フォームを完成させるというユーザーの目標がわずかに大きくなります。

次に、このタイプのフォーム入力は、一度に1つの質問に集中する必要があるため、焦点を絞ります。

モバイルフレンドリー

マルチステップフォームは、モバイルデバイスから簡単に入力できます。シングルステップフォームと比較して、マルチステップフォームは、モバイル画面に1つの質問ポップアップしか表示されないため、入力がはるかに簡単です。このようにして、ユーザーエクスペリエンスも大幅に向上させることができます。

魅力的

マルチステップフォームは、ユーザーエンゲージメントを高めるために戦略的に設計されています。

ユーザーは一度に1つの質問にのみ回答し、「次へ」をクリックして次の質問に移動する必要があるため、これらのタイプのフォームはそれほど圧倒的ではありません。

視覚的に魅力的

マルチステップフォームは、Webサイトではあまり使用されないため、ユーザーがフォームに入力する必要があるときに圧倒的な感覚を呼び起こすことはありません。

マルチステップフォームまたはシングルステップフォーム

マルチページフォームまたはシングルステップフォーム？どれを選ぶ？

マルチステップフォームは、ユーザーからの多くの情報が必要な場合に最適です。これまでのところ、質問ごとに長いフォームを分割すると、フラストレーションが減り、ユーザーが質問に記入する意欲が高まることがわかりました。

ただし、少量のユーザーデータが必要で、単純な連絡フォーム、リード生成、または登録フォームを埋め込むだけの場合は、シングルステップフォームで作業を完了できます。

まとめ

マルチステップフォームは、質問の表示を改善し、ユーザーの関心を高めるという利点を提供します。

EmbedFormsを使用すると、誰でも数回クリックするだけで無制限の数のマルチステップフォームを作成し、必要なWebページにフォームを埋め込むことができます。