AI要約
WordPressフォームのレイアウトをより細かく制御したいですか？ WPFormsのレイアウトフィールドは、ユーザーの画面サイズに自動的に調整される高度なフォームレイアウトを構築するための強力なソリューションを提供します。
このチュートリアルでは、WPFormsでレイアウトフィールドを使用する方法を説明します。
開始する前に、WPFormsをインストールして有効化し、ライセンスを認証してください。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスしてください。
フォームにレイアウトフィールドを追加する
フォームビルダーでは、レイアウトフィールドは**Fancy Fields**セクションの下にあります。**Layout**フィールドをクリックするか、プレビューエリアにドラッグアンドドロップしてフォームに追加してください。
カラムレイアウトの選択
フォームにレイアウトフィールドを追加したら、好みのレイアウトを選択します。
レイアウトフィールドには、フォームフィールドを異なるカラムに配置するための複数のオプションがあります。フィールドオプションパネルを開き、利用可能なカラムレイアウトを表示するには、フォームプレビューエリアの**Layout**フィールドをクリックします。
これで、1から4カラムまでのいくつかの利用可能なレイアウトが表示されます。デフォルトでは、レイアウトフィールドは均等な幅の2つのカラムを持つ2カラムレイアウトを選択します。
このチュートリアルではデフォルトのレイアウトを使用しますが、すべてのレイアウトで機能は同じです。
**注意:** CSSクラスオプションを使用してマルチカラムレイアウトを有効にした場合、フォームフィールドは正しく表示されません。詳細については、FAQセクションを参照してください。
フィールドの表示順序の設定
**Display**ドロップダウンは、フォーム内のフィールドの順序を決定します。新しいレイアウトフィールドのフィールドはデフォルトで行で表示されるように設定されており、ユーザーは左から右へ水平にフォームを移動できます。
この順序を変更するには、**Display**ドロップダウンをクリックし、好みのオプションを選択します。
**注意:** フォームに複数のスタックされたフィールドを持つレイアウトフィールドが含まれている場合、**Display**ドロップダウンから**Rows – fields are ordered from left to right**オプションを使用することをお勧めします。これにより、フィールドはモバイルビュー、フォーム通知、およびエントリで、意図したフォーム構造とユーザーエクスペリエンスを維持しながら、配置したとおりに表示されます。
レイアウトの切り替え
個々の列にフィールドを追加した後でもレイアウトを変更したい場合は、フィールドオプションパネルから利用可能なレイアウトのいずれかを選択するだけです。
列とその内容は、ユーザーの画面サイズに合わせて自動的にサイズと位置が調整されます。
注意: 新しく選択したレイアウトの列数が以前のレイアウトよりも少ない場合、最後の列にあるフィールドはレイアウトフィールドから削除され、フォームの本文に配置されます。
複数のレイアウトを使用する
必要に応じて、フォームに複数のレイアウトフィールドを追加し、それぞれに異なる列構成を選択できます。
たとえば、1つのレイアウトフィールドに1列、別のレイアウトフィールドに2列を設定することで、フォームの外観をより柔軟にすることができます。
各レイアウトフィールドを区別しやすくするために、フィールドオプションパネルのラベルフィールドにラベルを追加してください。
レイアウトフィールドはコンテナとして機能するため、フォーム内の項目をグループ化するのに最適なソリューションです。
個々のカラムにフィールドを追加する
フィールドをいずれかの列に追加するには、サイドバーからフィールドをクリックしてドラッグし、目的の列にドロップします。
レイアウトフィールドに追加されたほとんどのフィールドは、デフォルトで大きなフィールドサイズになり、列の全幅を占有します。ただし、リッチテキストフィールドと段落テキストフィールドのサイズは高さによって決まり、レイアウトフィールド内ではデフォルトで中程度のフィールドサイズになります。
段落テキストフィールドの調整可能な高さについては、開発者ドキュメントを参照してください。
条件付きロジックの有効化
レイアウトフィールドは、ユーザーの選択に基づいてレイアウトフィールド全体を表示または非表示にするための条件付きロジックを有効にすることもサポートしています。
注意: レイアウトフィールドの条件付きロジック機能にアクセスするには、WPFormsバージョン1.9.0以降が必要です。
条件付きロジックを有効にするには、レイアウトフィールドをクリックしてフィールドオプションパネルを開きます。次に、スマートロジックタブに移動します。
そこに到達したら、条件付きロジックを有効にするオプションをオンの位置に切り替えます。
有効にすると、条件付きロジックルールを設定するための追加オプションが表示されます。例では、ユーザーにレビューを残したいかどうかを尋ねる複数選択フィールドを追加しました。次に、ルールを表示に設定し、レビューを残したいですか？がはいの場合にこのフィールドを表示するようにしました。
このルールにより、フォームを公開したときにレイアウトフィールド内のすべてのフィールドが非表示になります。フィールドは、ユーザーが複数選択フィールドオプションからはいを選択した場合にのみ表示されます。
レイアウトフィールドで条件付きロジックを有効にした後、レイアウトフィールド内の個々のフィールドで条件付きロジックを使用するオプションは無効になります。
注意: 条件付きロジックの仕組みの詳細については、WPFormsでの条件付きロジックの使用に関する完全なガイドを必ず確認してください。
フォームからレイアウトフィールドを削除する
フォームからレイアウトフィールドを削除したい場合は、フィールドにカーソルを合わせてゴミ箱アイコンをクリックしてください。
レイアウトフィールドを削除すると、その内部にあるすべてのフィールドも削除されるため、削除を確認するオーバーレイが表示されます。レイアウトフィールドとその内部に追加したすべてのフィールドを削除することに同意する場合は、OKをクリックしてください。
注意：レイアウトフィールド内に一度追加したフィールドは、削除されると復元できません。
フォームのプレビュー
レイアウトフィールド内の列にフィールドを追加したら、保存をクリックして変更を保存してください。
次に、プレビューボタンをクリックして、新しいタブでフォームのプレビューを開きます。
プレビューページでは、フォームの動作するバージョンが表示されます。ここでフォームを操作し、視覚的なレイアウトをテストできます。また、さまざまな画面サイズでフォームがどのように機能するかをテストすることもできます。
よくある質問
これらは、複数カラムのフォームレイアウトの作成に関するよくある質問への回答です。
フォームのプレビュー時にレイアウトフィールドが正しく表示されないのはなぜですか？
以前にCSSクラスオプションを使用してフォームに複数列を作成していた場合、レイアウトフィールドが正しく機能しなくなります。レイアウトフィールドを使用する前に、フォームフィールドからCSSクラスを削除する必要があります。
これを行うには、フォームビルダーを開き、編集したいフィールドをクリックしてフィールドオプションパネルを開きます。次に、詳細設定タブに移動し、CSSクラスフィールドから複数列のCSSクラスを削除します。
CSSクラスを削除した後、変更を保存し、フォームをプレビューして、期待どおりの外観と動作になっていることを確認してください。
ユーザーの選択に基づいてレイアウトフィールドを表示または非表示にできますか？
はい、ユーザーが提供した回答に応じて、フォームのレイアウトフィールドを表示または非表示にできます。これには、非表示にしたい特定のレイアウトフィールドで条件付きロジックを有効にする必要があります。詳細については、条件付きロジックセクションを参照してください。
送信ボタンをレイアウトフィールドと同じ行に配置できますか？
はい。レイアウトフィールドを使用して単一行フォームを作成したい場合は、フォームの設定ページにカスタムCSSクラスを追加する必要があります。
これを行うには、フォームビルダーで設定 » 一般に移動し、フォームCSSクラスフィールドにCSSクラス inline-fields を追加します。
注意：WPFormsで inline-fields クラスを使用すると、WordPressテーマのスタイルと競合する場合があります。詳細については、フォームを一行で表示するチュートリアルを確認してください。
これで、WPFormsでレイアウトフィールドを使用する方法がわかりました。
次に、ユーザーの操作に基づいてフォームに異なるオプションを表示する方法を知りたいですか？WPFormsで条件付きロジックを使用するガイドを確認してください。