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

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

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

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

始める前に：

サイトに CMS を追加します。
このプロセスの概要については、CMS ガイド動画をご覧ください。（英語）

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

カスタムフォームの回答を保存するコレクションを作成し、コレクションの権限を設定します。「コンテンツを収集」の権限設定を選択でき、ライブサイトからのコンテンツの追加または表示を許可するユーザーを選択できます。または、「カスタム」を選択して、役割ごと（管理者、アイテムの作成者、サイト会員限定、すべての訪問者）にコンテンツを閲覧、追加、更新、削除できるユーザーを指定します。

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

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

サイトダッシュボードの「CMS」にアクセスします。
「コレクションを作成」をクリックします。
「白紙テンプレート」をクリックします。
ヒント：または「AI で作成」をクリックして、AI（人工知能）にコレクションを作成してもらいます。
「次へ」をクリックします。
コレクション名を入力します。
（コーディングのみ）コードで使用するコレクション ID を入力します。
「複数のアイテムコレクション（デフォルト）」を選択したまま、「作成」をクリックします。
「その他のアクション」をクリックし、「権限・プライバシー」を選択します。

コレクションに使用する権限を選択します：
注意：サイト所有者と共同管理者がライブサイトにログインすると、常に「管理者」として扱われます。つまり、サイト所有者と共同管理者は、常にライブサイトからコレクションのコンテンツを表示、追加、更新、または削除することができます。このルールは、選択しているコレクションの権限に関係なく適用されます。

コンテンツを収集

高度

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

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

コンテンツの収集に設定できる入力要素は？

コンテンツの収集が可能な入力要素は次の通りです：テキスト入力、テキストボックス、リッチテキスト、ラジオボタン、マルチチェックボックス、シングルチェックボックス、ドロップダウン、セレクトタグ、日付ピッカー、時間ピッカー、スライダー、アップロードボタン、入力用評価、住所入力、スイッチ、署名の入力。

Wix エディタ

Wix Studio エディタ

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

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

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

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

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

Wix エディタ

Wix Studio エディタ

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

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

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

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

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

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

Wix エディタ

Wix Studio エディタ

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

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

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

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

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

Wix エディタ

Wix Studio エディタ

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

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