header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

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

20分
訪問者が入力要素を使用してコレクションに直接情報を送信できるカスタム CMS フォームを作成します。入力要素には、テキストボックス、ドロップダウンリスト、日付ピッカーなどが含まれます。この記事では、フォームの回答を格納するコレクションを作成して入力要素と送信ボタンを追加し、データセットを使用してこれらを接続する方法について説明します。
入力要素を使用してカスタムフォームを作成しているスクリーンショット。
よりシンプルな既成のカスタムフォームが必要な場合:
Wix フォームには、お問い合わせフォーム、注文フォーム、参加登録フォームなど、複雑な設定なしで使えるテンプレートフォームが揃っています。
始める前に:

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

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

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

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

  1. サイトダッシュボードの「CMS」にアクセスします。
  2. コレクションを作成」をクリックします。
  3. 白紙テンプレート」をクリックします。
    ヒント:または「AI で作成」をクリックして、AI(人工知能)にコレクションを作成してもらいます。
  4. 次へ」をクリックします。
  5. コレクション名を入力します。このコレクションを「回答」コレクションと呼ぶことにします。
  6. (コーディングのみ)コードで使用するコレクション ID を入力します。
  7. 複数のアイテムコレクション(デフォルト)」を選択したまま、「作成」をクリックします。
  8. その他のアクション」をクリックし、「権限・プライバシー」を選択します。
コレクションで「権限・プライバシー」を選択しているスクリーンショット。
  1. コレクションで使用する権限を選択します:

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

カスタムフォームを作成するエディタのページまたはセクションに移動します。次に、訪問者が回答を送信するために使用するすべての入力要素を追加します。それぞれの入力要素について、収集できるデータの種類や接続できるフィールドタイプに制限があるため注意してください。
コンテンツの収集に設定できる入力要素は?
コンテンツの回収が可能な入力要素は次の通りです:テキスト入力、テキストボックス、リッチテキスト、ラジオボタン、マルチチェックボックス、シングルチェックボックス、ドロップダウン、セレクトタグ、日付ピッカー、時間ピッカー、スライダー、アップロードボタン、入力用評価、住所入力、スイッチ、署名の入力。
Wix エディタ
Wix Studio エディタ
  1. エディタに移動します
  2. カスタムフォームを作成するページまたはセクションに移動します。
  3. エディタ左側で「パーツを追加 をクリックします。
  4. 入力欄」をクリックします。
  5. 追加したい入力要素の種類をクリックします。
  6. 該当する入力要素をクリックしてページにドラッグします。
エディタでドロップダウン要素を追加しているスクリーンショット。
  1. 上記の手順 3〜6 を繰り返して、フォームに必要な数の入力要素を追加します。
ページに追加された多くの入力要素のスクリーンショット。

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

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

訪問者がドロップダウン要素とセレクトタグ要素で選択するオプションを、別の CMS コレクションのアイテムに接続することもできます。これを行うには、リストオプションを別のコレクションのフィールドに接続する別のデータセットに接続します。このデータセットは、「読み取り」または「読み取り・書き込み」モードに設定する必要があります。
Wix エディタ
Wix Studio エディタ
  1. エディタで、「回答」コレクションに接続するデータセットを追加します:
    1. 左側の「CMS をクリックします。
    2. コンテンツパーツを追加」をクリックします。
    3. フォームデータセット」をクリックします。
    4. コレクションを選択」ドロップダウンをクリックし、「回答」コレクションを選択します。
    5. データセットに名前を付けます(例:「回答」)。
    6. 作成」をクリックします。
  2. 追加した入力要素をクリックします。
  3. CMS に接続」アイコン  をクリックします。
  4. データセットを選択」ドロップダウンをクリックし、「回答」データセットを選択します。ヒント:「コンテンツをフィルター」と「コンテンツを収集」のいずれかを選択するように求められたら、まず「コンテンツを収集」をクリックします。
  5. 入力要素を新しいコレクションフィールドに接続します:
    1. Value を接続」ドロップダウンをクリックし、「新しいフィールドを追加」を選択します。
    2. 新しいコレクションフィールドの「フィールド名」を入力します。
    3. (コーディングのみ)サイトのコードでこのフィールドを識別する「フィールドキー」を入力します。これは後から変更することはできません。
    4. ドロップダウンから「フィールドタイプ」を選択します。フィールドタイプによって、フィールドに格納できるデータの種類が決まります。
    5. 追加」をクリックします。 
データを保存する新しいコレクションフィールドを追加する様子を示したスクリーンショット。
  1. (特定の入力要素にアイテムのリストを接続している場合)「コレクションのオプションを表示」トグルをクリックして、入力要素の選択肢を管理する場所を選択します:
    • 有効:選択肢に別の CMS コレクションのフィールドを使用します。該当するデータセットを接続し、「ラベルと値を接続」ドロップダウンから使用するフィールドを選択します。
    • 無効:「選択肢を管理」をクリックして、CMS とは別に要素の静的選択肢を作成します。
