複数選択肢フィールドの使用

フォームの複数選択肢フィールドの外観や機能を変更しますか? WPFormsでは、このフィールドタイプを特定のニーズに合わせて調整するためのオプションが多数用意されています。

このチュートリアルでは、複数選択肢フィールドをカスタマイズするさまざまな方法について説明します。

デモを試す!

どのイベントへのボランティアにご興味がありますか?

注意:複数選択肢フィールドでは、ユーザーは一度に1つのオプションしか選択できません。一度に複数のオプションを選択できるようにしたい場合は、代わりにチェックボックスフィールドを使用することをお勧めします。


開始する前に、WPFormsがサイトにインストールおよび有効化されていることを確認してください。その後、新しいフォームを作成するか、既存のフォームを編集してフォームビルダーにアクセスできます。

フォームへの複数選択肢フィールドの追加

フォームビルダーに入ったら、まだ追加していない場合は、フォームに複数選択肢フィールドを追加します。これは、標準フィールドの下のこのオプションをクリックするか、プレビューエリアにドラッグアンドドロップすることで行えます。

フォームに複数選択フィールドを追加する。

複数選択肢フィールドのすべてのオプションにアクセスするには、プレビューエリアでフィールドをクリックしてフィールドオプションパネルを開きます。

注意:WPFormsで利用可能なすべてのカスタマイズオプションの詳細については?追加のヒントについては、フィールドオプションの完全ガイドをご覧ください。

フィールドラベルと説明の編集

まず、フィールドラベルと説明を変更できます。

フィールドラベルの変更

デフォルトでは、フィールドラベルは「複数選択肢」になります。これを、ラベルフィールドにカスタムテキストを入力することで、好きなものに変更できます。

複数選択フィールドのラベルを変更する

説明の追加

フィールドの説明を追加することは、ユーザーに指示やその他の情報を提供して、複数選択肢フィールドの入力方法を伝えるのに役立ちます。カスタムテキストは、説明フィールドに入力できます。

複数選択フィールドに説明を追加する

注意:フォームに指示やその他の情報を含める他の方法をお探しですか?詳細については、WPFormsにテキストを追加するチュートリアルをご覧ください。

選択肢の編集、追加、削除

複数の選択肢フィールドの選択肢は、当然ながらその最も重要な機能の1つです。フィールドオプションパネルでこれらの項目をカスタマイズできます。

複数選択肢の選択肢の編集

既存の選択肢のラベルを変更するには、提供されているフィールドに希望のテキストを入力するだけです。

複数選択項目のラベルを編集する

選択肢の順序を変更するには、単にドラッグアンドドロップして、表示したい順序にします。

最後に、オプションを事前選択したい場合は、ラベルの左側にあるラジオボタンをクリックします。

複数選択項目を事前選択する

注意: 選択肢の事前選択の詳細については、WPFormsでフィールドにデフォルト値を追加するチュートリアルをご覧ください。

複数選択肢の選択肢の追加と削除

フィールドに新しい選択肢を追加するには、既存のオプションのいずれかの隣にある青い プラス (+)ボタンをクリックします。

複数選択項目を追加する

新しい選択肢は、クリックしたプラス (+) ボタンの選択肢のすぐ下に表示されます。

一度に複数の選択肢を追加したい場合は、一括追加をクリックします。

複数選択フィールドのバルク追加オプションを開く

次に、提供されているフィールドに新しい選択肢をそれぞれ1行に入力します。完了したら、新しい選択肢を追加をクリックします。

一括で追加したすべての選択肢は、選択肢リストの末尾に追加されます。

注意: 複数選択肢フィールドに選択肢を追加するのに役立ちますか?一括追加機能に関する完全なチュートリアルで詳細を確認してください。

フィールドから選択肢を削除したい場合は、フィールドオプションパネルの横にある赤い マイナス (-)ボタンをクリックするだけです。

複数の選択肢項目を削除する

「その他」の選択肢を追加する

複数選択肢フィールドでは、「その他」オプションを含めることもできるため、ユーザーは独自の回答を入力できます。この機能を有効にするには、その他の選択肢を追加オプションをオンにします。

この設定をオンにすると、「その他」の選択肢が自動的にオプションリストの末尾に表示されます。ラベルをクリックして名前を変更すれば、別のテキストを使用することもできます。

フォームで「その他」オプションが選択されると、その下に小さなテキストボックスが表示され、カスタム回答を入力できます。

画像選択肢の使用

複数選択肢フィールドでは、選択肢に画像を追加することもできます。これを行うには、画像選択肢を使用オプションをオンにします。

選択式フィールドの画像選択を有効にする

このオプションがオンの場合、各選択肢に独自の画像をアップロードボタンが表示されます。それをクリックして、メディアライブラリまたはコンピューターからファイルを選択します。

選択式画像選択の画像アップロードボタン

注意: 画像選択肢は、フォームに追加されるときにトリミングまたはリサイズされません。最適な表示のためには、250px平方以下の画像を使用し、すべての画像サイズが同じであることを確認してください。

画像ファイルをアップロードすると、フィールドオプションパネルにプレビューが表示されます。

選択式画像選択のプレビュー

注意: 画像選択肢の使用に関する詳細情報が必要ですか?WPFormsで画像選択肢を追加する方法のチュートリアルで、手順を確認してください。

アイコン選択の使用

複数選択肢フィールドでは、選択肢にアイコンを追加することもできます。この機能を有効にするには、アイコン選択肢を使用オプションをオンにします。

アイコン選択の使用を有効にする

アイコンの選択を有効にすると、選択肢フィールドの各選択肢にデフォルトのアイコンが追加されます。デフォルトのアイコンのいずれかをクリックして、好みのアイコンに置き換えてください。

