Built on WIX Headless

ドキュメント ウィジェット Form ウィジェット

Form ウィジェット

CMS for Harmony の Form 要素で、訪問者の送信内容を CMS コレクションに収集 — Contacts、Members、Automations、Pro の pay-on-submit(Wix Checkout)にも対応。

Form ウィジェットは単一の要素です。コレクションを接続し、フィールドとラベルを選び、訪問者に送信させます — 画像、動画、Media Gallery のアップロードも含みます。長いフォームをステップに分割したり、条件を満たしたときだけフィールドを表示したり、Wix コンタクトの作成、サイトメンバーの登録、Wix Automations のトリガーも可能です。Pro では、送信時に Wix Checkout で決済も収集できます。

できること

  • AI setup — フィールドと送信文言を平易な言葉で説明;AI setup を参照
  • テキスト、Number、URL、ドロップダウン、電話(国番号付き E.164)、Color(ネイティブカラーピッカー;HEX で保存)、Date / Date & time / Time ピッカー、画像、Video アップロード、Media Gallery の複数アップロード
  • テキストフィールドの Radio buttons と Checkbox(複数選択)、カスタム Options
  • Multi-step form — Next / Back と進捗でページ分割;エディタの Preview step
  • Show only when — 別フィールドが空/空でない/選択値のいずれかに一致するまで非表示
  • Autosave — 入力中に保存。メンバーはコレクションの下書きを再開し、それ以外は送信までこのブラウザに下書きを保持
  • 1つのパネルで送信ラベルを設定(初期バージョンの別々の Text Input / Dropdown / Submit Button / Form Dataset ウィジェットを置き換え)
  • Update displays on this page — 送信成功後、同じページで同じコレクションを使う Table、Repeater、Slideshow、Media Gallery、Calendar、Dynamic Page ウィジェットが自動的に再読み込みされます
  • Contacts — Create contact:マップしたフォームフィールドから Wix コンタクトを作成または更新
  • Members — Create member:login email とパスワードでサイトメンバーを登録
  • Wix Automations — 送信成功ごとに Form submitted トリガー
  • Payments(Pro)— pay-on-submit:送信を保存し、Wix Checkout を開き、注文詳細を送信レコードに書き戻す

セットアップ

パネルの AI setup で平易な言葉から始め、その後 Manual で調整します。詳細: AI setup。

  1. Add → Elements → Installed Apps → CMS for Harmony から Form を追加します(同じウィジェットを複数回追加できます)。
  2. 送信を受け取るコレクションを接続します。
  3. 訪問者が入力するフィールドとラベルを選びます(Number と URL フィールドは対応する入力タイプになります)。
  4. 必要に応じて Steps で Multi-step form をオンにし Field setup で割り当て、フィールドごとに Show only when を設定します。
  5. 必要に応じて Update displays on this page、Create contact、Create member、Enable payments(Pro)をオンにします — 下記参照。
  6. 公開し、ライブ(またはプレビュー)サイトで送信をテストします。決済チェックアウトはライブサイトで動作します。

送信はコレクションに保存されるので、必要なら後で Table や Repeater で表示できます。Update displays on this page を使うと、同じページの一覧は送信成功直後に更新されます。

Steps

  1. Steps で Multi-step form をオンにします。
  2. ステップを追加し、各 Step title を設定します。
  3. Field setup で各フィールドを Step に割り当てます。
  4. エディタの Preview step でキャンバス上に1ページずつ表示できます。
  5. ライブフォームでは訪問者が Next / Back を使い、送信は最後のステップで実行されます。

Field setup

各フィールドで Label、Placeholder、Required、Input type を設定します。テキストフィールドはカスタム Options 付きの Radio buttons と Checkbox(複数)に対応します。マルチステップ時は Step を割り当てます。Show only when は別フィールドが空/空でない/Equals any of の選択値になるまで非表示にし、Required は表示中のみ適用されます。

Update displays on this page

