初心者：WordPressでマルチステップフォームを作成する方法（プラグインを使用）

見栄えが良く、うまく変換できる、すっきりとした複数ページのフォームをWordPressで作成したいですか？

フォームを複数のページに分割することで、エンゲージメントを高め、ユーザーエクスペリエンスを向上させると同時に、フォームの疲労と戦い、フォームの変換を増やすことができます。

この記事では、WordPressでマルチステップフォームを作成する方法を紹介します。

先に進みたい場合の手順の目次は次のとおりです。

• [ビデオ] WordPressでマルチステップフォームを作成する方法
• WordPressでフォームを作成する
• フォームをさまざまな部分に分割する
• プログレスバーをカスタマイズする
• フォーム設定を構成する
• フォームの通知を構成する
• フォームの確認をカスタマイズする
• あなたのウェブサイトにあなたのフォームを追加してください

なぜあなたのウェブサイトでマルチステップフォームを使用するのですか？

まず、マルチステップフォームとは何ですか？ フォームを複数のページまたはステップに分割するだけなので、1つの長いフォームではありません。

また、WordPressフォームにステップを追加しても、WordPress Webサイトでマルチステップ（マルチパートまたはマルチページとも呼ばれます）フォームを使用すると、特にフォームに3つ以上ある場合、実際にサイトのフォーム変換率を上げることができます。フォームフィールド。

実際、WordPressのシングルステップのランディングページフォームを複数のステップに分割した後、WhatIsMyComfortZone.comは、フォームが多くのステップに分割された場合でも、サイト訪問者の53％がコンバージョンを達成し、リードになったのを実際に確認しました。

また、各フォームで同じ質問をしたので、それ以降、すべての長いフォームがWebサイトでマルチステップフォームに変わることは理にかなっています。

WordPressでマルチステップフォームを作成することを検討する理由は次のとおりです。

• 焦点を絞る：フォームの質問をグループ化することで、ユーザーが焦点を当てている領域に情報を分類できます。
• フォームの放棄を減らす：ユーザーは、1つの長いフォームとして表示されるのではなく、ページに分割されたときに、要求している情報を完成させる可能性が高くなります。
• 必要なものだけを収集する：条件付きロジックを使用して、条件付きフィールドを持つWordPressマルチステップフォームを作成できます。 ユーザーが提供する回答に基づいて、フォームのさまざまなページを表示します。

それでは、WordPressでマルチステップフォームを作成する方法を見てみましょう。

WordPressでマルチステップフォームを作成する方法

Elementorマルチステップフォームをお探しの場合は、このチュートリアルを読んで、ElementorフォームをWPFormsに追加する方法を確認してください。

プラグインを使用してマルチステップフォームを作成する方法を自問している場合は、上記のビデオを確認してください。 書面による指示が必要な場合は、以下を読み続けてください。

また、最高の無料の連絡フォームプラグインをお探しの場合は、WPFormsLiteとContactForm7を比較した投稿を確認してください。

ステップ1：WordPressでフォームを作成する

最初に行う必要があるのは、WPFormsプラグインをインストールしてアクティブ化することです。 このフォームビルダーを設定する方法の詳細については、WordPressにプラグインをインストールする方法に関するこのステップバイステップガイドを参照してください。

次に、 WPForms»Add Newに移動して、新しいフォームを作成します。

WPFormsを使用して、任意のフォームを複数の部分またはステップに分割できます。 したがって、この例では、簡単な連絡フォームを作成します。

セットアップ画面で、作成するフォームのタイプに応じて、フォームに名前を付け、使用するテンプレートを選択します。 Simple ContactFormテンプレートを選択します。

WPFormsは、ドラッグアンドドロップビルダーで簡単な連絡先フォームを作成します。

このフォームビルダー領域から、左側のパネルから右側のパネルにフィールドをドラッグして、連絡先フォームにフィールドを追加できます。

単純な連絡フォームテンプレートを使用すると、[名前] 、[電子メール] 、および[コメント]または[メッセージ]フォームフィールドが既にあります。

フォームフィールドのいずれかをクリックして変更を加えます。 フォームフィールドをクリックしてドラッグし、お問い合わせフォームの順序を並べ替えることもできます。