デフォルトアイコンを変更するにはクリック

次に、アイコンピッカーが表示され、2,000以上のアイコンを閲覧および検索できます。気に入ったアイコンを見つけたら、クリックしてフォームに追加してください。

電話アイコンを選択

アイコンピッカーからアイコンを選択すると、フォームビルダーに表示されます。

フォームにアイコンが追加されました

注意: アイコンの選択肢についてさらに詳しく知りたいですか? 詳細については、アイコンの選択肢の使用方法に関するステップバイステップガイドをご覧ください。

WPForms AIによる選択肢の生成

WPForms AIを使用して、選択肢フィールドに選択肢を追加することもできます。この機能を使用すると、プロンプトに基づいて関連性の高い選択肢をすばやく生成できます。WPForms AIを使用するには、選択肢セクションの下にある選択肢を生成ボタンをクリックするだけです。

選択肢を生成ボタン

注意: WPForms AIで選択肢を生成する方法の詳細については、AI選択肢の使用方法に関するチュートリアルをご覧ください。

フィールドを必須にする

ユーザーがフォームを送信する前に選択肢フィールドから選択する必要があることを確認したい場合は、必須にする必要があります。

そのためには、必須オプションをオンにするだけです。

選択式フィールドを必須にする

フォームを発行すると、選択肢を選択せずにフォームを送信しようとしたユーザーには、「このフィールドは必須です」というメッセージが表示されます。

必須の選択式フィールド

注意: フォームの必須フィールドに表示される検証メッセージをカスタマイズしたいですか? 検証メッセージの変更方法に関するチュートリアルにすべての詳細が記載されています。

選択肢のランダム化

選択肢フィールドの項目を毎回ランダムな順序で読み込むことで、回答の順序による偏りを防ぐことができます。この機能は、フィールドの詳細設定で有効にできます。

これらの設定にアクセスするには、フィールドオプションパネルの上部にある詳細設定をクリックします。

選択式フィールドの詳細フィールドオプションにアクセスする

次に、選択肢をランダム化というラベルのオプションをオンにします。

選択式項目をランダム化する

注意: 選択フィールドの選択肢をランダム化するための詳細なガイドについては、このオプションに関する完全なチュートリアルを参照してください。

選択肢を複数列レイアウトで表示する

選択肢フィールドの項目を複数列レイアウトで整理すると、フィールドが占めるスペースを節約できます。特に選択肢フィールドにユーザーが選択できるオプションが多い場合、これは非常に役立ちます。

選択肢レイアウトドロップダウンを使用して、選択肢の1列、2列、または3列のレイアウトを作成できます。

選択肢レイアウトのドロップダウン

インラインレイアウトを選択することもできます。これにより、可能な限り多くの選択肢が1行に配置されます。1行に収まらないほど多くの選択肢がある場合は、次のように別の行に折り返されます。

インラインスタイルの例

注意: 選択肢オプションの複数列レイアウトの作成の詳細については、このオプションに関する完全なチュートリアルを参照してください。

複数選択肢の動的選択肢の使用

WPFormsを使用すると、WordPressサイトから分類、投稿タイトルなどのデータをプルして、選択フィールドの選択肢として使用できます。これらの情報をサイトの他の場所で更新すると、フォームでも更新されます。

これを設定するには、Dynamic ChoicesドロップダウンからTaxonomyまたはPost Typeを選択します。

動的選択肢を有効にする

注意:ダイナミックチョイスの設定について、さらにヘルプが必要ですか?詳細はダイナミックチョイスの完全ガイドをご覧ください。

フィールドラベルを非表示にする

最後に、フィールドラベルをフロントエンドに表示したくない場合は、高度なフィールドオプションの下部にあるオプションを切り替えることで非表示にできます。

選択式フィールドのラベルを非表示にする

注意:フィールドラベルを非表示にしても、一般的なフィールドオプションに入力することをお勧めします。これにより、フォームのエントリでこのフィールドが引き続きラベル付けされ、識別できるようになります。

よくある質問

以下に、複数選択フィールドに関してよく受ける質問にお答えします。

複数選択フィールドが選択されたときに、フォームが自動的に送信されるように設定できますか?

はい、複数選択フィールドで選択が行われると、フォームが自動的に送信されるように設定できます。この設定方法については、フィールドの選択でフォーム送信をトリガーする方法に関する開発者向けドキュメントをご覧ください。

注意:これには、サイトにコードを追加するなど、高度な機能が必要となるため、開発者向けです。

はい、いいえのような複数選択フィールドのオプションに特定の値を割り当てることができますか?

はい、できます!デフォルトでは、WPFormsはオプションラベルをフィールド値として使用します。ただし、カスタム値(たとえば、「はい」に「1」、「いいえ」に「0」)を割り当てたい場合は、次のコードスニペットを追加した後に表示されるShow Values設定を有効にすることで可能です。

add_filter( 'wpforms_fields_show_options_setting', '__return_true' );

このコードがアクティブになると、ビルダー内の複数選択、ドロップダウン、チェックボックスフィールドに新しいShow Valuesチェックボックスが表示されます。その後、各オプションにカスタム値を入力できます。

詳細な手順については、wpforms_fields_show_options_settingフィルターの使用方法に関する開発者向けドキュメントをご覧ください。

これで、WPFormsの複数選択フィールドのフィールドオプションをカスタマイズする方法がわかりました。

次に、ユーザーの入力や選択に基づいて複数選択フィールドを非表示または表示する方法を学びたいですか?WPFormsの条件付きロジックの使用方法に関するチュートリアルをご覧ください。

最高のWordPressドラッグアンドドロップフォームビルダープラグイン

簡単、高速、安全。WPFormsを信頼する600万人以上のウェブサイト所有者に加わりましょう。