ウェブサイト訪問者がマルチステップフォームでコンタクトしてくるのを、よりポジティブな体験にする方法をお探しですか？
フォームをさまざまなセクションに分割することで、フォーム疲れを防ぎ、ウェブサイトでのユーザーエンゲージメントとリードジェネレーションを高めることができます。
このガイドでは、2つの異なる方法でWPFormsを使ってWordPressにマルチステップフォームを設定する基本を説明します。
WordPressでマルチステップフォームを作成する方法
WPFormsを使ってWordPressでマルチステップフォームを作成するのは驚くほど簡単です。以下の手順に従ってください：
この記事で
ステップ 1: マルチステップフォームビルダープラグインをインストールする
マルチステップフォーム、電卓、その他のタイプのフォームを作成できるフォームビルダープラグインをお探しなら、WPFormsをおいて他にありません。カスタマイズされたフォームを信じられないほど簡単に作成できる数多くの機能を提供しています。
このチュートリアルでは WPForms Pro にサインアップすることをお勧めします。WPForms Pro には改ページ、リードフォームアドオン、条件ロジック、カスタマイズ可能なテンプレートなど多くの機能があり、マルチステップフォームをとても簡単に作成することができます。
WPForms Proのライセンスを取得したら、あとはあなたのウェブサイトにプラグインを有効化してインストールするだけです。この方法のステップバイステップの手順については、WordPressプラグインのインストールに関するガイドをチェックしてください。
ステップ 2: フォームを作成し、関連するフィールドを追加する
それでは、WordPressでマルチステップフォームを作成してみましょう。ダッシュボードからWPFormsに移動し、新規追加ボタンをクリックするだけです。
次のページでフォームの名前を決めます。このチュートリアルでは "WordPress マルチステップ フォーム" と呼ぶことにします。
その後、[白紙のフォームを作成] ボタンをクリックしてフォームをゼロから作り始めるか、既存のテンプレートにフィールドを追加するかを選択できます。
時間を節約してフォームに関連フィールドを追加するために、シンプルなコンタクトフォームを選択し、テンプレートを使用ボタンをクリックします。
テンプレートを使うボタンをクリックすると、フォームビルダーにリダイレクトされます。左側に利用可能なフィールドが表示されます。
一方、画面の右側には、フォームの編集可能なプレビューが表示され、お好みに合わせて他のフィールドをドラッグ＆ドロップすることができます。
SimpleContactフォームテンプレートでは、名前、Eメール、コメントやメッセージのフォームフィールドがすでに用意されています。
フォームのフィールドをクリックして、フォームをカスタマイズするために変更したり、新しいフィールドを追加したりすることができます。例えば、以下のようなフィールドを追加しました：
- 会社名 - 一行テキストフィールドを使用。
- 役職名 - ここでも一行テキストフィールドを使用します。
- ウェブサイト - Fancy Fieldsセクションのウェブサイト/URLフィールドを使用します。
- 業界 - チェックボックスフィールドを 使用し、情報技術、製造、小売、ヘルスケアなどの選択肢を追加します。
- 国/地域 - ドロップダウンフィールドを使用し、米国、カナダ、オーストラリア、英国、ニュージーランドなどの選択肢を追加します。
- どのようにして当サイトをお知りになりましたか？- もう一度、ドロップダウンフィールドを使用し、Google、Facebook、LinkedInなどの選択肢を 追加します。
これらのフィールドを追加したのは、フォームテンプレートをさらに強化し、私たちのユースケースに関連したものにするためです。では、フォームを複数の部分に分割する方法を見てみましょう。
ステップ 3: フォームを複数のパーツに分割する
WPFormsではフォームを複数のパートに分割するのがとても簡単です！
フォームを分割するにはページ区切りフィールドを使うか、Lead Forms Addon を使います。両方の手順を説明します！
方法1: フォームを分割するために改ページフィールドを追加する
フォームを複数のパートに分割するには、改ページフィールドを左側のパネルから右側のパネルにドラッグ＆ドロップします。
フォームを分割したい正確な位置に改ページフィールドを挿入する必要があることを覚えておいてください。
フォームを再度分割したい場合は、同じ手順を繰り返します。WPForms では必要な数だけフォームページを作成できます。
2ステップのフォームを作成することもできますし、好きなだけ高度なフォームを作成することもできますが、ユーザーを圧倒したくないので、物事をシンプルに保つことを忘れないでください。
完了したら、フォームの使いやすさを向上させるために、複数ページのプログレスバーをカスタマイズすることができます。
マルチページフォームのプログレスバーをカスタマイズする
プログレスバーを使用することで、フォーム内のさまざまなセクションについてユーザーに知らせることができます。
WPFormsは、マルチステップフォームのための3つの異なるパンくずスタイルのインジケータバーを導入することによって、あなたのために物事を超簡単にします：
- プログレスバー： このオプションにより、ユーザーはフォームに記入しながら進捗状況を確認し、常に情報を得ることができます。
- サークル： このオプションにより、マルチステップフォームは各ページに1つのサークルとページタイトルを表示することができます。
- コネクター このオプションはマルチステップフォームの各セクションのページタイトルとコネクティングバーを表示します。
最初のページ区切りセクションをクリックすると、マルチステップフォームの最初のページのプログレスバーとページタイトルをカスタマイズすることができます。このセクションでは以下のことができます：
- プログレスインジケーターの種類を選択します。
- ページインジケータの色をお好みに合わせて変更してください。
- ユーザーがフォームのどのセクションにいるのかを理解できるように、ページタイトルをカスタマイズします（サークルまたはコネクターを選択した場合）。
次のページのタイトルとボタンのテキストをカスタマイズする
フォームの最初のセクションのページタイトルは変更しましたが、フォームの他のセクションはどうでしょうか？
最初のページと同様に、関連する改ページフィールドをクリックして次のセクションのページタイトルを変更したり、次のラベルをカスタマイズすることもできます。
また、Display Previousオプションをオンにすると、サイト訪問者に前のページボタンを表示したり、Previous Labelを好みに合わせてカスタマイズすることもできます。
こうすることで、必要であれば顧客はフォームの前のページに戻ることができ、フォームの使い勝手がさらに向上します。
方法 2: Lead Forms アドオンを使ってフォームを分割する
Page Break フィールドはフォームをいくつものセクションに分割するのに適していますが、別の方法をお探しなら Lead Forms Addon をお使いください。
さらに、リードを生成することは、WordPress上であなたのスモールビジネスを管理するのに適しています。
Lead Forms Addon のインストールはとても簡単です。WordPress ダッシュボードからWPForms に移動し、アドオンをクリックします。
その後、アドオン検索セクションで「Lead Forms」を探します。その後、アドオンのインストールをクリックし、有効化ボタンをクリックします。
フォームビルダーでリードフォームモードを有効にする
Lead Forms Addon をインストールして有効にしたら、フォームを作成しているフォームビルダーに戻ります。
そこから「設定」タブをクリックし、「リードフォーム」オプションを選択します。あとは「 リードフォームモードを有効にする」をオンにするだけです。
リードフォームアドオンがフォームを再構築することを知らせるポップアップが表示されます。リードフォームを有効にする」ボタンをクリックします。
これであなたのフィールドは自動的にリードフォームに変換されます。フィールド数が多くない限り、通常は数秒で完了します。
フォームが自動的に多数のセクションに分割されます。自由にフィールドを追加、修正、配置することができます。
リードフォームのスタイル設定をカスタマイズする
Lead Forms Addon の優れた点の一つは、フロントエンドでフォームの外観をカスタマイズできることです。
リードフォームの設定ページにはすべてのカスタマイズオプションがあります。以下に利用可能なカスタマイズオプションについて説明します。
- リードフォームのタイトル： リードフォームのタイトルフィールドにタイトルを入力することで、リードフォームにタイトルをつけることができます。ユーザーがフォームに入力すると、そのタイトルがフロントエンドに表示されます。
- アクセントカラー： このオプションでは、ボタン、プログレスバー、アイコンの色をインタラクティブなカラーピッカーツールで変更できます。
- スクロールアニメーション： このオプションを有効にすると、WPFormsはフォームのNextボタンをクリックしたユーザーをページのトップに移動します。
リードフォームは追加設定によってさらにカスタマイズすることができます。これらのオプションにアクセスするには高度なスタイル設定をオンにする必要があります。
フォームコンテナオプションもあり、これを有効にするとリードフォームをコンテナで囲むことができ、ページの他の要素から目立たせることができます。
マルチステップフォームをカスタマイズし、ご希望の機能をすべて盛り込んだら、保存ボタンを忘れずに押してください。
また、新しいリードをキャプチャし、あなたの電子メールリストを成長させるためにマルチステップフォームを使用することができます。WPFormsでリードマグネットページを作成する方法についてはこちらのガイドをご覧ください！
ステップ4：通知と確認のカスタマイズ
通知を設定することで、常に新しいフォームエントリーを確認することができます。フォームビルダーで[設定]、[通知] の順に選択します。
件名などのデフォルトの通知設定を編集したり、必要に応じて受信者の電子メールを変更したりすることができます。
完了したら、設定メニューの確認に移動し、フォーム送信に成功した場合の応答を設定します。
ここで、ウェブサイトに最適な確認タイプ（メッセージ、ページ表示、リダイレクト）を選択し、オプションを設定します。
変更が失われないように、また設定が更新されていることを確認するために、フォームを再度保存することを忘れないでください。
ステップ 5: マルチステップ WordPress フォームを公開する
よくやったWordPress でマルチステップフォームの作成に成功しました。いよいよ本番稼動して、フォームからの投稿を確認しましょう！
手順は驚くほど簡単で、フォームビルダーを離れる必要すらありません。右上の埋め込みボタンをクリックするだけです。
既存のページにフォームを公開するか、新しいページを作成するかを選択できます。
フォームはすでに埋め込まれています。あとは公開ボタンをクリックするだけで、マルチステップの WordPress フォームが公開されます！
Diviのようなページビルダーを使用している場合は、Diviのコンタクトフォームの作り方については、こちらのガイドもご覧ください。
マルチステップ・フォームに関するその他の質問
WordPressのマルチステップフォームは読者の間で人気のあるトピックです。ここではそれらに関するいくつかの質問にお答えします。
マルチステップ・フォームとは何ですか？
マルチステップフォームはフォームを複数のステップまたはページに分割し、長いフォームを管理しやすいセクションに分割することでユーザーエクスペリエンスを向上させます。これはアプリケーション、アンケート、登録のような複雑なフォームに最適です。WPForms は改ページフィールドによりマルチステップフォームの作成を簡単にし、ユーザが簡単にナビゲーションを行えるようにします。
マルチステップ・フォームはウェブサイトを遅くするのか？
いいえ、マルチステップフォームがあなたのウェブサイトを遅くすることはありません。WPForms は特に Lead Forms Addon でこれらのフォームをスピードとパフォーマンスのために最適化し、あなたのウェブサイト全体のスピードに影響を与えることなくフォームを素早く読み込むようにしています。
どのような場合にマルチステップ・フォームを使うべきか？
長いフォームや詳細なフォームがある場合はマルチステップフォームを使いましょう。登録、アンケート、アプリケーションなど、多くの情報を収集する必要がありながら、ランディングページでユーザーを圧倒したくない場合に最適です。WPFormsでは効率的にマルチステップフォームを作成することができ、ユーザーエンゲージメントを向上させることができます。
マルチステップレイアウトでは、どのタイプのフォームがより効果的か？
求人応募、複雑なアンケート、長時間の登録など、詳細な情報を必要とするフォームは、マルチステップレイアウトの方がコンバージョン率が高くなります。WPFormsを使って簡単に作成できるこのフォーマットは、ユーザーを引き付け、長いフォームに圧倒される感覚を減らし、コンバージョン率を高めます。
次は、WordPressで電卓フォームを作る方法です。
WordPressで電卓フォームを作成し、ウェブサイト上のユーザーエンゲージメントを高める方法を学びたいですか？あなたは幸運です！WPFormsとその計算アドオンのおかげで、カスタム電卓フォームの作成は迅速かつ簡単です。
もしあなたが、ファイルをダウンロードするために電子メールアドレスが必要なフォームへの入力をユーザーに促す方法をお探しなら、それも可能です。ファイルのダウンロードにメールアドレスを要求する方法については、こちらのガイドをご覧ください。
メールを修正する準備はできていますか？最高のWordPress SMTPプラグインで今すぐ始めましょう。メールを修正する時間がない場合は、追加購入としてWhite Glove Setupのフルサポートを受けることができます。
この記事がお役に立ちましたら、Facebookや TwitterでWordPressのヒントやチュートリアルをご覧ください。