単純な連絡フォームよりも複雑なものを作成したい場合は、WPFormsに付属する事前に設計されたテンプレートを使用した他のチュートリアルをいくつか見てください。

• 見積もりフォームをリクエストする
• ジョブアプリケーションフォーム
• 注文書
• アンケート用紙
• 投票フォーム
• ユーザー登録フォーム

これらのフォームは、単純な連絡フォームよりもはるかに長くなる傾向があり、多くの情報を要求する場合は、完了するために複数の手順が必要になる可能性があります。

次に、フォームを複数の部分に分割する方法を見てみましょう。

ステップ2：フォームをさまざまな部分に分割する

フォームのすべてのフォームフィールドを追加してカスタマイズしたら、ページ分割フォームフィールドをサイトに追加して、別のページに分割する必要があります。

これを行うには、[ファンシーフィールド]の下にある[ページ分割]フォームフィールドを左側のパネルから右側のパネルにドラッグします。

フォームを分割する場所にフィールドを配置します。

フォームを別のページに分割したい場所ならどこでもこれを実行します。 そこから、フォームフィールドを追加してフォームを完成させることができます。

WPFormsを使用すると、必要な数のフォームページを作成できますが、ユーザーを圧倒しないように注意してください。 必要な情報のみを収集してください。 後でいつでもより多くの情報を収集できます。

ステップ3：マルチページフォームのプログレスバーをカスタマイズする

ニーズに基づいて、進行状況インジケーターを表示して、フォームのさまざまなセクションについてユーザーに知らせることができます。 このようにして、進行状況バーに基づいて[送信]をクリックする前に、フォームのどこにいて、どれだけ入力する必要があるかを常に把握できます。

作業を非常に簡単にするために、WPFormsには、マルチステップフォーム用の3つの異なるブレッドクラムスタイルのインジケーターバーが付属しています。

1. コネクタ：マルチステップフォームの各部分の接続バーとページタイトルを表示します。
2. サークル：マルチステップフォームのページごとに1つのサークルとページタイトルを表示します。
3. プログレスバー：ユーザーがフォームに入力したときのフォームの進行状況を示します。

プログレスバーとあなたのマルチステップフォームの最初のページのページタイトルをカスタマイズするには、最初のページブレークセクションをクリックしてください。

フォームエディタに新しいパネルが表示され、使用するプログレスバーを選択できます。 ここでも進行状況インジケーターの色を変更できます。

サークルまたはコネクタオプションを選択した場合、ユーザーがフォームのどの部分を表示しているかがわかるように、ページタイトルを変更することもできます。 それ以外の場合、ユーザーには、マルチステップフォームに残っているステップ数をガイドする標準のプログレスバーが表示されます。

次のページタイトルと、サイト訪問者をフォームの次のページに移動するボタンをカスタマイズするには、フォームにページ分割を追加したときに作成した[ページ分割]セクションをクリックします。

サイト訪問者に[前のページ]ボタンを表示できる機能をオンに切り替えることもできます。 このようにして、必要に応じてフォームの前のページに戻ることができます。

これを行うと、ボタンのコピーも変更する機会があります。

すべてのページ分割の作成と進行状況インジケーターのカスタマイズが完了したら、[保存]をクリックします。

ステップ4：フォーム設定を構成する

開始するには、 [設定] » [一般]に移動します。

ここで、以下を構成できます。

• フォーム名—必要に応じて、ここでフォームの名前を変更します。
• フォームの説明—フォームに説明を付けます。
• 送信ボタンのテキスト—送信ボタンのコピーをカスタマイズします。
• スパム防止—スパム対策機能、hCaptcha、またはGooglereCAPTCHAを使用して連絡先フォームのスパムを停止します。 スパム対策チェックボックスは、すべての新しいフォームで自動的に有効になります。
• AJAXフォーム—ページをリロードせずにAJAX設定を有効にして、WordPressでAJAXマルチステップフォームを使用できるようにします。
• GDPRの機能強化— GDPR要件に準拠するために、エントリ情報とIPアドレスやユーザーエージェントなどのユーザーの詳細の保存を無効にすることができます。 GDPR契約フィールドを簡単な連絡フォームに追加する方法の詳細な手順を確認してください。

完了したら、[保存]をクリックします。

ステップ5：フォームの通知を構成する

