AI要約
フォームフィールドをカスタマイズするための使いやすいオプションをご用意しています。WPFormsの各フィールドには、特定のニーズに合わせてフォームを作成するための組み込み機能が多数用意されています。
このチュートリアルでは、フォームのフィールドをカスタマイズするために利用できる多くのオプションについて説明します。
開始する前に、WPFormsがサイトにインストールされ、有効化されていることを確認してください。次に、新しいフォームを作成するか、既存のフォームを編集する必要があります。
一般的なフィールドオプション
フォームビルダーが開いたら、フィールドを追加、削除、編集できます。フィールドのオプションを開くには、プレビューエリアのフィールドをクリックするだけです。
フィールドラベルテキストの変更
フォームにフィールドを最初に追加したとき、ラベルはフィールドタイプ（例：「チェックボックス」または「複数項目」）と一致します。ただし、ラベルテキストを編集して、好きなように変更できます。
説明テキストの追加
フォームフィールドに説明テキストを追加することもできます。
このテキストは入力エリアの下に表示されます。
詳細については、フォームにテキストを追加するチュートリアルをご覧ください。
フィールドを必須にする
説明オプションの下で、必須オプションをオンに切り替えて、フィールドを必須にすることができます。
ユーザーが必須フィールドをスキップしてフォームを送信しようとすると、そのフィールドに入力するよう促す検証メッセージが表示されます。
注意：検証メッセージテキストをカスタマイズできることをご存知でしたか？詳細については、検証メッセージチュートリアルをご覧ください。
高度なフィールドオプション
高度なフィールドオプションでは、フィールドのさらに多くのカスタマイズ設定が可能です。これらを見つけるには、高度な設定タブをクリックする必要があります。
フィールドサイズの選択
ほとんどのフィールドにはフィールドサイズを変更するオプションが含まれており、フォームの外観をカスタマイズする際に非常に役立ちます。
編集中のフィールドタイプのこのオプションが利用可能な場合は、フィールドサイズのドロップダウンが表示されます。オプションには、小、中、大が含まれます。
ほとんどの場合、フィールドサイズはフォーム内のフィールドの幅を決定します。
ただし、2つのフィールドには例外があります。段落テキストフィールドとリッチテキストフィールドの場合、フィールドサイズは入力エリアの高さを設定します。
注意：同じ行に複数のフィールドを配置したい場合は、複数列フォームレイアウトのチュートリアルをご覧ください。
プレースホルダーテキストの追加
多くのフィールドでプレースホルダーテキストを追加できます。これは、ユーザーが独自のテキスト入力を開始するまで表示されます。
プレースホルダーテキストを使用して、指示を提供したり、フォームのデザインを変更したりすることもできます。詳細については、プレースホルダーテキストチュートリアルで追加の詳細と例を共有しています。
デフォルト値の設定
場合によっては、フォームの一部をユーザーのために事前入力しておきたい場合があります。これにより、ユーザーの手間を省くことができますが、必要に応じて入力や選択を変更することもできます。
編集中のフィールドタイプでこのオプションが利用可能な場合は、詳細タブにデフォルト値フィールドが表示されます。
詳細と例については、チェックボックスおよび複数選択フィールドのデフォルトを含め、フィールドにデフォルト値を追加するガイドを確認してください。
注：ユーザーデータやサイトの情報をデフォルト値としてフォームに引き込みたいですか？スマートタグの使用方法に関するチュートリアルを確認してください。
カスタムCSSクラスの追加
フォームフィールドの外観を簡単にカスタマイズして、希望どおりに見せることができます。これを行うには、CSSクラステキストフィールドにフォームフィールドのCSSクラス名を入力するだけです。複数のクラスの場合は、クラス名をスペースで区切ります。
より詳細なガイドについては、独自のカスタムCSSクラスを使用するチュートリアルも確認してください。
注：よりシンプルでドラッグアンドドロップで高度な複数列レイアウトを構築できるレイアウトフィールドの使用をお勧めします。ただし、このチュートリアルで説明されているレイアウトCSSクラスは引き続きサポートされています。
フィールドラベルを非表示にする
よりコンパクトまたはシンプルなフォームにしたい場合は、フィールドのラベルを非表示にすることを検討してください。
これを行うには、ラベルを非表示オプションをオンにする必要があります。
注：フィールドラベルを非表示にすることを選択した場合は、フィールドのラベルに関連性のある名前を入力するようにしてください。ラベルはエントリ詳細に表示されるため、これにより各フィールドを識別するのに役立ちます。
フィールドを読み取り専用にする
ユーザーが編集できないようにフォームに情報を表示したい場合は、フィールドを読み取り専用にすることができます。このオプションは、WPFormsのほとんどのフィールドで利用可能です。
これを有効にするには、読み取り専用オプションをオンにします。
このオプションがオンの場合、フィールドはフォームに表示されたままになりますが、ユーザーは値を変更できません。データは、送信されたフォームエントリにも含まれます。
詳細と追加のユースケースについては、フィールドを読み取り専用に設定するチュートリアルを確認してください。
注：読み取り専用フィールドは、スマートタグで追加されたユーザー詳細や、変更すべきでない合計やその他の情報を表示するなど、事前入力された値を表示するのに特に役立ちます。
チェックボックスと複数選択フィールドの特別なオプション
以下では、チェックボックスおよび複数選択フィールドに固有の追加オプションをいくつか説明します。
画像選択肢を追加する
チェックボックス、ラジオボタン、チェックボックス項目、またはラジオボタン項目フィールドに簡単に画像を追加できます。これを行うには、画像選択肢を使用オプションをオンにするだけです。
この設定をオンにすると、フィールド内の各選択肢に画像をアップロードできるようになります。
詳細については、フォームに画像選択肢を追加する方法のチュートリアルをご覧ください。
アイコン選択肢の追加
チェックボックス、ラジオボタン、チェックボックス項目、またはラジオボタン項目フィールドの選択肢にアイコンを追加することもできます。この機能を使用するには、アイコン選択肢を使用オプションをオンにします。
アイコン選択肢を有効にすると、ラジオボタンフィールドの各選択肢にデフォルトのアイコンが追加されます。デフォルトのアイコンをクリックすると、アイコンピッカーが表示され、2,000以上のアイコンから選択できます。
アイコン選択肢の詳細については、WPFormsでアイコン選択肢を使用する方法のチュートリアルをご覧ください。
選択肢のランダム化
提供する選択肢をランダム化することで、順序による偏りを回避できます。これは、アンケート＆投票アドオンを使用している場合に特に役立ちます。
チェックボックスまたはラジオボタンフィールドの詳細設定タブで、選択肢をランダム化 オプションをオンにできます。
動的選択肢の表示
動的選択肢オプションは、チェックボックス、ラジオボタン、またはドロップダウンフィールドの選択肢をサイトのページ、投稿、カテゴリ、またはタグの名前にしたい場合に非常に便利です。このオプションを有効にすると、フィールドの選択肢が自動的に設定され（コンテンツや分類法を追加または削除した場合も自動的に更新されます）。
このオプションを設定するには、詳細設定タブを開き、動的選択肢および動的ソースドロップダウンからオプションを選択します。
詳細については、動的選択肢の設定方法のチュートリアルをご覧ください。
これで完了です！WPFormsの組み込みオプションを多数使用して、フォームフィールドをカスタマイズできるようになりました。
次に、さらにフォームをカスタマイズするためにスマートロジックを追加しませんか？詳細と多くの例については、条件付きロジックのチュートリアルをご覧ください。