AI要約
モバイルで表示する際に、複数列のフォームレイアウトを1列に変換しますか？ 複数の列を使用すると大きな画面では見栄えがしますが、小さな画面で1列のフォームレイアウトに変更すると、フォームが見栄え良く使いやすくなります。
このチュートリアルでは、モバイルデバイスでサイトを訪問するユーザーのために、複数列のレイアウトを1列に変換する方法を説明します。
注意: より簡単なドラッグ＆ドロップのアプローチで高度なフォームレイアウトを構築するには、レイアウトフィールドの使用をお勧めします。これはユーザーの画面サイズに自動的に調整されます。ただし、このチュートリアルで説明するレイアウトCSSクラスは引き続きサポートされています。
開始する前に、まずWPFormsがWordPressサイトにインストールおよびアクティブ化されていること、およびライセンスを検証済みであることを確認する必要があります。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。
複数列のフォームレイアウトを作成する
WPFormsを使用すると、簡単に複数列のフォームを作成できます。 この例では、次のCSSクラスを使用して2列レイアウトを作成します: wpforms-one-half。 複数列フォームがどのように表示されるかの例を次に示します。
注意: 上記の画像では、各行の最初のフィールドにも wpforms-first クラスが使用されています（例: wpforms-one-half wpforms-first）。このクラスは、フィールドが新しい行を開始する必要があることを示します。
2列のフォームレイアウトを作成した後、モバイルデバイスでサイトを訪問するユーザーのために、フォームフィールドが1列で表示されるようにしたいと考えています。
モバイルでフィールドを1列に表示する
モバイルでフィールドを1列で表示するには、プリセットCSSクラスを使用する必要があります。フォームビルダーでフィールドをクリックして、フィールドオプションを表示します。次に、高度な設定セクションで、CSSクラスフィールドに wpforms-mobile-full クラスを追加します。
最後に、フォーム内の他のフィールドにも同様のことを行い、変更を保存するために保存ボタンをクリックすることを忘れないでください。
これで、モバイル訪問者にとって、複数列のフォームレイアウトが1列で表示されます。モバイルデバイスでのフォームの表示例を次に示します。
これで完了です！モバイルデバイスで複数列レイアウトから1列に切り替わるフォームを作成できるようになりました。
次に、フォームの外観をさらにカスタマイズしたいですか？ その場合は、フォームにカスタムCSSを追加するチュートリアルをご覧ください。