AI要約
はじめに
WPFormsの選択式フィールドのモバイル表示における列数をカスタマイズしますか？ デフォルトでは、WPFormsの選択式フィールドは単一列で表示されます。しかし、カスタムCSSスニペットを使用してカスタマイズできます。
このチュートリアルでは、WPFormsの複数選択（チェックボックスとラジオボタン）フィールドのモバイル表示で2列表示を使用する方法を説明します。
フォームの作成
このチュートリアルを続けるには、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスする必要があります。フォームビルダーで、フォームにチェックボックスまたはラジオボタンフィールドを追加してください。
その後、選択式フィールドをクリックしてフィールドオプションパネルにアクセスします。次に、詳細設定タブに移動します。
ここで、選択肢のレイアウトオプションを選択し、2列オプションを選択します。
フォームを表示すると、チェックボックスまたはラジオボタンフィールドが2列で表示されます。ただし、モバイルデバイスでは、各選択肢が1列で表示されます。
このチュートリアルでは、カスタムCSSを使用して、モバイル表示で複数選択およびチェックボックスフィールドの列レイアウトを維持する方法を説明します。
スニペットの追加
まず、スニペットをサイトに追加します。スニペットの追加方法と場所についてサポートが必要な場合は、この役立つドキュメントを確認してください。
/**
* Customizing Multiple Choice Field Column on Mobile Display
*
* @link https://wpforms.com/developers/customizing-multiple-choice-field-columns-on-mobile-devices/
*/
/* Checkboxes and Radio Buttons */
@media screen and (max-width: 600px) {
/* Target both checkbox and radio fields */
#wpforms-form-2525 .wpforms-field-checkbox ul,
#wpforms-form-2525 .wpforms-field-radio ul {
display: flex;
flex-wrap: wrap;
margin: 0; /* Reset any default margins */
padding: 0; /* Reset any default padding */
}
/* Target list items in 2-column layouts */
#wpforms-form-2525 .wpforms-list-2-columns ul li {
width: calc(50% - var(--wpforms-field-size-input-spacing));
margin-right: var(--wpforms-field-size-input-spacing);
box-sizing: border-box; /* Ensure padding doesn't affect width */
}
/* Remove margin from every second item to prevent overflow */
#wpforms-form-2525 .wpforms-list-2-columns ul li:nth-child(2n) {
margin-right: 0;
}
}
#wpforms-form-2525 を、これらの変更を適用したい特定のフォームのIDに置き換えてください。ヘルプが必要な場合は、フォームIDとフィールドIDを取得する方法に関するチュートリアルを参照してください。
このスニペットは、2列レイアウトを使用するチェックボックスおよびラジオボタンフィールドがモバイル表示でレイアウトを維持することを保証します。
これで、モバイル表示での複数選択（チェックボックスおよびラジオボタン）フィールドの列レイアウトをカスタマイズする方法を学びました。
WPFormsフィールドをカスタマイズする他の方法についてもっと知りたいですか？ WPFormsのチェックボックスフィールドに「すべて選択」オプションを追加する方法に関するチュートリアルをご覧ください。