まで

80%
貯蓄

で終わります:
Wpmet シンボル
時間

マルチステップフォーム (Pro)

始めましょう #

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

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

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

ステップ -> 1  #

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

MetFormを使用して複数ステップのフォームを追加する

ステップ -> 2  #

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

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

ステップ→3 #

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

MetFormで新しいフォームを作成する

ステップ→4  #

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

MetForm で WordPress マルチステップ フォームを作成するためのレイアウトを選択する

ステップ -> 5  #

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

フィールドをドラッグアンドドロップして、複数のステップを作成します

ステップ→6  #

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

MetForm を使用したドラッグ アンド ドロップのマルチステップ フォーム ウィジェット

ステップ -> 7  #

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

MetFormによる多段階フォームのレイアウト調整

ステップ -> 8 #

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

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

マルチステップフォームに新しいステップを追加する

ステップ -> 9 #

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

マルチステップフォームのレイアウトを変更する

ステップ -> 10  #

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

WordPress にマルチステップフォームを追加する方法

ステップ→11 #

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

WordPressのマルチステップフォームのデザインを更新する

ステップ-> 12 #

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

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

ステップ -> 13 #

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

MetFormでマルチステップフォームを追加する方法

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

MetForm で構築されたマルチステップフォームの例
あなたの気持ちは何ですか
2022年6月12日に更新