, , ,

マルチステップフォーム

¥4,900.00

〇〇に長いフォームを複数のページに分割する機能を追加するアドオン

商品コード: ninja-forms-multi-part カテゴリー: , , , タグ:

マルチステップフォームを使用することで、長い入力フォームを複数に分割できます。

フォームが長く、入力する時間がかかるとフォーム離脱率が高まる可能性があります。

複雑なフォームをシンプルにしてくれるプラグインです。

マルチステップフォームの作成

長いフォームを複数のフォームに分割するには、マウスを数回クリックすることで作成できます。

ドラッグ & ドロップで直感的に操作できます。

マルチステップフォームのカスタマイズ

マルチステップフォーム は、ページ間を移動する機能とページナビ機能がついています。

  • 各ページにタイトルを表示できます
  • フォーム上にパンくずリストを表示して、ページ間を移動できます
  • 入力フォームの進行状況バーを追加できます
  • ドラッグ & ドロップでページ全体を並べ替えることができます
  • 「前へ」「次へ」のボタンをカスタマイズできます

必要な時に必要なページを表示

マルチステップフォーム を活用することで、ユーザーがフォームで入力した内容に合わせて

ページを表示、または非表示にできます。

マルチステップフォームの使い方

 

マルチステップフォームの作成

マルチステップフォームを使って、以下のようなイベントの参加フォームを作成してみましょう。
フォームの作り方は、Ninja Formsの使い方をご確認ください。

  1. サイドメニュー > [Ninja Forms] >  [新規追加]  > をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞新規追加
    フォームの選択画面が表示されます。
  2. 空白のフォームをクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム
  3. イベントの参加フォームの初めに表示される項目をフォームに追加します。
    ※ここでは、[姓]、[名]、[メール] の項目を追加します。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加（修正）
    フィールドを追加すると、（薄いグレーの＋記号）が表示されます。
    ※ポインターをにかざすとボタンの色がNinja-Forms_プラスボタンに変わります。
  4. ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞＋ボタン（グレー）
  5. Ninja-Forms_プラスボタンボタン をクリックして、次のページに表示される項目を追加します。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞＋ボタン（修正）ステップが追加されると、ステップごとに画面下にタブが作成されます。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞パートの追加
  6.  パート名を変更するには、 パートをクリックします。
    編集画面が表示されます。
  7. パート名を入力します。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞パート名変更
    ※パートを削除する場合は [REMOVE PART] をクリックします。
  8. 編集画面右上の [完了] をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞編集画面＞完了ボタン
  9.  作成したパートに項目を追加します。
    [フォーム項目を追加] 画面内の 「ここを選択して項目を追加してください＜要日本語化＞」 （青地）をクリックするか、画面右下のNinja-Forms_プラスボタンボタンをクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞パート追加＞項目追加ボタン
    項目選択画面が表示されます。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加２
  10. 引き続き、作成したいステップの数だけ、手順3〜8を繰り返します。
  11. 作成したパート間を移動するには、薄いグレーの「＜」・「＞」アイコンまたはフォーム下部の [パート] をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞パート間移動
  12. 項目を移動するには、移動させたい項目を「＜」・「＞」アイコンまたはフォーム下部のタブにドラッグ＆ドロップします。
    例えば１ページ目の [メール] を２ページ目に移動するには、[メール] の項目を 「＞」マークまたは、[２ページ] のパートへドラッグ＆ドロップします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞パート間項目移動『＞』
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞パート間項目移動-パートへドロップ
  13. パートの順序を変更するには、パートをドラッグ＆ドロップして並び替えます。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞項目追加＞パートの並び替え
  14. プレビューボタンをクリックして作成したフォームを確認します。
    ninja-forms-multi-part_サイド＞Ninja Forms＞フォームのプレビュー
    以下のように表示されます。
    ninja-forms-multi-part_サイド＞Ninja Forms＞フォームのプレビュー＞表示画面
  15. 問題がなければ、[公開] をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞フォーム公開ボタン

 

以上でマルチパートの設定は完了です。

 

高度な設定

フロントエンドで表示される [前]・ [次] ボタンの名前を変更します。（下図）
ninja-forms-multi-part_サイド＞Ninja Forms＞フロントエンドで表示されるページ送りボタンの画像

  1. フォーム上部の [高度な設定] をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞フォーム＞高度な設定
  2. [マルチパート] をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞フォーム＞高度な設定＞マルチパート
  3. 表示したいボタンのラベル名を入力します。
    ninja-forms-multi-part_サイド＞Ninja Forms＞フォーム＞高度な設定＞マルチパート＞詳細設定
  4. 編集画面右上の [完了] をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞空白のフォーム＞編集画面＞完了ボタン
  5. 問題がなければ、[公開] をクリックします。
    ninja-forms-multi-part_サイド＞Ninja Forms＞フォーム公開ボタン

ページ送りボタン名の変更は以上の手順で行います。

 

入力する時間がかかるフォームは、最後まで入力されずに訪問者がサイトから離れてしまうことも多いため、
それを防ぐためにもこのプラグインでフォームをシンプルにして、フォームの離脱率を減らしましょう。

 

 

レビュー

レビューはまだありません。

“マルチステップフォーム” の口コミを投稿します

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です