CMS：ドロップダウン入力要素を使用してカスタムフォームを設定する
27分
訪問者がドロップダウン入力を使用して選択内容を CMS コレクションに直接送信できるカスタムフォームを作成します。この記事では、ドロップダウン入力要素と送信ボタンを追加する手順について説明します。この手順では、訪問者の回答を CMS コレクションに保存できるデータセットに両方の要素を接続します。
これらの手順を完了したら、さらに入力要素を追加して同じデータセットに接続することで、フォームを拡張することができます。
始める前に：
サイトに CMS を追加してください。
ステップ 1 | ドロップダウン要素を追加する
エディタで、カスタムフォームを作成したいページに移動し、ドロップダウン要素を追加します。
Wix エディタ
Wix Studio エディタ
- エディタに移動します。
- 入力要素を追加するページに移動します。
- エディタ左側で「パーツを追加」
をクリックします。 - 「入力欄」をクリックします。
- 「ドロップダウン」をクリックします。
- 使用したいドロップダウンをクリックして、ページにドラッグします。
ヒント：
訪問者が送信する必要がある情報の種類ごとに、入力要素を追加します。追加する入力要素によって、接続できるフィールドの種類と保存できるデータの種類が決まります。
ステップ 2 | CMS に接続する
ドロップダウンを、回答を保存する CMS コレクションに接続するデータセットに接続します。
ドロップダウンリストに表示されるオプションは、手動で追加するか、別の CMS コレクションのアイテムを使用することができます。CMS のアイテムを使用するには、ドロップダウンリストのオプションを、別のコレクションのフィールドに接続する別のデータセットに接続します。
Wix エディタ
Wix Studio エディタ
- エディタで、回答を保存するコレクションに接続するデータセットを追加します：
- 左側の「CMS」
をクリックします。 - 「コンテンツパーツを追加」をクリックします。
- 「フォームデータセット」をクリックします。
- 「コレクションを選択」ドロップダウンをクリックし、データを保存するコレクションを選択します。
- データセットに名前を付けます（例：「回答」）。
- 「作成」をクリックします。
- 左側の「CMS」
- ドロップダウン要素をクリックし、右側の「ドロップダウンを接続」パネルで「コンテンツを収集」を選択します。
- 「データセットを選択」ドロップダウンをクリックし、「回答」データセットを選択します。
- ドロップダウン入力要素を、回答を保存する新しいコレクションフィールドに接続します：
- 「Value を接続」ドロップダウンをクリックし、「新しいフィールドを追加」を選択します。
- 新しいコレクションフィールドの「フィールド名」を入力します。
- （コーディングのみ）サイトのコードでこのフィールドを識別する「フィールドキー」を入力します。これは後から変更することはできません。
- 「フィールドタイプ」ドロップダウンをクリックし、収集したいデータのタイプに応じて「テキスト」、「番号（数値）」、「参照」フィールドタイプから選択します。
ヒント：「参照」フィールドタイプの場合は、ドロップダウンから参照先コレクションを選択します。 - 「追加」をクリックします。
- 「コレクションのオプションを表示」トグルをクリックし、ドロップダウンの選択肢を管理する場所を選択します：
- 有効：選択肢に別の CMS コレクションのフィールドを使用します。該当するデータセットを接続し、「ラベルと値を接続」ドロップダウンから使用するフィールドを選択します。
- 無効：「選択肢を管理」をクリックして、CMS とは別に要素の静的選択肢を作成します。
- （他の入力要素を追加した場合）入力要素を「回答」データセットに接続します：
- 該当する入力要素をクリックします。
- 「CMS に接続」アイコン
をクリックします。 - 上記の手順 3〜4 を繰り返し、入力内容を「回答」データセットに接続します。
- カスタム CMS フォームに追加したい入力要素ごとに、この手順を繰り返します。
データセットモードについてはどうすればよいですか？
- 「フォームデータセット」を追加した場合は、「書き込み」モードに正しく設定されています。このモードでは、データセットは、ドロップダウン入力要素の回答に基づいて、「回答」コレクションに新しいアイテムを追加することができます。
- ドロップダウン要素で訪問者が選択するリストオプションを接続している場合は、別のデータセットが「読み取り」または「読み取り・書き込み」モードになっていることを確認してください。
- CMS フォームを使用して既存のコレクションアイテムを更新する必要がある場合は、「回答」データセットを「読み取り・書き込み」モードに設定してください。コレクションの権限も、関連する役割を持つユーザーがコンテンツを更新できるようにします。
ステップ 4 | コレクションの権限を設定する
フォームの回答を保存するコレクションの権限 を設定します。訪問者がコンテンツを追加できるプリセットの「コンテンツを収集」設定を選択し、追加できるユーザーを指定できます。または、「高度」権限を選択して、コレクションアイテムを表示、追加、更新、削除できるユーザーを制御することもできます。
Wix エディタ
Wix Studio エディタ
- エディタ左側で「CMS」
をクリックします。 - 「コレクション」をクリックします。
- 「回答」コレクションにマウスオーバーし、「その他のアクション」アイコン
をクリックします。 - 「権限・プライバシー」をクリックします。
- コレクションで使用する権限を選択します：
- コレクションで使用する権限の種類を選択します：
コンテンツを収集
アドバンスプラン
ステップ 4 | 送信ボタンを作成する
訪問者が入力要素で入力または選択した回答を送信する方法を作成する必要があります。通常のボタンまたは画像を追加して「送信」ボタンを作成し、データセットの「送信」をクリックした際の動作に接続します。訪問者が「送信」ボタンをクリックすると、ドロップダウン入力内容と「送信」データセットに接続されているその他の入力内容がコレクションに保存されます。データセットモードとコレクションの権限に応じて、値は新しいアイテムとして追加されるか、既存のアイテムを更新するために使用されます。
また、以下のデータセットアクション用に個別のボタンを作成することもできます：
- 新機能：コレクションアイテムを追加または更新し（データセットモードに応じて）、入力内容をリセットして新しい値を受け付けます。
- 元に戻す：まだ送信していない入力要素の値はリセットされます。
- 削除：選択したアイテムをコレクションから削除します（「読み取り・書き込み」モードでのみ）。
- 次のページ / 前のページ：訪問者が編集するアイテムをギャラリーやリピーターに表示している場合は、これらのボタンを追加して、訪問者がアイテムの「ページ」を移動できるようにすることができます。動的アイテムページにフォームを作成した場合は、代わりに次の動的ページ / 前の動的ページのクリックアクションを使用します。
Wix エディタ
Wix Studio エディタ
- エディタ左側で「パーツを追加」 をクリックします。
- 「ボタン」をクリックします。
- 送信ボタンとして使用するボタンを、「おすすめボタン」、「テキスト・アイコンボタン」、「アイコンボタン」、または「画像ボタン」から選択し、クリックしてページにドラッグします。
ヒント：画像を追加して送信ボタンとして使用することもできます。
- 「テキスト・アイコンの変更」をクリックし、ボタンに表示するテキスト（例：「送信」など）を入力します。
- 「CMS に接続」アイコン をクリックします。
- 「データセットを選択」ドロップダウンをクリックし、回答コレクションに接続されているデータセットを選択します。
- 「クリック時の動作を選択」ドロップダウンをクリックし、「送信」を選択します。
- （オプション）送信が成功または失敗したときに表示される成功メッセージと失敗メッセージを追加します：
- 「＋完了メッセージを追加」、「＋失敗メッセージを追加」の順にクリックします。
- 両方のメッセージをクリックして、表示したい場所にドラッグします。メッセージは同時に表示されないため、重複した内容でも構いません。
- 各メッセージの「テキストを編集」をクリックして、メッセージを編集します。
- ボタンを選択し、「CMS に接続」アイコン をクリックします。次に、「完了時の移動先」ドロップダウンをクリックし、オプションを選択します：
- キャンセル：訪問者はフォームを送信した後も同じページにとどまります。
- リンク：訪問者は、フォームを送信した後に別のページにリダイレクトされます。「リンクを選択」下で「選択」をクリックし、リンクを設定します。
- ボタンをクリックし、「デザイン」アイコン
を選択して送信ボタンの外観をカスタマイズします。
ステップ 6 | ドロップダウン要素をカスタマイズする
ドロップダウン設定からタイトル、プレースホルダテキスト、その他のオプションを設定します。デザインパネルから要素の外観をカスタマイズし、レイアウトパネルから配置、間隔、余白を調整します。
Wix エディタ
Wix Studio エディタ
- エディタでドロップダウン要素をクリックします。
- 「設定」をクリックし、以下を編集します：
- 項目タイトル：ドロップダウン要素の上部に表示されるタイトルを入力します。
- 読み込み時に表示：訪問者がドロップダウン要素をクリックする前に表示される最初のテキストを選択します。
- なし：訪問者がドロップダウン要素をクリックする前に、空白のボックスが表示されます。
- プレースホルダテキスト：ドロップダウン要素に独自のテキストを使用します（例：「色を選択」）。「プレースホルダテキスト」にテキストを入力します。
- ドロップダウンの項目：ドロップダウンリストからアイテムを表示します。リストを CMS に接続した場合、表示されるアイテムは、訪問者が選択できる最初のドロップダウン選択肢です。リストアイテムを CMS に接続していない場合は、「表示するリストアイテムを選択」をクリックして、表示するアイテムを選択します。
- オートコンプリート：トグルをクリックして、訪問者がドロップダウンに検索内容を入力したときの動作を設定します：
- 有効：入力したテキストと一致する選択肢のみがドロップダウンに表示されます。
- 無効：すべての選択肢がドロップダウンに表示されます。
- ドロップダウンリストの種類：オプションを選択します：
- カスタム：デザインパネルでドロップダウン要素をカスタマイズします。モバイルでは、リストの種類は常に「ブラウザ」に設定されます。
- ブラウザ：ドロップダウン要素にブラウザの既定のスタイルを使用します。
- この項目は：訪問者が回答を提出する前にこのドロップダウンリストからアイテムを選択する必要がある場合は、「必須項目」チェックボックスを選択します。
- 「レイアウト」アイコン
をクリックしてテキスト配置とパーツの余白と間隔を調整します。 - 「デザイン」アイコン
をクリックしてプリセットデザインを選択し、「デザインをカスタマイズ」を選択してドロップダウン要素の外観をさらに調整します。 - （オプション）「アニメーション」アイコン
をクリックして、ドロップダウン要素にアニメーションを追加します。
公開する準備はできましたか？
エディタ右上の「プレビュー」をクリックして、新しいカスタムドロップダウンフォームをテストします。問題がなければ、「公開」をクリックして変更内容を公開します。
サンドボックスを有効にした場合は、サンドボックスコレクションをライブコレクションに同期してデータベースの変更を公開します。
よくある質問
ドロップダウン要素を CMS に接続する際のよくある質問とその回答については、以下の質問をクリックしてください。
フォームの回答が CMS コレクションに保存されない場合は、どうすればよいですか？
コレクションに保存された回答内容をエクスポートすることはできますか？
フォームの回答を受信した際の動作を自動化することはできますか？
サイト訪問者は入力要素を使用して、サイトに表示されるコンテンツをフィルターできますか？
フォームの回答内容をテーブル、ギャラリー、またはリピーターに表示することはできますか？
サイト会員が自分の回答を更新できるようにするにはどうすればよいですか？
ドロップダウン要素を「参照」フィールドに接続する場合、オプションリストはどこから表示されますか？
複数のフォームを 1つの CMS コレクションに接続するにはどうすればよいですか？