WordPressで複数選択ドロップダウンフィールドを設定する方法（簡単な方法）

公開: 2020-10-26

WordPressに複数選択のドロップダウンフィールドを追加する必要がありますか？複数選択ドロップダウンは、ユーザーがリストから複数のオプションを選択できるようにするための優れた方法です。

この記事では、独自の複数選択ドロップダウンを作成する簡単で迅速な方法を紹介します。ドロップダウンを作成してWebサイトに追加するために、コードを記述する必要はありません。

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

ドロップダウンで複数のオプションを選択するにはどうすればよいですか？

WPFormsを使用すると、任意のドロップダウンを複数選択ドロップダウンに設定できます。

訪問者がリスト内のアイテムをクリックすると、ドロップダウンは開いたままになり、より多くの選択を行うことができます。

フォーム上のWordPressマルチドロップダウンリスト

WPFormsは最高のWordPressフォームビルダープラグインです。無料で入手！

このドロップダウンでは、選択肢を検索することもできます。したがって、国のドロップダウンリストなどの長いリストに最適です。

マルチセレクトドロップダウンを自分で作成する簡単な方法を紹介します。

WordPressで複数選択ドロップダウンフィールドを設定する方法

このチュートリアルで実行する手順を見てみましょう。

WPFormsプラグインをインストールします
フォームを作成する
フォームに複数選択ドロップダウンフィールドを追加する
あなたのウェブサイトにあなたのフォームを公開する

では、使用するプラグインをインストールしてみましょう。

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

WPFormsはWordPressに最適なフォームビルダーです。ドラッグアンドドロップビルダーを使用して、Webサイトのフォームを作成するのは非常に簡単です。

フォームの作成を開始するには、WordPressにWPFormsプラグインをインストールしてアクティブ化する必要があります。この手順についてサポートが必要な場合は、プラグインをインストールするためのこの初心者向けガイドを確認してください。

準備完了？先に進んで、最初のフォームを作成しましょう。

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

次に、基本的なフォームを作成し、それにドロップダウンを追加します。

この例では、日付ピッカーとドロップダウンを使用してボランティアフォームを作成します。

WPFormsには、優れたボランティア申請フォームテンプレートがあります。ただし、この例では、代わりに簡単な連絡フォームを開始点として使用します。

開始するには、WordPressダッシュボードを開き、[ WPForms ] » [新規追加]をクリックします。

新しいフォームを追加して、マルチステップのドロップダウンを追加します

先に進み、上部にフォームの名前を入力します。次に、Simple Contact Formテンプレートをクリックして、ブラウザで開きます。

WPFormsでSimpleContactFormテンプレートを開きます

これでテンプレートが開き、すでに3つのフィールドがあることがわかります。

名前
Eメール
コメントまたはメッセージ

複数選択ドロップダウンフィールドの新しいフォームを作成する

フォームに記入する人が支援したい日を選択できるように、日付フィールドを追加しましょう。

まず、[日付/時刻]フィールドをフォームビルダーの左側から右側にドラッグします。次に、[日付/時刻]フィールドを1回クリックして、設定を開きます。

ここでカスタマイズする2つの基本設定があります。

フォームに合わせてラベルテキストを変更します
ドロップダウンを使用して、日付フィールドのみに変更します。

日付時刻フィールドを日付に変更

次に、[詳細オプション]まで下にスクロールし、それをクリックして設定を展開します。

日付フィールドの詳細オプションを展開します

ボランティアは平日だけにしたいので、週末がグレー表示されるように[日数を制限]をクリックしてみましょう。これを行うには、月曜日から金曜日を選択するだけです。

日時フィールドの日数を制限する

OK、これで完了です。[保存]をクリックします。

複数選択ドロップダウンの追加に移りましょう。

ステップ3：フォームに複数選択ドロップダウンフィールドを追加する

このステップでは、ドロップダウンフィールドを追加してから、複数の選択を受け入れるようにカスタマイズします。

まず、ドロップダウンをフォームにドラッグしましょう。次に、フィールドをクリックして、設定が左側に開くようにします。

複数選択ドロップダウンをフォームにドラッグします

必要に応じて、投稿や製品など、WordPressの他の部分からドロップダウンを自動入力できます。動的フィールド選択の使用方法については、この記事でその方法を確認できます。

ただし、リストをハードコーディングする場合は、WPFormsを使用すると簡単にできます。ドロップダウンフィールド用の便利なプリセットリストがいくつか付属しています。処理を高速化するために、プリセットの1つを使用して米国の州のリストを追加します。

まず、先に進み、ドロップダウンフィールドの設定で[一括追加]をクリックします。

複数選択ドロップダウンにオプションを一括追加

次に、[プリセットの表示]をクリックして、使用可能なすべてのプリセットリストを開きます。

複数選択のドロップダウンプリセットを表示する

次に、[州]をクリックして、複数選択ドロップダウンに追加できる米国の州のリストを自動的に取得しましょう。

状態の複数選択ドロップダウン

州の完全なリストが[選択肢]ボックスに自動的に入力されます。 [新しい選択肢を追加]をクリックして、回答の選択肢として追加します。

複数選択ドロップダウンに回答の選択肢を追加する

ドロップダウンフィールドに3つのデフォルトの回答があることに気づきましたか？それらを削除するには、これらのデフォルトの選択肢の横にあるマイナス記号をクリックすることを忘れないでください。

複数選択ドロップダウンからデフォルトの回答を削除する

了解しました。ドロップダウンフィールドに設定されている回答の選択肢はこれですべてです。

ここで行う必要があるのは、これを複数選択フィールドにすることをWPFormsに指示することだけです。

これを行うには、左側を下にスクロールして、[詳細オプション]を展開します。

このセクションで[複数のオプションの選択]を選択しましょう。

複数選択のドロップダウンを作成するには、複数オプションの選択を有効にします

真下で行うべきもう1つの重要な変更があります。

このフィールドのスタイルを[モダン]ドロップダウンに変更しましょう。

モダンスタイルのマルチセレクトドロップダウン

なぜこのフィールドをモダンスタイルに変更したのか疑問に思っていますか？

このフィールドが複数選択ドロップダウンに適している理由は3つあります。

モダンスタイルフィールドには、リストを展開するための矢印が付いた1行が表示されます。そのため、常に4行を表示するクラシックスタイルよりもコンパクトです。
モダンスタイルフィールドでは、キーボードのキーを押したままにせずに、複数のエントリをクリックできます。 [クラシック]フィールドを使用すると、訪問者はキーボードのControlキーまたはCommandキーを押したままにして、一度に複数のエントリを選択する必要があります。
また、前述したように、 Modern syleの複数選択ドロップダウンには検索ボックスがあり、必要なアイテムをすばやく簡単に見つけることができます。

OK、ドロップダウンを希望どおりに設定しました。フォームビルダーの上部にある[保存]ボタンをクリックして、これまでの進行状況を保存しましょう。

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