複数選択可能なドロップダウンリストの作成方法

マルチセレクトドロップダウンを使用すると、フォーム内の長いリストを簡単に扱えるようになります。フォームに複数の選択肢を持つ長いリストを追加する方法はこれだけではありませんが、最も簡潔なアプローチです。

そして、実際にユーザーが入力したくなるフォームをデザインするとなると、必要以上にフォームを長くしないような工夫が必要です。

しかし、マルチセレクトドロップダウンを選択していれば、よりクリーンなデザインを作成できたであろう状況で、大きなチェックリストを使用しているウェブサイトを見かけます。

私の見たところでは、これはフォームビルダーがマルチセレクトドロップダウンをサポートしていないか、作成者が注意を払っていないかのどちらかです。

そこで、WordPressでマルチセレクトオプション付きのドロップダウンをフォームに追加するのがいかに簡単かを示す簡単なガイドをまとめるべきだと思いました。

今すぐWordPressフォームを作成する

WordPressでマルチセレクトドロップダウンフィールドを設定する方法

まず、使用するプラグインをインストールすることから始めましょう。

ステップ1：WPFormsプラグインをインストールする

まず、マルチセレクトドロップダウンをサポートするフォームビルダーが必要です。WPFormsをお勧めします。なぜなら、他のWordPressフォームプラグインがこれほど柔軟で時間を節約できる機能を提供しているとは思えないからです。

例えば、WPFormsのドロップダウンでは、次のことが可能です。

• 無料版と有料版の両方で、ドロップダウンにマルチセレクションオプションを追加する
• AIを使用してオプションの長いリストを自動生成して追加する

ドロップダウンにマルチセレクトを作成するためにWPForms LiteまたはWPForms Proのいずれかを使用できますが、このガイドではWPForms Proを使用します（両方のバージョンの主な違いについては、WPForms Lite vs Proを参照してください）。

プラグインを初めてインストールしますか？非常に簡単です。ドキュメントガイドに記載されているインストール手順に従ってください。

インストールしたら、すぐにフォームの作成を開始できます。

ステップ2：新しいフォームを作成する

WordPress管理メニューを開きます。サイドバーのWPFormsにカーソルを合わせ、新規追加をクリックします。

この操作により、フォーム設定画面が読み込まれます。この例では、書籍リクエストフォームを作成したいので、内部参照用にフォームに適切な名前を付け、テンプレートを選択します。

簡単にするために、シンプルなコンタクトフォームを選択し、後でドロップダウンを追加して少しカスタマイズします。

なお、2,100以上のフォームテンプレートから選択できます。AIを使用してフォーム全体を生成することもできます。

しかし、機能とカスタマイズをよりよく実証するために、今回は手動で進めます。

テンプレートを選択すると、フォームビルダーが数秒で読み込まれます。

WPFormsのすべてのテンプレートは100％カスタマイズ可能です。そのため、新しいフィールドを簡単に挿入したり、既存のフィールドを削除したり、その他の設定を変更したりできます。

次のステップでは、選択可能な選択肢のかなり大きなリストを持つドロップダウンフィールドを追加します。

ステップ3：ドロップダウンフィールドを追加する

まず、ドロップダウンをフォームにドラッグします。

次に、フィールドをクリックすると、左側に設定が開きます。

左側のペインには、さまざまなオプションが表示されます。フィールドのラベルを変更したり、ドロップダウンの選択肢を入力したりできます。

まず、ラベルを変更して、フィールドに、より関連性の高い説明的な名前を付けましょう。このフィールドに人々がリクエストできる本のリストを追加したいので、このフィールドを「リクエストする本」と名付けます。

次に、ドロップダウンの選択肢を追加する時間です。選択肢がいくつかしかない場合は、手動で簡単に追加できます。

しかし、リストが長い場合は、AIに代わりに選択肢を生成させて追加することで、多くの時間を節約できます。

選択肢の生成にAIを使用するには、紫色の「選択肢を生成」ボタンをクリックしてください。

次に、選択肢を簡単な言葉で説明すると、WPForms AIがほぼ瞬時にリストを生成します。人気のある本（まともな図書館ならどこにでもある可能性が高い）のリストを追加したいのですが、それがプロンプトで尋ねることです。

数秒以内に、すぐに使える素晴らしいリストができました。しかし、リストを大幅に変更したい場合は、プロンプトを変更してWPForms AIに再度リストを更新するように依頼してみてください。

提案に満足したら、「選択肢を挿入」をクリックしてください。

生成された選択肢は、左側のペインの選択肢リストに表示されます。これらの選択肢を手動で編集することもできます。

