5つの簡単なステップでWordPressにマルチステップフォームを追加する方法

シングルステップのWordPressフォームをマルチステップのフォームWordPressに変換すると、変換がほぼ60％増加することをご存知ですか？ 実際、場合によっては、コンバージョン率が300％に達することもあります。

はい。 今日、人々は忙しすぎて注意力が短いからです。 その上、ワンステップの長いフォームに記入するように依頼すると、フォームが不完全なまま、Webサイトを離れる可能性が高くなります。

ただし、WordPressサイトのマルチステップフォームを使用して、このシナリオを変更できます。 しかし、問題はどのようにですか？

そういうわけで、WordPressでマルチステップフォームを追加する方法のステップバイステップガイドを紹介するためにここにいます。

読み続けて、WordPressWebサイトでわずか数分でマルチステップフォームを簡単に作成する方法を見つけてください…。

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

名前が示すように、質問/入力フィールドがすべてを1つのステップにまとめるのではなく、複数のステップに分割された複数のステップを持つフォームです。 定義を探している場合、HubSpotがマルチステップフォームを定義する方法は次のとおりです。

マルチステップフォームは、複数の部分に分割された長いフォームです。 それらは、長いフォームを威圧的で気が遠くなるようなものにするために使用されます。

–ハブスポット

マルチステップフォームは、基本的に、入力フィールドが多すぎるロングフォームの代わりになります。 フォームが比較的小さい場合は、ワンステップフォームに固執することができます。

マルチステップフォームとは何かがわかったところで、WordPressサイトにマルチステップフォームを追加することを検討する必要がある理由のいくつかを見てみましょう。

WordPressでマルチステップフォームを使用する理由

簡単な答えは、コンバージョン率を急上昇させることです。 マルチステップフォームは、登録フォーム、予約フォーム、食品注文フォームなどの用途を持つWebサイトで非常に人気があります。Webサイトでマルチステップフォームの使用を検討する必要がある理由には、次のようなものがあります。

• マルチステップフォームは、ユーザーの注意を引く場合に効果的です。 その結果、人々はより多くの関与をし、フォームの提出をより頻繁に完了します。
• ユーザーは、マルチステップの方がユーザーフレンドリーであり、長いワンステップフォームよりも使いやすさが向上していると感じています。
• マルチステップフォームを備えたナビゲーションバー/プログレスバーがあるため、ユーザーはマルチステップフォームに記入することをより奨励されていると感じます。
• 条件付きマルチステップフォームは、必要な関連データのみを収集するのに最適です。
• 上記のすべての良い面の結果として、マルチステップフォームはコンバージョン率を高めます。

WordPressサイトでマルチステップフォームを使用する必要があることがわかったので、マルチパートフォームを作成するために必要な完璧なセットアップを作成します。

WordPressマルチステップフォームを作成する必要があるセットアップ

WordPressに加えて、WordPressでマルチステップフォームを簡単に作成するには、さらに2つのプラグインが必要になります。 それらのWordPressプラグインは次のとおりです。

1. Elementor （無料版）
2. MetForm （無料およびプロ）

Elementorは最高のWordPressページビルダーであり、MetFormは最も急速に成長しているWordPressマルチステップフォームプラグインの1つです。 MetFormのインストールについてサポートが必要な場合は、MetFormのインストール方法に関するドキュメントをご覧ください。

インストールが完了したら、Metformを使用する前に、Elementorページビルダーを使用してページを作成する必要があります。 そのためには、ダッシュボード⇒ページ⇒新規追加に移動します。

次に、適切なタイトルを指定し、テンプレートとしてElementor Full Widthを選択し、Publishをクリックします。 その後、 Elementorで編集をクリックします。

最後に、マルチステップフォームを作成する準備が整いました。 それでは、メインプロセスに移りましょう。

注：このチュートリアルでは、マルチステップフォームをページに追加する方法を紹介します。 ただし、MetFormで作成されたフォームをモーダルポップアップに簡単に追加することもできます。

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

このブログでは、5つの簡単なステップで、モダンな外観のマルチステップフォームを最初から作成する方法を学びます。

ステップ1：MetFormをドラッグアンドドロップする

Elementorモードで編集したら、MetFormを検索し、フォームを表示する場所にドラッグアンドドロップします。

ステップ2：新しいフォームを作成する

フォームセクションをクリックして、[ MetFormの編集]オプションに移動します。 [フォームの編集]ボタンをクリックします。

新しいウィンドウがポップアップしたら

• [新規]（新しいフォームを作成）を選択します
• フォームのフォーム名を入力します
• 空のテンプレートを選択し、
• 編集フォームをクリックします

ステップ3：MetFormとElementor Page Builderを使用して、マルチステップフォームを最初から作成する

[フォームの編集]をクリックすると、Elementorページビルダーを使用して別の新しいウィンドウにアクセスし、フォームを最初から作成できます。 マルチステップフォームの1つのステップを作成するには、次の4つのステップに従う必要があります。

新しいセクションを追加する

要件に応じて入力フィールドをドラッグアンドドロップします