Form パネルで Update displays on this page をオンにします。送信成功後、同じページで同じコレクションを使う Table、Repeater、Slideshow、Media Gallery、Calendar、Dynamic Page ウィジェットが自動的に再読み込みされます — 訪問者はブラウザを更新せずに新規または更新されたアイテムを確認できます。

Autosave

Submit で Autosave をオンにすると、入力中に保存されます。Editable form と Autosave は同時にオンにできません。

  1. Autosave をオンにします。
  2. Submitted field(boolean)を選びます。コレクションにまだない場合は Add submitted field で Submitted というフィールドを作成します。このフィールドはフォームに表示されません。
  3. メンバーには自分のアイテムへの Read と Update が必要です(不足しているときはパネルの Fix を使えます)。

メンバーは、submitted field が false の下書きアイテムをコレクションに保存します。フォームを開き直すとその下書きが再開されます。Submit は同じアイテムを更新し、フィールドを true にします。未完了の下書きを一覧から隠すときは、このフィールドで絞り込みます。

ログインしていない訪問者は、送信するまでこのブラウザに下書きを保持します。送信すると新しいコレクションアイテムが書き込まれ、ブラウザの下書きは消えます。

フォームには Saving…、Saved、または Couldn’t save. Keep editing — we’ll try again. と表示されます。パスワードは下書きに保存されません。

Contacts

Form パネルの Contacts セクションで、送信時に Wix コンタクトを作成または更新します。

  1. Create contact をオンにします。
  2. Email(必須)と任意のスロットをマップします:Phone、First name、Last name、Full name、Company、Job title。
  3. CMS にも値を保存したい場合はコレクションフィールドを優先します。Add field (contact) はコレクションに保存されないフォーム専用フィールド用 — パネルに短い注記と Add to collection が表示されます。
  4. 任意のマッピングをクリアするには、ドロップダウン横の X を使います。Add field (contact) のマッピングをクリアすると、そのフォーム専用フィールドもフォームから削除されます。Contacts がオンの間 Email は必須のため、クリア操作はありません。
  5. 公開してテスト送信し、サイトの Contacts にコンタクトが表示されることを確認します。

Create member がオンのとき、Contacts も有効のまま login email とプロフィールフィールドがマップされます。

Members

Members セクションで、訪問者が送信時にサイトメンバーアカウントを作成できます。

  1. Create member をオンにします(Contacts も有効になります)。
  2. Login email(必須)を設定 — コレクションのメールフィールドをマップするか Add field (member) を使います。
  3. メンバー/コンタクトに載せたい他の contact スロットをマップします(Contacts と同じマッピング)。
  4. ライブフォームでは訪問者に Password と Confirm password が表示されます(Field setup でラベル/プレースホルダーを編集可能)。パスワードはコレクションに書き込まれません。
  5. 公開し、ライブサイトで登録をテストします。

Wix Automations

Form の送信成功ごとに Form submitted イベントが Wix Automations に報告されます(best-effort;送信の保存はブロックしません)。

Automations では CMS for Harmony の Form submitted トリガーを選びます。ペイロードには submission id、collection id、submitted time、payment-pending flag、フィールド値の JSON 文字列、Contacts がマップされている場合は email、name、phone、利用可能なら contact id が含まれます。

メール通知、CRM 連携、サイトで既に使っている Automations アクションに利用できます。

Form payments (Pro)

Form の決済はカタログ決済(表示上の Add to cart / Buy now)とは別です。ここでは訪問者がフォーム送信時に固定額または入力額を支払います。

  1. コレクションを接続し、Form パネルの Payments セクションを開きます。
  2. Enable payments をオンにします(必要なら Wix Stores をインストール)。
  3. Item name(チェックアウトの明細名)を設定します。
  4. Price を選択:Fixed amount または Visitor enters amount(ライブフォームに必須の Amount フィールドを追加)。
  5. 支払いボタンの Label を設定します。
  6. Save to submission で Add fields(または手動マッピング)を使い、Order ID、Total paid、Payment status を設定 — 支払い成功後のチェックアウト後に記入されます。
  7. 公開し、ライブサイトでテストします。

Pro がない場合、決済トグルはオフのままで、パネルにアップグレード案内が表示されます。