CMS：ドロップダウン入力要素を使用してカスタムフォームを設定する

訪問者がドロップダウン入力を使用して選択内容を CMS コレクションに直接送信できるカスタムフォームを作成します。この記事では、ドロップダウン入力要素と送信ボタンを追加する手順について説明します。この手順では、訪問者の回答を CMS コレクションに保存できるデータセットに両方の要素を接続します。

これらの手順を完了したら、さらに入力要素を追加して同じデータセットに接続することで、フォームを拡張することができます。

始める前に：

サイトに CMS を追加してください。

エディタで、カスタムフォームを作成したいページに移動し、ドロップダウン要素を追加します。

Wix エディタ

Editor X

Wix Studio エディタ

エディタにアクセスします。
入力要素を追加するページに移動します。
エディタ左側で「パーツを追加」をクリックします。
「入力欄」をクリックします。
「ドロップダウン」をクリックします。
使用したいドロップダウンをクリックして、ページにドラッグします。

ステップ 2 | CMS に接続する

ドロップダウンを、回答を保存する CMS コレクションに接続するデータセットに接続します。

ドロップダウンリストに表示されるオプションは、手動で追加するか、別の CMS コレクションのアイテムを使用することができます。CMS のアイテムを使用するには、ドロップダウンリストを別のコレクションのフィールドに接続する別のデータセットに接続します。

Wix エディタ

Editor X

Wix Studio エディタ

エディタで追加したドロップダウン要素をクリックします。
「CMS に接続」アイコンをクリックします。
回答内容を保存するコレクションにバインドするデータセットに接続します：
- ページにデータセットがない場合：
  1. 右側で「＋データセットを追加」をクリックします。次に、接続するコレクションを選択し、データセット名を入力して「作成」をクリックします。
  2. 「コンテンツを回収」をクリックします。
- ページ上に既にデータセットがある場合：
  1. 「コンテンツを回収」をクリックします。
  2. 「データセットを選択」ドロップダウンをクリックし、該当するデータセットを選択します。または、「データセットを追加」をクリックして新しいデータセットを作成し、接続するコレクションを選択し、データセット名を入力して「作成」をクリックすることもできます。
「Value を接続」ドロップダウンをクリックし、「新しいフィールドを追加」を選択します。
1. 新しいコレクションフィールドの「フィールド名」を入力します。
2. ドロップダウンから「フィールドタイプ」を選択します。フィールドタイプによって、フィールドに格納できるデータの種類が決まります。
3. 「追加」をクリックします。

「リストアイテムを接続」トグルをクリックして、要素の選択肢を管理する場所を選択します：
- 有効：選択肢に別の CMS コレクションのフィールドを使用します。該当するデータセットを接続し、「ラベルと値を接続」ドロップダウンから使用するフィールドを選択します。
- 無効：「選択肢を管理」をクリックして、CMS とは別に要素の選択肢を作成します。

ステップ 3 | データセットモードを設定する

データセットはコレクションとページ要素間の接続を制御するため、各データセットが正しいモードであることを確認してください。回答コレクションに接続されているデータセットで、モードを「書き込み」に設定します。これにより、ドロップダウンの選択内容を書き込み、送信時にコレクションに追加することができます。

新しいデータセットを介してドロップダウンリストアイテムを別のコレクションに接続した場合、データセットは正しい権限である「読み取り＆書き込み」に自動的に設定されます。ただし、既存のデータセットに接続した場合は、必ず「読み取り＆書き込み」または「読み取り」に設定してください。これにより、ドロップダウン入力要素はコレクションのアイテムを読み取り、表示してリストオプションで使用できるようになります。

Wix エディタ

Editor X

Wix Studio エディタ

右側のパネルで、最初の「データセットを選択」ドロップダウンで「データセット設定」をクリックします。このデータセットは回答内容を保存するコレクションに接続します。

「データセットモード」ドロップダウンをクリックし、「書き込み」を選択します。

（リストアイテムを CMS に接続した場合）リストアイテムに接続されたデータセットのモードを設定します：
1. パネル上部の「ドロップダウン要素に戻る」をクリックします。
2. 「リスト接続」セクションで選択したデータセット下にある「データセット設定」をクリックします。
3. 「データセットモード」ドロップダウンをクリックし、「読み取り」または「読み取り＆書き込み」を選択します。
4. （オプション）「＋フィルターを追加」をクリックし、フィルターを作成してリストから特定のアイテムを除外します。
5. （オプション）「＋新規並び替えを追加」をクリックして、任意のリストに表示されるアイテムの順番を選択します。

ステップ 4 | コレクションの権限を設定する

回答内容を保存するコレクションの権限を設定します。訪問者がコンテンツを追加できる「フォームの回答」など、プリセットの権限設定から選択できます。必要に応じて権限をカスタマイズして、誰がコレクションアイテムを追加、編集、表示、削除できるかを制御できます。

Wix エディタ

Editor X

Wix Studio エディタ

エディタ左側で「CMS」をクリックします。
「コレクション」をクリックします。
コレクションセットにマウスオーバーして回答を回収し、「その他のアクション」アイコンをクリックします。
「権限・プライバシー」をクリックします。

