CMS：コレクションに送信する入力要素を含むカスタムフォームを作成する | サポートセンター

CMS：コレクションに送信する入力要素を含むカスタムフォームを作成する

読了時間：21分

訪問者が入力要素を使用して CMS コレクションに直接情報を送信できるカスタムフォームを作成します。入力要素には、テキストボックス、ドロップダウンリスト、日付ピッカーなどが含まれます。この記事では、フォームの回答を格納するコレクションを作成して入力要素と送信ボタンを追加し、データセットを使用してこれらを接続する方法について説明します。

よりシンプルな既成のカスタムフォームが必要な場合：

Wix フォームには、お問い合わせフォーム、注文フォーム、参加登録フォームなど、複雑な設定なしで使えるテンプレートフォームが揃っています。

始める前に：

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

ステップ 1 |コレクションを作成して権限を設定する

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

この時点でコレクションにフィールドを追加できますが、後で入力要素を接続する際に追加することをおすすめします（ステップ 3）。こうすることで、各タイプの入力要素に接続できるフィールドタイプのみを追加していることを確認できます。

フォームの回答を格納するコレクションを作成する方法：

サイトダッシュボードの「CMS」にアクセスします。
「＋コレクションを作成」をクリックします。
コレクション名を入力します。
「複数のアイテム（デフォルト）」を選択したまま、「作成」をクリックします。
「その他のアクション」をクリックし、「権限・プライバシー」を選択します。

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

ステップ 2 | サイトに入力要素を追加する

カスタムフォームを作成するサイトのページまたはセクションに移動します。次に、訪問者が回答を送信するために使用するすべての入力要素を追加します。それぞれの入力要素について、収集できるデータの種類や接続できるフィールドタイプに制限があるため注意してください。

Wix エディタ

Editor X

Wix Studio エディタ

エディタにアクセスします。
カスタムフォームを作成するページまたはセクションに移動します。
エディタ左側で「パーツを追加」をクリックします。
「入力欄」をクリックします。
追加したい入力要素の種類をクリックします。
該当する入力要素をクリックしてページにドラッグします。

上記の手順 3〜6 を繰り返して、フォームに必要な数の入力要素を追加します。

ステップ 3 | 入力要素をコレクションに接続する

各入力要素を、コレクションに接続するデータセットに接続します。次に、回収するデータの種類に一致する新しいコレクションフィールドに入力値を接続します。

ドロップダウンリストとセレクトタグリストに表示されるオプションには、別のコレクションのアイテムを使用できます。リストアイテムを別のコレクションのフィールドに接続する別のデータセットに接続してください。

Wix エディタ

Editor X

Wix Studio エディタ

エディタで、追加した入力要素をクリックします。
「CMS に接続」アイコンをクリックします。
（必要な場合）「コンテンツを回収」をクリックして、入力要素を使用して訪問者の送信内容を保存します。

新しいデータセットを作成するか、既存のデータセットを接続します：
- 新しいデータセットを作成する：
  1. 「データセットを作成」をクリックします。ページ上に既にデータセットが存在する場合は、「データセットを接続」ドロップダウンをクリックし、「新しいデータセットを作成」を選択します。
  2. 「コレクションを選択」ドロップダウンをクリックし、該当するコレクションを選択します。
  3. （オプション）「データセット名」をクリックし、データセットの名前を入力します。
  4. 「作成」をクリックします。
- 既存のデータセットを接続する：
  1. 「データセットを接続」ドロップダウンをクリックします。
  2. 接続したいデータセットを選択します。

ドロップダウン要素を選択し、それを接続するデータセットを作成しているスクリーンショット。

入力要素を新しいコレクションフィールドに接続します：
1. 「Value を接続」ドロップダウンをクリックし、「新しいフィールドを追加」を選択します。
2. 新しいコレクションフィールドの「フィールド名」を入力します。
3. ドロップダウンから「フィールドタイプ」を選択します。フィールドタイプによって、フィールドに格納できるデータの種類が決まります。
4. 「追加」をクリックします。

ドロップダウン入力要素を接続する際に新しいフィールドを追加するスクリーンショット。

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

ドロップダウン要素の選択肢のリストをコレクションに接続しているスクリーンショット。

カスタムフォームの入力要素ごとに、これらの手順を繰り返します。

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

データセットはページ要素とコレクション間の接続を制御するため、各データセットが正しいモードであることを確認してください。入力した内容でコレクションにアイテムを追加できるように、回答コレクションに接続するデータセットのモードを「書き込み」に設定します。

ドロップダウンリストまたはセレクトタグリストを別のデータセットとコレクションに接続した場合、データセットは正しい権限である「読み取り＆書き込み」に自動的に設定されます。ただし、既存のデータセットに接続した場合は、モードを「読み取り＆書き込み」または「読み取り」に設定してください。これにより、選択肢のリストに他のコレクションのアイテムを表示することができます。

Wix エディタ

Editor X

Wix Studio エディタ

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

リストアイテムに接続されたデータセットでモードを選択しているスクリーンショット。

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

訪問者がカスタムフォームの入力要素を操作したら、その回答を送信してもらわなければいけません。ボタンまたは画像を追加し、回答コレクションに接続している同じデータセットに接続します。次に、ボタンまたは画像のクリックアクションを「送信」に設定します。訪問者が送信ボタンをクリックすると、関連するフィールドの各入力要素の値を使用してコレクションに新しいアイテムが作成されます。

Wix エディタ

Editor X

Wix Studio エディタ

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

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