AI要約
フィールドを複数カラムで表示してフォームを簡潔にしたいですか？WPFormsを使えば、フォームを半分、3分の1、またはさらに複雑なレイアウトに簡単に分割できます。
このチュートリアルでは、複数カラムレイアウト設定を使用してフォームを最適に見せる方法を説明します。
注意：よりシンプルでドラッグ＆ドロップで高度なフォームレイアウトを作成できるレイアウトフィールドの使用をお勧めします。ただし、このチュートリアルで説明するレイアウトCSSクラスは引き続きサポートされています。
開始する前に、まずWPFormsがWordPressサイトにインストールおよび有効化されており、ライセンスが検証済みであることを確認する必要があります。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。
ビジュアルレイアウトを使用した複数カラムフォームの作成
WPFormsには、コードなしで複数カラムを作成できるビジュアルレイアウトツールが含まれています。
このツールにアクセスするには、ビルダー内の任意のフィールドをクリックしてフィールドオプションパネルを開きます。次に、高度なタブをクリックします。
CSSクラスオプションの横にあるレイアウトを表示をクリックして、ビジュアルレイアウトツールを開きます。
これにより、フォームで使用できるいくつかの既製のレイアウトオプションが表示されます。
注意：レイアウトを表示オプションはWPForms Liteユーザーのみが利用できます。WPForms Proプラグインを使用している場合は、複数カラムフォームフィールドを作成するためにレイアウトフィールドを使用する必要があります。
例として、名前とメールアドレスのフィールドを隣り合わせに表示し、それぞれがフォームの幅の半分を占めるようにしたいとします。このレイアウトを作成するには、均等なサイズの2つのボックスが表示されるオプションを選択します。
このレイアウトを選択したら、この特定のフィールドを表示したいカラムを選択する必要があります。名前フィールドはフォームの最初にあるため、左側のカラムに表示したいです。
ビジュアルレイアウトツールでカラムをクリックすると、対応するクラスがフィールドのCSSクラス設定に自動的に追加されます。wpforms-one-halfクラスはフィールドに利用可能な幅の半分を占めるように指示し、wpforms-firstクラスはフィールドが新しい行を開始する必要があることを示します。
次に、メールアドレスフィールドについても同じプロセスを実行する必要があります。ただし、右側のカラムに配置します。
レイアウトにフィールドを追加し終えたら、フォームビルダーで変更を保存してください。
サイトのフロントエンドでの複数カラムレイアウトの例は次のとおりです。
複数カラムCSSクラスを手動で追加する
ビジュアルレイアウトツールを使用したくない場合は、フィールドオプションパネルの高度なタブにある関連フィールドにCSSクラスを手動で入力できます。
複数カラムレイアウトで利用可能なすべてのCSSクラスを次に示します。
- wpforms-1/2
- wpforms-1/3
- wpforms-1/4
- wpforms-1/5
- wpforms-1/6
- wpforms-2/3
- wpforms-2/4
- wpforms-2/5
- wpforms-2/6
- wpforms-3/4
- wpforms-3/5
- wpforms-3/6
- wpforms-4/5
- wpforms-4/6
- wpforms-5/6
下の画像は、一般的な3つの異なる複数カラムレイアウトを示しています。ラベルは、上記リストのどのCSSクラスが使用されたかを示します。
注意: 上記画像の一行目の最初のフィールドには、wpforms-firstクラスも使用されています。
注意: 上記画像の一行目の最初のフィールドには、wpforms-firstクラスも使用されています。
複数カラムレイアウトの使用に関する追加情報
カラムクラスを使用する際には、いくつか重要な注意点があります。
- カラムはフォームビルダーには適用されません。フォームはサイトのフロントエンドで表示されたときにのみ表示されます。公開する前に必ずフォームをテストして、レイアウトに満足していることを確認してください。
- 各行の最初のフィールドには、カラムクラスに加えて
wpforms-firstクラスが必要です。これにより、プラグインはそれが最初の項目であることを認識し、フォーム内の以前のカラムをリセットします。 - ほとんどの場合、カラムクラスを使用する際には、フィールドサイズ（フィールドオプションパネルの高度なタブにもあります）を大に設定する必要があります。これにより、フィールドはそのカラムのすべての利用可能なスペースを埋め、隣接するフィールドとの左右のスペーシングを均一に保つことができます。
- 複数カラムレイアウトを条件付きフィールドで使用する場合、条件付きで表示されるフィールドは左揃えになります。これらのフィールドを好みのレイアウトに合わせて配置するには、このCSSスニペットを使用できます。
注意: WPFormsでCSSを使用することに慣れていない場合は、初心者向けCSSガイドと、WPFormsでのカスタムクラスの使用に関するドキュメントをご覧ください。
よくある質問
これらは、複数カラムのフォームレイアウトの作成に関するよくある質問への回答です。
フォームをプレビューしたときに、複数カラムレイアウトが機能しないのはなぜですか？
WPFormsの設定でモダンマークアップが有効になっている場合、フロントエンドでフォームを表示したときに複数カラムのCSSクラスは機能しません。この問題を解決するには、モダンマークアップを無効にする必要があります。
注意: モダンマークアップを無効にすると、ブロックエディターでフォームをスタイリングできなくなります。ブロックエディターでフォームをスタイリングしたい場合は、レイアウトフィールドを使用して複数カラムのフォームフィールドを作成することをお勧めします。
これを行うには、WPForms » 設定に移動し、一般タブを選択します。
その後、下にスクロールして、モダンマークアップを使用オプションのチェックを外します。
完了したら、必ず変更を保存してください。
注意: モダンマークアップの設定が見つからない場合は、WPFormsにこのオプションを表示させるためのフィルターを追加する必要があります。詳細については、フォームスタイリングガイドを参照してください。
これで、複数カラムレイアウトでフォームを最適化できます。
次に、モバイルデバイスでもフォームをきれいに見せたいですか？フォームを、モバイルでは単一カラムで表示される複数カラムレイアウトに設定できます。これにより、あらゆるデバイスで使いやすくなります。