通知は、Webサイトでフォームが送信されるたびに電子メールを送信するための優れた方法です。

実際、この機能を無効にしない限り、誰かがサイトでマルチステップフォームを送信すると、送信に関する通知が届きます。

スマートタグを使用している場合は、ユーザーがフォームを送信したときにユーザーのメールアドレスに通知を送信して、フォームを受信したことをユーザーに通知し、まもなく連絡することもできます。 これにより、サイト訪問者のフォームが適切に処理されていることが保証されます。

また、記入に時間がかかった可能性のある複数ページのフォームについても評価されます。 サイト訪問者が最後に疑問に思うのは、記入したばかりの長いフォームが通過したかどうかです。

この手順のヘルプについては、WordPressでフォーム通知を設定する方法に関するドキュメントを確認してください。

これに加えて、メール全体でブランドの一貫性を維持したい場合は、メールテンプレートへのカスタムヘッダーの追加に関するこのガイドを確認してください。

ステップ6：フォームの確認をカスタマイズする

フォームの確認は、サイトの訪問者がWebサイトでフォームを送信すると表示されるメッセージです。 フォームが処理されたことを人々に知らせ、次のステップが何であるかを知らせる機会を提供します。

繰り返しますが、これは特にWebサイトの長いフォームの場合に役立ちます。

WPFormsには、次の3つの確認タイプから選択できます。

1. メッセージ。 これは、WPFormsのデフォルトの確認タイプです。 サイト訪問者がフォームを送信すると、フォームが処理されたことを知らせる簡単なメッセージ確認が表示されます。 顧客の幸せを高めるのに役立ついくつかの素晴らしい成功メッセージをここで探してください。
2. ページを表示します。 この確認タイプは、サイト訪問者をサイトの特定のWebページに誘導し、フォームの送信に感謝します。 これを行うためのヘルプについては、顧客をありがとうページにリダイレクトするチュートリアルを確認してください。 さらに、顧客の忠誠心を高めるための効果的なありがとうページの作成に関する記事を必ず確認してください。
3. URL（リダイレクト）に移動します。 このオプションは、サイト訪問者を別のWebサイトに送信する場合に使用されます。

WPFormsで簡単なフォーム確認を設定して、サイトの訪問者がサイトでフォームを送信したときに表示されるメッセージをカスタマイズできるようにする方法を見てみましょう。

開始するには、フォームエディタの[設定]の下にある[確認]タブをクリックします。

次に、作成する確認タイプのタイプを選択します。 この例では、メッセージを選択します。

次に、確認メッセージを好みに合わせてカスタマイズし、[保存]をクリックします。

他の確認タイプのヘルプについては、フォーム確認の設定に関するドキュメントを参照してください。

これで、お問い合わせフォームをWebサイトに追加する準備が整いました。

ステップ7：フォームをWebサイトに追加する

マルチステップフォームを作成したら、WordPressWebサイトに追加する必要があります。

WPFormsを使用すると、ページ、ブログ投稿、サイドバーウィジェットなど、Webサイトの複数の場所にフォームを追加できます。

最も一般的な配置オプションであるページ/投稿の埋め込みを見てみましょう。

まず、WordPressで新しいページまたは投稿を作成するか、既存のページの更新設定に移動します。 その後、最初のブロック（ページタイトルの下の空白の領域）の内側をクリックし、[WPFormsの追加]アイコンをクリックします。

WPFormsウィジェットがブロック内に表示されます。 [WPForms]ドロップダウンをクリックして、作成済みのフォームのうち、ページに挿入するものを選択します。 作成したフォームを選択します。

次に、投稿またはページを公開して、お問い合わせフォームがWebサイトに表示されるようにします。

次に、右上にある[公開]または[更新]と書かれた青いボタンをクリックすると、フォームがWebサイトに表示されます。

結論は

そして、あなたはそれを持っています！ これで、WordPressでマルチステップフォームを作成する方法がわかり、ユーザーエクスペリエンスとコンバージョン率の向上をすぐに開始できます。

複数ページのフォームのインスピレーションを探している場合は、このマルチステップフォームの例のまとめを確認してください。

何を求めている？ 今日からWordPressに最適なマルチステップフォームビルダーを始めましょう。

また、この記事が気に入った場合は、FacebookとTwitterでフォローしてください。