始めましょう #
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 によって作成されたマルチステップ フォームの例です。