フォームのフレーズに応じて、[前へ]、[次へ]、[送信]ボタンをドラッグアンドドロップします

セクションに適切な名前を付けてください

このブログでは、上記の手順を使用して、3ステップのホテル予約マルチステップフォームのデモを作成します。 フォームの3つのステップには、個人情報、予約情報、および追加情報が含まれます

予約フォームステップ1–個人情報：

• [個人情報]セクションで、 Elementor +アイコンをクリックし、 2つの等しい列を持つ構造を選択します。

• テキスト入力フィールドを検索し、左側の列のフォームフィールドをドラッグアンドドロップします。

• この入力フィールドの属性を編集するには、編集記号をクリックし、[コンテンツ]⇒[コンテンツ]に移動して、次のオプションを編集します。
  • ラベルの表示：このオプションをオンにすると、入力フィールドのラベルが表示されます。
  • 位置：ラベルを上または左に配置することを選択できます。
  • ラベル：ラベルに名前を付けます。 「名」を使用します。
  • 名前：名前フィールドは必須であり、一意である必要があります。 したがって、各フィールドに異なる名前を付け、スペースをアンダースコア/ハイフンに置き換えてください。
  • プレースホルダー：プレースホルダーテキストを入力します。
  • ヘルプテキスト：ユーザーにヘルプテキストを提供したい場合は、ここで行うことができます。

• 次に、 [コンテンツ]⇒[設定]に移動して、次のオプションを変更します。
  • 必須：このフォームフィールドを必須にするには、このオプションをオンにします。
  • 検証タイプ：文字の長さ、単語の長さ、および表現に基づいて、テキストフィールドにさまざまなタイプの検証を設定できます。
  • 警告メッセージ：ここでは、要件が満たされていない場合に表示される警告メッセージを設定できます。

注：このフォームの2番目のステップで条件付きロジック機能を使用します。

名と同じように、名前に別のテキスト入力フィールドを追加します。 個人情報のステップの一部として、ここでさらに2つのフィールドを追加します。 メールアドレスと携帯電話番号。

[電子メールと携帯電話番号]フィールドの設定の変更が完了したら。 [次のステップ]ボタンを検索してドラッグアンドドロップします。 ラベル、ボタンの配置、アイコン、アイコンの位置など、さまざまなボタン設定を変更できます。

• これで、最初のステップのセクションの準備が整い、最初のステップに適切な名前を付けることができます
  • 6つのドットのアイコンをクリックして設定オプションを開き、レイアウト⇒マルチステップに移動します。
  • [マルチステップタブタイトル]オプションに名前を入力します
  • ライブラリからアイコンを選択するか、SVGをアップロードします。
  • 更新をクリックして保存します。

最初のセクションの準備ができたので、2番目のステップを作成しましょう。

予約フォームステップ2–予約情報：

• 2番目のステップでは、新しいセクションを選択する必要があります。 1つの列を持つ新しいセクションを選択してから、2つの等しい列を持つ新しい内部セクションを追加します。
• 列を選択した後、チェックインおよびチェックアウトオプションの2日付入力フィールドをドラッグアンドドロップします。

従う必要のあるルール：新しいステップを開始するには、新しいセクションを選択する必要があります。そうしないと、追加した入力フィールドが前のステップに追加されます。 したがって、同じレイアウトであっても、新しいステップには新しいセクションが必要であることを常に忘れないでください。

• 上記のテキストフィールドの設定オプションに加えて、 [コンテンツ]⇒[設定]の[日付]入力フィールドに次の設定が表示されます。
  • 現在の日付を最小の日付として設定する：このオプションをオンにすると、現在の日付が最小の日付として設定されます。
  • 最小日付を手動で設定する：現在の日付を最小日付として設定したくない場合は、最小日付を手動で設定することもできます。
  • 最大日付を手動で設定する：ここで最大日付を設定できます。
  • 日付リストを無効にする：このオプションを使用して、一部の日付を無効にすることができます。 日付を無効にするには、[+アイテムの追加]ボタンをクリックして日付を選択します。
  • 日付の範囲の入力：このオプションをオンにすると、ユーザーが日付の範囲を選択できるようになります。 ただし、このフォームでは、このオプションをオフのままにします。
  • 年の入力：このオプションをオンにすると、日付の入力の一部として1年を取得します。
  • 月の入力：日付の入力の一部として月を有効にするには、このオプションをオンにします。
  • 日付入力：このオプションをオンにすると、日付入力の一部として日付（日）を取得します
  • 日付形式：ここに入力する日付の形式を設定します。
  • ローカリゼーション：好みに基づいて、ドロップダウンから場所を選択します。
  • 時間を入力したい：このオプションをオンにすると、データと一緒に時間を入力として使用できます。 このオプションをオンにすると、24時間有効にするという別のオプションが表示されます。 このオプションを使用すると、24時間形式を有効にできます。

最後に、[チェックアウト]フィールドに条件付きフォーム機能を使用します。 チェックインフィールドが空の場合にのみチェックアウトフィールドを表示するには、

