AI要約
ウェブサイト訪問者がマルチステップフォームで問い合わせる体験を、よりポジティブなものにする方法をお探しですか？
フォームを複数のセクションに分割することで、フォーム疲れを防ぎ、ウェブサイトでのユーザーエンゲージメントとリード生成を向上させることができます。
このガイドでは、WPFormsを使用してWordPressでマルチステップフォームを設定する基本的な方法を、2つの異なる方法で説明します。
WordPressでマルチステップフォームを作成する方法
WPFormsを使用してWordPressでマルチステップフォームを作成するのは非常に簡単です。以下の手順に従ってください。
この記事の内容
ステップ1：マルチステップフォームビルダープラグインをインストールする
マルチステップフォーム、計算機、その他の種類のフォームを作成できるフォームビルダープラグインをお探しなら、WPForms以外にありません。カスタマイズされたフォームを非常に簡単に作成できる多数の機能を提供しています。
このチュートリアルでは、WPForms Proへのサインアップをお勧めします。ページ分割、リードフォームアドオン、条件付きロジック、カスタマイズ可能なテンプレートなど、マルチステップフォームを非常に簡単に作成できる多くの機能が搭載されています。
WPForms Proライセンスを取得したら、プラグインをウェブサイトにアクティブ化してインストールするだけです。その方法の手順については、WordPressプラグインのインストールに関するこの記事をご覧ください。
ステップ2：フォームを作成し、関連フィールドを追加する
それでは、WordPressでマルチステップフォームを作成しましょう。ダッシュボードから、WPFormsに移動し、新規追加ボタンをクリックしてください。
次のページで、フォームに名前を付けます。このチュートリアルの目的では、「WordPressマルチステップフォーム」と呼びます。
その後、空白フォームを作成ボタンをクリックして最初からフォームの構築を開始するか、既存のテンプレートにフィールドを追加することができます。
時間を節約し、フォームに関連フィールドを追加するために、シンプルな連絡先フォームを選択し、テンプレートを使用ボタンをクリックします。
テンプレートを使用ボタンをクリックすると、フォームビルダーにリダイレクトされます。左側には、利用可能なすべてのフィールドが表示されます。
一方、画面の右側には、フォームの編集可能なプレビューが表示され、他のフィールドをドラッグアンドドロップしてお好みに合わせて配置できます。
シンプルな連絡先フォームテンプレートでは、すでに名前、メールアドレス、コメントまたはメッセージのフォームフィールドがあります。
フォームフィールドのいずれかをクリックして変更したり、新しいフィールドを追加してフォームをカスタマイズしたりできます。たとえば、ユーザーが次の情報を提供するフィールドを追加しました。
- 会社名 – 一行テキストフィールドを使用します。
- 役職 – ここでも、一行テキストフィールドを使用します。
- ウェブサイト – おしゃれなフィールドセクションのウェブサイト/URLフィールドを使用します。
- 業界 – チェックボックスフィールドを使用し、情報技術、製造、小売、ヘルスケアなどの選択肢を追加します。
- 国/地域 – ドロップダウンフィールドを使用し、米国、カナダ、オーストラリア、英国、ニュージーランドなどの選択肢を追加します。
- どのようにして弊社をお知りになりましたか？ – 再度、ドロップダウンフィールドを使用し、Google、Facebook、LinkedInなどの選択肢を追加します。
フォームテンプレートをさらに強化し、ユースケースに関連性を持たせるために、これらのフィールドを追加しました。それでは、フォームを複数のパートに分割する方法を見ていきましょう。
ステップ3：フォームを複数のパートに分割する
WPFormsを使用すると、フォームを複数のパートに分割することが非常に簡単であることをご存知でしょう。そして、その方法は一つではありません！
要件に応じて、ページ区切りフィールドを使用してフォームを分割するか、リードフォームアドオンを使用することができます。どちらの手順もご紹介します！
方法1：ページ区切りフィールドを追加してフォームを分割する
フォームを複数のパートに分割するには、まず左側のパネルからページ区切りフィールドを右側のパネルにドラッグアンドドロップします。
フォームを分割したい正確な場所にページ区切りフィールドを挿入する必要があることを覚えておいてください。
フォームを再度分割したい場合は、同じ手順を繰り返します。WPFormsでは、必要なだけ多くのフォームページを作成できます。
2ステップのフォームを作成することも、好きなだけステップ数を増やすこともできますが、ユーザーを圧倒したくないので、シンプルに保つことを忘れないでください。
完了したら、マルチページプログレスバーをカスタマイズして、フォームの使いやすさを向上させることができます。
マルチページフォームのプログレスバーをカスタマイズする
プログレスバーを使用すると、ユーザーはフォームのさまざまなセクションを知ることができ、送信をクリックする前にあとどれくらい入力する必要があるかを知ることができます。
WPFormsは、マルチステップフォーム用に3つの異なるパンくずリストスタイルのインジケーターバーを導入することで、物事を非常に簡単にします：
- プログレスバー：このオプションにより、ユーザーは入力中にフォームの進捗状況を確認し、情報を把握することができます。
- 円：このオプションにより、マルチステップフォームで各ページに1つの円とページタイトルを表示できます。
- コネクタ：このオプションは、マルチステップフォームの各セクションのページタイトルと接続バーを表示します。
マルチステップフォームのプログレスバーとページタイトルの最初のページをカスタマイズするには、最初のページ区切りセクションをクリックします。この場所から、次のことができます：
- 目的のプログレスインジケータータイプを選択します。
- ページインジケーターの色をお好みに合わせて変更します。
- ユーザーがフォームのどのセクションにいるかを理解するのに役立つように、ページタイトルをカスタマイズします（円またはコネクタを選択した場合）。
次のページタイトルとボタンのテキストをカスタマイズする
フォームの最初のセクションのページタイトルを変更しましたが、フォームの他のセクションはどうでしょうか？
最初のページと同様に、関連するページ区切りフィールドをクリックして次のセクションのページタイトルを変更でき、さらにその次のラベルをカスタマイズすることもできます。
また、前のページを表示オプションをオンにすると、サイト訪問者に「前のページ」ボタンが表示され、前のラベルを好みに合わせてカスタマイズすることもできます。
このように、必要に応じて、顧客はフォームの前のページに戻ることができ、フォームの使いやすさがさらに向上します。
方法2：リードフォームアドオンを使用してフォームを分割する
ページ分割フィールドは、フォームを多数のセクションに分割するのに問題なく機能しますが、代替手段を探している場合は、リードフォームアドオンを使用できます。
さらに、リードを生成することは、WordPressで中小企業を管理するのに役立ちます。これはWPFormsでも完全に可能です。
リードフォームアドオンのインストールは非常に簡単です。WordPressダッシュボードからWPFormsに移動し、アドオンをクリックします。
次に、アドオンの検索セクションで「リードフォーム」を探します。次に、アドオンのインストールをクリックし、次にアクティブ化ボタンをクリックします。
フォームビルダーでリードフォームモードを有効にする
リードフォームアドオンがインストールおよびアクティブ化されたら、フォームを作成しているフォームビルダーに戻ります。
そこから、設定タブをクリックし、リードフォームオプションを選択します。次に、リードフォームモードを有効にするオプションをオンにするだけです。
これにより、リードフォームアドオンがフォームを再構築するという通知が表示されます。リードフォームを有効にするボタンをクリックします。
フィールドは自動的にリードフォームに変換されます。フィールド数が非常に多い場合を除き、通常は数秒で完了します。
フォームは自動的に多数のセクションに分割されます。必要に応じてフィールドを追加、変更、および配置してください。
リードフォームのスタイル設定をカスタマイズする
リードフォームアドオンの最も優れた点の1つは、フロントエンドでのフォームの外観をカスタマイズできることです。
リードフォームの設定ページには、すべてのカスタマイズオプションがあります。利用可能なカスタマイズオプションを以下に説明します。
- リードフォームのタイトル：リードフォームのタイトルフィールドにタイトルを入力して、リードフォームにタイトルを付けることができます。ユーザーがフォームに入力すると、タイトルはフロントエンドに表示されます。
- アクセントカラー： このオプションを使用すると、インタラクティブなカラーピッカーツールを使用して、ボタン、プログレスバー、アイコンの色を変更できます。
- スクロールアニメーション： このオプションを有効にすると、WPFormsは、フォームの次のボタンをクリックすると、ユーザーをページの上部に移動させます。
追加の設定の助けを借りて、リードフォームをさらにカスタマイズできます。これらのオプションにアクセスするには、高度なスタイル設定をオンにする必要があります。
また、フォームコンテナオプションもあり、リードフォームをコンテナに囲むことができます。これにより、ページの他の要素から際立たせることができます。
マルチステップフォームをすべての希望する機能を含めるようにカスタマイズしたら、保存ボタンを押すことを忘れないでください。
新しいリードを獲得し、メールリストを増やすために、マルチステップフォームを使用することもできます。WPForms を使用してリードマグネットページを作成する方法についてのこちらのガイドをご覧ください。
ステップ4：通知と確認をカスタマイズする
通知を設定することで、新しいフォームの入力について常に最新の状態に保たれます。フォームビルダーで、設定に移動し、次に通知を選択します。
件名行などのデフォルトの通知設定を編集したり、必要に応じて受信者のメールを変更したりできます。
完了したら、設定メニューの確認に移動して、フォーム送信が成功した場合の応答を設定します。
次に、ウェブサイトに最適な確認タイプ（メッセージ、ページ表示、またはリダイレクト）を選択し、そのオプションを設定します。
変更を失わないように、必ずフォームを再度保存し、設定が更新されていることを確認してください。
ステップ5：マルチステップWordPressフォームを公開する
素晴らしい！WordPress でマルチステップフォームを正常に作成しました。いよいよ公開して、フォーム送信がどんどん届くのを確認しましょう！
プロセスは非常に簡単で、フォームビルダーから離れる必要さえありません。右上隅にある埋め込みボタンをクリックするだけです。
既存のページにフォームを公開するか、新しいページを作成するかを選択できます。その後、WordPress のブロックエディターにリダイレクトされます。
フォームはすでに埋め込まれています。あとは公開ボタンをクリックするだけで、マルチステップ WordPress フォームが公開されます！
Divi のようなページビルダーを使用している場合は、Divi のお問い合わせフォームを作成する方法についてのこちらのガイドも参照してください。
マルチステップフォームに関するその他の質問
WordPress のマルチステップフォームは、読者の間で人気のあるトピックです。それらに関するよくある質問への回答を以下に示します。
マルチステップフォームとは何ですか？
マルチステップフォームは、フォームを複数のステップまたはページに分割し、長いフォームを管理しやすいセクションに分割することで、ユーザーエクスペリエンスを向上させます。これは、アプリケーション、アンケート、登録などの複雑なフォームに最適です。WPForms は、ページブレークフィールドを使用してマルチステップフォームの作成を簡素化し、ユーザーの簡単なナビゲーションを可能にします。
マルチステップフォームはウェブサイトを遅くしますか？
いいえ、マルチステップフォームはウェブサイトを遅くしません。WPForms、特にリードフォームアドオンを使用すると、これらのフォームは速度とパフォーマンスのために最適化されており、ウェブサイト全体の速度に影響を与えることなく迅速に読み込まれます。
いつマルチステップフォームを使用すべきですか？
長くて詳細なフォームがある場合は、マルチステップフォームを使用してください。登録、アンケート、またはアプリケーションに最適で、多くの情報を収集する必要があるが、ランディングページでユーザーを圧倒したくない場合に最適です。WPForms は効率的なマルチステップフォームの作成を可能にし、ユーザーエンゲージメントを向上させます。
マルチステップレイアウトでコンバージョン率が高いフォームの種類は？
求職応募、複雑なアンケート、長時間の登録など、詳細な情報が必要なフォームは、マルチステップレイアウトを使用するとより効果的です。WPFormsを使用して簡単に作成できるこの形式は、ユーザーのエンゲージメントを維持し、長文フォームによる圧倒感を軽減することで、コンバージョン率を高めます。
次に、WordPressで計算機フォームを作成する方法を学びます
WordPressで計算機フォームを作成して、ウェブサイトのユーザーエンゲージメントを高める方法を知りたいですか？ラッキーです！WPFormsとその計算アドオンのおかげで、カスタム計算機フォームの作成は迅速かつ簡単です。
ファイルをダウンロードするためにメールアドレスの入力を求めるフォームに、ユーザーが記入するように促す方法を知りたい場合も、可能です。このガイド「ファイルをダウンロードするためにメールアドレスを要求する方法」をご覧ください。
メールの修正準備はできましたか？今日から始めましょう WordPressの最高のSMTPプラグインで。メールを修正する時間がない場合は、追加購入で完全なWhite Glove Setupアシスタンスを利用でき、すべての有料プランで14日間の返金保証が付いています。
この記事がお役に立った場合は、WordPressのヒントやチュートリアルについては、FacebookとTwitterでフォローしてください。