ドロップダウン入力要素に、リストオプションを接続している様子を示したスクリーンショット。
  1. カスタム CMS フォームの入力要素ごとに、これらの手順を繰り返します。
データセットモードについてはどうすればよいですか?
  • 「フォームデータセット」を追加した場合は、「書き込み」モードに正しく設定されています。このモードでは、データセットは、入力要素での回答に基づいてコレクションに新しいアイテムを追加することができます。
  • ドロップダウン要素とセレクトタグ要素で訪問者が選択するオプションを接続している場合、別のデータセットが「読み取り」または「読み取り・書き込み」モードになっていることを確認してください。
  • CMS フォームを使用して既存のコレクションアイテムを更新する必要がある場合は、「回答」データセットを「読み取り・書き込み」モードに設定してください。コレクションの権限も、関連する役割を持つユーザーがコンテンツを更新できるようにします。

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

訪問者が入力要素で入力または選択した回答を送信する方法を作成する必要があります。通常のボタンまたは画像を追加して「送信」ボタンを作成し、データセットの「送信」をクリックした際の動作に接続します。訪問者が「送信」ボタンをクリックすると、「送信」データセットに接続されているすべての入力要素がコレクションに保存されます。データセットモードとコレクションの権限に応じて、値は新しいアイテムとして追加されるか、既存のアイテムを更新するために使用されます。
 
また、以下のデータセットアクション用に個別のボタンを作成することもできます:
  • 新機能:コレクションアイテムを追加または更新し(データセットモードに応じて)、入力内容をリセットして新しい値を受け付けます。
  • 元に戻す:まだ送信していない入力要素の値はリセットされます。
  • 削除:選択したアイテムをコレクションから削除します(「読み取り・書き込み」モードでのみ)。
  • 次のページ / 前のページ:訪問者が編集するアイテムをギャラリーやリピーターに表示している場合は、これらのボタンを追加して、訪問者がアイテムの「ページ」を移動できるようにすることができます。動的アイテムページにフォームを作成した場合は、代わりに次の動的ページ / 前の動的ページのクリックアクションを使用します。
Wix エディタ
Wix Studio エディタ
  1. エディタ左側で「パーツを追加 をクリックします。
  2. ボタン」をクリックします。
  3. 送信ボタンとして使用するボタンを、「おすすめボタン」、「テキスト・アイコンボタン」、「アイコンボタン」、または「画像ボタン」から選択し、クリックしてページにドラッグします。
    ヒント:画像を追加して送信ボタンとして使用することもできます。
送信ボタンとして使用するボタンを追加しているスクリーンショット。
  1. テキスト・アイコンの変更」をクリックし、ボタンに表示するテキスト(例:「送信」など)を入力します。
  2. CMS に接続」アイコン  をクリックします。
  3. データセットを選択」ドロップダウンをクリックし、回答コレクションに接続されているデータセットを選択します。
  4. クリック時の動作を選択」ドロップダウンをクリックし、「送信」を選択します。
  5. (オプション)送信が成功または失敗したときに表示される成功メッセージと失敗メッセージを追加します:
    1. +完了メッセージを追加」、「+失敗メッセージを追加」の順にクリックします。
    2. 両方のメッセージをクリックして、表示したい場所にドラッグします。メッセージは同時に表示されないため、重複した内容でも構いません。
    3. 各メッセージの「テキストを編集」をクリックして、メッセージを編集します。
  6. ボタンを選択し、「CMS に接続」アイコン  をクリックします。次に、「完了時の移動先」ドロップダウンをクリックし、オプションを選択します:
    • キャンセル:訪問者はフォームを送信した後も同じページにとどまります。
    • リンク:訪問者は、フォームを送信した後に別のページにリダイレクトされます。「リンクを選択」下で「選択」をクリックし、リンクを設定します。
「送信」ボタンを設定しているスクリーンショット。
  1. ボタンをクリックし、「デザイン」アイコン  を選択して送信ボタンの外観をカスタマイズします。

ステップ 5 | 入力要素をカスタマイズする

各入力要素をカスタマイズして、サイトの外観と操作感に合った一貫性のあるフォームを作成できます。
Wix エディタ
Wix Studio エディタ
  1. エディタで、任意の入力要素をカスタマイズします。
  2. 設定」をクリックしてフィールドのタイトルを入力したり、必須項目に設定したり、入力タイプに応じてさまざまな設定を調整したりすることができます。
ドロップダウン入力要素をカスタマイズしているスクリーンショット。
  1. レイアウト」アイコン  をクリックして、テキストの配置やその他のレイアウトオプションを調整します。
  2. デザイン」アイコン  をクリックしてプリセットデザインを選択し、「デザインをカスタマイズ」を選択して要素の外観をさらに調整します。
  3. カスタマイズする入力要素ごとに、これらの手順を繰り返します。
公開する準備はできましたか?
エディタ右上の「プレビュー」をクリックして、新しいカスタムフォームをテストします。問題がなければ、「公開」をクリックして変更内容を公開します。

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

よくある質問

入力要素を使用したカスタムフォームの作成に関するよくある質問とその回答については、以下の質問をクリックしてください。