• チェックイン入力フィールドの名前フィールドの値をコピーします。
• 次に、[コンテンツ]⇒[条件付き]に移動し、有効化オプションをオンにします
• [条件一致基準]ドロップダウンから[ AND]を選択します。
• [アクション]ドロップダウンオプションから、[このフィールドを表示]を選択します。
• [ +アイテムを追加]をクリックし、if入力フィールドに、コピーしたチェックインフィールド名の値を貼り付けます。
• 一致（比較）のドロップダウンから「空ではない」を選択します。

次に、プレビューボタンをクリックして表示します。 チェックアウトフィールドは、チェックイン日を選択した場合にのみ表示されます。

条件付きオプションが最初にチェックアウトを非表示にしたときにフォームが悪く見えないように、新しい内部セクションを追加します。 [番号]フォームフィールドを2回ドラッグアンドドロップして、部屋の数と人数のフィールドをさらに2つ作成します。

また、これは中間ステップなので、[前へ]ボタンと[次へ]ボタンの両方を含める必要があります。

このセクションに追加されたすべてのフィールドの設定の編集が完了したら、最初のセクションで行ったのと同じように、セクション/ステップ名をレイアウト⇒マルチステップから変更します。 私はそれを予約情報と名付けています。

これで2番目のステップの準備ができました。3番目のステップに進みましょう

予約フォームステップ3–追加情報

3番目のステップでは、単一の列を持つ新しいセクションを追加しましょう。 そして、テキストフィールドを追加し、追加情報という名前を付けます。

次に、セクション内に2列の内部セクションを追加します。 その後、前のボタンをドラッグアンドドロップしてから、フォーム送信用の送信ボタンをドラッグアンドドロップします。

注：必要な数の内部セクションを追加できます。 ただし、新しいステップを作成するには、新しいセクションを追加する必要があります。

3番目のセクションに名前を付けるには、レイアウト⇒マルチステップに移動し、「追加情報」というタイトルを追加してアイコンを追加します。

最後に、3つのステップでWordPressマルチステップフォームの作成が完了しました。 次に、[更新]をクリックして保存し、ウィンドウを閉じてマルチステップ設定に進みます。

ステップ4：MetFormのマルチステップフォームオプションを有効にする

フォームができたので、次はそれを機能するマルチステップフォームに変換します。 そうするために

• コンテンツ⇒マルチステップ設定に移動
• マルチステップオプションを有効にすると、マルチステップオプションがアクティブになります
• [マルチステップナビゲーションの表示]を有効にして、[セクション]メニューが一番上に表示されるようにします。 アダプティブフォームコンテナの高さ、一番上へのスクロールを有効にするなど、さまざまな設定を編集することもできます。
• すべての変更を行ったら、[更新]をクリックして保存します

ステップ5：完了するための確認、通知、およびその他の設定を構成する

これで、マルチステップフォームが設​​計されました。 MetFormが提供するすべてのフォーム設定を構成しましょう。 WordPressダッシュボードからMetForm設定を変更するには、MetForm⇒フォーム⇒作成したフォームの編集オプションをクリックします。

注：ここには、作成したフォームのショートコードもあります。これをコピーして貼り付けるだけで、Webサイトの任意の場所にフォームを追加できます。 [フォームの編集]オプションからもフォーム設定にアクセスできます。

ここに次の設定があります。

全般的：

一般設定の一部として、タイトル、成功メッセージ、必要なログイン、カウントビューなどを変更できます。また、フォームの送信後にユーザーがアクセスできるカスタムURLを設定することもできます。

確認：

このフォームビルダープラグインを使用して、送信されたフォームのコピーを使用して確認メールをユーザーに送信できます。 確認オプションをオンにすると、[件名]、[差出人]、[メールから]、[返信先]、[ありがとうございます]メッセージを設定できます。

通知設定：

MetFormを使用して、フォーム通知メールを管理者に送信することもできます。 管理者への通知メールオプションを有効にします。 次に、 Eメールの件名、Eメールの宛先、Eメールの差出人、管理者メモなどを設定します。

すべての編集を行ったら、下にスクロールして[変更を保存]をクリックして設定を更新します。

設定とは別に、このブログで取り上げましたが、REST API、Mail Chimp、Google Sheetなどの統合もあります。また、 PayPal、Stripeなどの支払いゲートウェイの統合もあります。 HubSpot、Zohoなどを含むCRM統合。ログインや登録などの認証オプションも利用できます。 これらの設定の詳細については、MetFormのドキュメントをご覧ください。

上記の手順を正しく実行した場合は、次のような複数の手順の予約フォームを入手する必要があります。

要約

ここで、WordPressマルチステップフォームを数分で作成しました。 このフォームが単純だと思うなら、心配しないでください。 このブログの主な目的は、MetFormを使用してWordPressでマルチステップフォームを作成する方法を示すことでした。

WordPressのマルチステップフォームを作成する方法がわかったので、カスタムフォームとロジックを作成できます。 MetFormの機能を利用して、すばらしいマルチステップフォームを作成してください。 途中で問題が発生した場合は、私たちと共有してください。私たちのチームができるだけ早く返信します。

MetFormが提供するすべての素晴らしい機能を確認することを忘れないでください。