「このコレクションに保存するコンテンツの種類」ドロップダウンをクリックし、「フォームの回答」を選択します。必要に応じて別のオプションを選択し、ドロップダウンをクリックしてコンテンツを表示、追加、削除、更新できるユーザーを調整できます。コレクションの権限を設定する方法はこちら

「保存する」をクリックします。

ステップ 5 | 送信ボタンを作成する

訪問者がドロップダウン要素を選択した後に、その選択肢を送信する方法を作成する必要があります。ボタンまたは画像を追加し、回答コレクションに接続している同じデータセットに接続します。次に、ボタンまたは画像のクリックアクションを「送信」に設定します。これにより、送信ボタンをクリックした際にドロップダウンの選択肢を回答コレクションに書き込み、新しいアイテムを作成することができます。

他の入力要素を同じデータセットに接続すると、送信ボタンもその入力内容をコレクションに送信します。

Wix エディタ

Editor X

Wix Studio エディタ

エディタ左側で「パーツを追加」をクリックします。
「ボタン」をクリックします。
送信ボタンとして使用するボタンを、「おすすめボタン」、「テキスト・アイコンボタン」、「アイコンボタン」、または「画像ボタン」から選択し、クリックしてページにドラッグします。
ヒント：画像を追加して送信ボタンとして使用することもできます。

「テキスト・アイコンの変更」をクリックし、ボタンに表示するテキスト（例：「送信」など）を入力します。
「CMS に接続」アイコンをクリックします。
「データセットを選択」ドロップダウンをクリックし、回答コレクションに接続されているデータセットを選択します。
「クリック時の動作を選択」ドロップダウンをクリックし、「送信」を選択します。
（オプション）送信が成功または失敗したときに表示される成功メッセージと失敗メッセージを追加します：
1. 「＋完了メッセージを追加」、「＋失敗メッセージを追加」の順にクリックします。
2. 両方のメッセージをクリックして、表示したい場所にドラッグします。メッセージは同時に表示されないため、重複した内容でも構いません。
3. 各メッセージの「テキストを編集」をクリックして、メッセージを編集します。
ボタンを選択し、「CMS に接続」アイコンをクリックします。次に、「完了時の移動先」ドロップダウンをクリックし、オプションを選択します：
- キャンセル：訪問者はフォームを送信した後も同じページにとどまります。
- リンク：訪問者は、フォームを送信した後に別のページにリダイレクトされます。「リンクを選択」下で「選択」をクリックし、リンクを設定します。

ボタンをクリックし、「デザイン」アイコンを選択して送信ボタンの外観をカスタマイズします。

ドロップダウン設定からタイトル、プレースホルダテキスト、その他のオプションを設定します。デザインパネルから要素の外観をカスタマイズし、レイアウトパネルから配置、間隔、余白を調整します。

Wix エディタ

Editor X

Wix Studio エディタ

エディタでドロップダウン要素をクリックします。
「設定」をクリックし、以下を編集します：
- 項目タイトル：ドロップダウン要素の上部に表示されるタイトルを入力します。
- 読み込み時に表示：訪問者がドロップダウン要素をクリックする前に表示される最初のテキストを選択します。
  - なし：訪問者がドロップダウン要素をクリックする前に、空白のボックスが表示されます。
  - プレースホルダテキスト：ドロップダウン要素に独自のテキストを使用します（例：「色を選択」）。「プレースホルダテキスト」にテキストを入力します。
  - ドロップダウンの項目：ドロップダウンリストからアイテムを表示します。リストを CMS に接続した場合、表示されるアイテムは、訪問者が選択できる最初のドロップダウン選択肢です。リストアイテムを CMS に接続していない場合は、「表示するリストアイテムを選択」をクリックして、表示するアイテムを選択します。
  - オートコンプリート：トグルをクリックして、訪問者がドロップダウンに検索内容を入力したときの動作を設定します：
    - 有効：入力したテキストと一致する選択肢のみがドロップダウンに表示されます。
    - 無効：すべての選択肢がドロップダウンに表示されます。
- ドロップダウンリストの種類：オプションを選択します：
  - カスタム：デザインパネルでドロップダウン要素をカスタマイズします。モバイルでは、リストの種類は常に「ブラウザ」に設定されます。
  - ブラウザ：ドロップダウン要素にブラウザの既定のスタイルを使用します。
- この項目は：訪問者が回答を提出する前にこのドロップダウンリストからアイテムを選択する必要がある場合は、「必須項目」チェックボックスを選択します。

「レイアウト」アイコンをクリックしてテキスト配置とパーツの余白と間隔を調整します。
「デザイン」アイコンをクリックしてプリセットデザインを選択し、「デザインをカスタマイズ」を選択してドロップダウン要素の外観をさらに調整します。
（オプション）「アニメーション」アイコンをクリックして、ドロップダウン要素にアニメーションを追加します。

公開する準備はできましたか？

エディタ右上の「プレビュー」をクリックして、新しいカスタムドロップダウンフォームをテストします。問題がなければ、「公開」をクリックして変更内容を公開します。

サンドボックスを有効にした場合は、サンドボックスコレクションをライブコレクションに同期してデータベースの変更を公開します。