始めましょう #

Metform を使用すると、非常に簡単に長いフォームを作成できます。ウィジェットを使用して、WordPress マルチステップ フォームを簡単に作成できます。

Elementor マルチステップ フォームを追加するには、ビデオ ガイドをご覧ください。

または、以下の手順に従って、WordPress マルチステップ フォームを追加します。

ステップ -> 1  #

を検索してください メットフォーム ウィジェットを選択し、ウィジェット配置領域にドラッグします。

ステップ -> 2  #

クリックしてください  フォームの編集 左側のボタンをクリックすると、フォームを作成するためのウィンドウが開きます。

ステップ→3 #

選ぶ 新しい 新しいフォームを作成します。 タイトル空白のテンプレートを選択してクリックします。 フォームの編集

ステップ→4  #

新しいセクションを追加するには、「プラス」記号ボタンをクリックします。

ステップ -> 5  #

ウィジェットを使ってフォームを構築しましょう

ステップ→6  #

ドラッグアンドドロップ 次のステップ ボタンウィジェット。

ステップ -> 7  #

セクションに名前を付けるには、6つのドットをクリックしてセクションの設定に移動します。次に、 レイアウト ⇒ 多段。ここ マルチステップタブのタイトルを変更し、アイコンを追加する 必要に応じて、ライブラリからアイコンを追加したり、新しいアイコンをアップロードしたりできます。

ステップ -> 8 #

フォームに新しいステップ/フェーズを追加するには、+ 記号をクリックして新しいセクションを作成します。 

注: フォームの新しいタブ/ステップでは、新しいセクション (内部セクションではない) を開始する必要があることに注意してください。

ステップ -> 9 #

ウィジェットを再度ドラッグアンドドロップして2番目のステップを構築します。その後 前へと次へのボタンを追加する。それから ステップ7に従う このセクション/タブに適切な名前とアイコンを付ける

ステップ -> 10  #

フォームの別のステップを作成するには、手順7、8、9を繰り返します。ただし、今回は次のものを追加します。 次への代わりに送信ボタン Elementor の複数ステップのフォームを完了します。

ステップ→11 #

最後に、「更新して閉じる」をクリックして、マルチステップ フォームのデザインを保存し、設定に戻ります。

ステップ-> 12 #

次に、マルチステップ機能をオンにします。これを行うには、「コンテンツに移動」⇒「マルチステップ設定」に移動し、次の設定を編集します。

• マルチステップを有効にする: マルチステップ オプションを有効にするには、このオプションをオンにします。 
• アダプティブフォームコンテナの高さ: このオプションを使用すると、フォームは現在のステップの高さを取得できるようになります。
• マルチステップナビゲーションを表示:  上部にナビゲーション オプションを表示したくない場合は、このオプションを無効にすることができます。
• 上部へのスクロールを有効にする: このオプションをオンにすると、一番上までスクロールするオプションが表示されます。
• 配置:  ここで、マルチステップナビゲーションの配置を左、右、または中央に設定できます。
• タイポグラフィ： マルチステップのファミリ、太さ、変換、行の高さなどを変更できます。
• パディング:  マルチステップ フォームの左、右、上、下の余白を設定します。
• マージン： マルチステップ フォームの左、右、上、下の余白を調整します。
• 文章
  • 普通： ここでは、色、背景色、境界線の種類、アイコンのサイズ、アイコンの間隔、および通常モードのアイコンのサイズを編集できます。
  • アクティブ： アクティブ モードの色、背景色、境界線の種類、アイコン サイズ、アイコンの間隔、アイコン サイズを選択します。
  • ホバー: ホバー モードの色、背景色、境界線の種類、アイコン サイズ、アイコン間隔、アイコン サイズを編集します。

ステップ -> 13 #

最後に、「更新」をクリックして保存します。

以下は、Metfrom によって作成されたマルチステップ フォームの例です。