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

マルチセレクトドロップダウンは、フォーム内の大きなリストを扱いやすくします。フォームに複数の選択可能なオプションを持つ長いリストを追加する唯一の方法ではありませんが、最も簡潔なアプローチです。

そして、人々が実際に記入したくなるようなフォームをデザインするとなると、フォームを必要以上に引き伸ばさないものが必要になる。

しかし、マルチセレクト・ドロップダウンを選べばもっとすっきりしたデザインにできたはずなのに、大きなチェックリストを使っているウェブサイトを見かける。

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

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

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

さっそく、これから使うプラグインをインストールしよう。

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

まず最初に、マルチセレクト・ドロップダウンに対応したフォームビルダーが必要です。私がWPFormsをお勧めする理由は、同じレベルの柔軟性と時間節約機能を提供するWordPressフォームプラグインは他にないと純粋に思うからです。

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

• 無料版と有料版の両方で、ドロップダウンに複数の選択オプションを追加する。
• AIで長いオプションリストを自動生成し、追加する

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

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

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

ステップ2：新規フォームの作成

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

このアクションはフォーム設定画面を読み込みます。この例では、ブックリクエストフォームを作成したいと思います。そこで、内部参照のためにフォームに適切な名前をつけ、テンプレートを選びます。

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

2,000以上のフォームテンプレートからお選びいただけます。フォーム全体をAIで生成することもできます。

しかし、機能性とカスタマイズをよりよく示すために、今回は手動ルートを使っている。

テンプレートを選択した後、フォームビルダーは数秒でロードされます。

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

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

ステップ 3: ドロップダウンフィールドの追加

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

次に、左側に設定が開くようにフィールドをクリックする。

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

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

さて、ドロップダウンの選択肢を追加しましょう。選択肢がいくつかあれば、手動で追加するのは簡単です。

しかし、リストが長い場合は、代わりにAIが選択肢を生成して追加してくれるので、時間を大幅に節約できる。

選択肢にAIを使うには、紫色の「選択肢を生成」 ボタンをクリックします。

さて、選択肢を簡単な言葉で記述すれば、WPForms AIはほとんど即座にリストを生成してくれます。人気のある本（まともな図書館であれば入手可能であろう）のリストを追加したいので、それをプロンプトで尋ねます。

数秒のうちに、作業可能な素晴らしいリストができた。しかし、リストを大幅に変更したい場合は、プロンプトを修正し、WPForms AIにリストを更新するように再度依頼してみてください。

候補に満足したら、「選択肢を挿入」をクリックする。

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

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

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

デフォルトでは、訪問者はドロップダウンから一度に1つの選択肢しか選択できません。これを変更するには、まずドロップダウン・フィールドのAdvancedタブを開いてください。

その後、複数オプション選択をクリックしてオンに切り替える。

素晴らしい！もう少しで完成だ。しかし、私は個人的にクラシック・ドロップダウンスタイル（デフォルトのmideです）が好きではありません。

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

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

モダンスタイルがマルチセレクトドロップダウンに適している理由は3つあります：

• モダン・スタイルのフィールドは、リストを展開する矢印とともに1行を表示します。これは、常に4行を表示し、より多くのスクリーンスペースを取るクラシックスタイルよりもコンパクトです。
• モダンスタイルのフィールドでは、キーボードのキーを押したまま複数のエントリーをクリックすることができます。クラシックスタイルのフィールドでは、一度に複数のエントリーを選択するには、キーボードのControlキーまたはCommandキーを押したままにする必要があります。
• モダンスタイルのマルチセレクトドロップダウンには検索ボックスがあり、欲しいアイテムを素早く見つけることができます。

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

これでフォームを公開できる。これが最後のステップで、数分しかかかりません。

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

フォームが完成したら、いよいよWordPressサイトに公開しましょう。

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

• 投稿
• ページ
• サイドバー
• ワードプレスのフッター。

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

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

それでは、「新しいページを作成」をクリックしてみましょう。

ページの名前を入力し、「Let's Go」をクリックします。

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

これで、マルチセレクトドロップダウンを使ったフォームがライブで使えるようになりました。

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

WordPressフォームを今すぐ作成

次のステップフォームをページに分割する

フォームをもっとコンパクトにする方法をお探しなら、複数のページに分割することを考えてみてください。こうすることで、長いフォームの作業がとても楽になります。

• フォームに改ページを追加する方法については、マルチステップフォームの作り方をご覧ください。
• コンバージョンとリードを増やすためにデザインされたマルチステップフォームを作るには、リードフォームの作り方をご覧ください。

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

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