デフォルトでは、訪問者は一度に1つの選択肢しかドロップダウンから選択できません。しかし、次のステップで示すように、これらの設定を変更するのは簡単です。

ステップ4：ドロップダウンフィールドの設定を編集してマルチセレクトを有効にする

デフォルトでは、訪問者は一度に1つの選択肢しかドロップダウンから選択できません。これを変更するには、まずドロップダウンフィールドの「高度な設定」タブに移動します。

その後、「複数選択」をクリックしてオンにします。

素晴らしい！これでほぼ完了です。しかし、個人的にはクラシックなドロップダウン（デフォルト設定）はあまり好きではありません。

これにより、ドロップダウンは縦長のボックスとして表示され、複数のオプションを選択するには Ctrl キー（Macの場合は Command キー）を押す必要があります。

「スタイル」をクラシックからモダンに変更することで、ドロップダウンフィールドをより直感的にすることができます。

モダンなスタイルが複数選択ドロップダウンに適している理由は3つあります。

• モダンなスタイルのフィールドは、リストを展開するための矢印が付いた1行を表示します。常に4行を表示し、より多くの画面スペースを占有するクラシックなスタイルよりもコンパクトです。
• モダンなスタイルのフィールドでは、キーボードのキーを押したままにすることなく、複数のエントリをクリックできます。クラシックフィールドでは、訪問者は一度に1つ以上のエントリを選択するために、キーボードのControlキーまたはCommandキーを押したままにする必要があります。
• モダンスタイルの複数選択ドロップダウンには検索ボックスがあり、目的の項目をすばやく簡単に見つけることができます。

フォームビルダーの上部にある「保存」ボタンをクリックして、これまでの進捗を保存しましょう。

これでフォームを公開できます。これは最終ステップであり、数分しかかかりません。

ステップ5：フォームを公開する

これでフォームの入力が完了しました。WordPressサイトに公開しましょう。

WPFormsを使えば、フォームを好きな場所に公開できます。以下に追加できます：

• 投稿
• ページ
• サイドバー
• WordPressのフッター。

この例では、フォーム用の新しいページを作成しましょう。

まず、フォームビルダーの上部にある「埋め込み」をクリックします。

次に、「新しいページを作成」をクリックしましょう。

ページの名前を入力し、「開始」をクリックします。

WordPressが新しいページを開き、フォームのプレビューを表示します。右上にある青い「公開」ボタンをクリックします。

これで、マルチセレクトドロップダウンを含むフォームが公開され、使用できるようになりました。

これで完了です！WordPressで簡単にマルチセレクトドロップダウンを作成する方法を学びました。

複数選択ドロップダウンに関するよくある質問

WordPressの複数選択ドロップダウンに関する最も一般的な質問への回答を以下に示します。

複数選択ドロップダウンとは何ですか？

複数選択ドロップダウンは、訪問者が1つのリストから複数のオプションを選択できるフォームフィールドです。長いリストをページの下に多数のチェックボックスを広げるのではなく、コンパクトに保ちます。

WordPressでユーザーが複数のオプションを選択できるようにするにはどうすればよいですか？

WPFormsでは、ドロップダウンフィールドを追加し、その「詳細設定」タブを開き、「複数オプション選択」をオンにします。フィールドの「スタイル」をモダンに切り替えると、訪問者がキーを押さずに複数のオプションをクリックできるため、使いやすくなります。

クラシックとモダンスタイルのドロップダウンの違いは何ですか？

クラシックスタイルは縦長のボックスを表示し、複数のオプションを選択するにはCtrlキーまたはCommandキーを押す必要があります。モダンスタイルはコンパクトな単一行を表示し、検索ボックスを追加し、訪問者がキーボードショートカットなしで複数の選択肢をクリックできるようにします。

無料で複数選択ドロップダウンを作成できますか？

はい。複数選択ドロップダウンは無料のWPForms Liteプラグインで動作するため、有料ライセンスなしで作成できます。

次に、フォームをページに分割する

フォームをよりコンパクトにする方法をお探しなら、複数のページに分割することを検討してください。これにより、長いフォームでも作業しやすくなります。

• フォームにページ区切りを追加する方法については、マルチステップフォームの作成ガイドをお読みください。
• コンバージョンとリードを増やすように設計されたマルチステップフォームを作成するには、リードフォームの作成方法をご覧ください。

今すぐ複数選択ドロップダウンを作成する

フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。

もしこの記事がお役に立ったなら、WordPressの無料チュートリアルやガイドをもっと知るために、FacebookとTwitterでフォローしてください。