Das Form-Widget ist ein einzelnes Element: Verbinden Sie eine Collection, wählen Sie Felder und Labels, und lassen Sie Besucher absenden — einschließlich Bild-, Video- und Media-Gallery-Uploads. Lange Formulare können Sie in Schritte aufteilen, Felder nur bei erfüllter Bedingung zeigen, einen Wix-Kontakt anlegen, ein Site-Mitglied registrieren und Wix Automations auslösen. Mit Pro können Sie beim Absenden auch Zahlung über Wix Checkout einziehen.
Was Sie tun können
- AI setup — Felder und Submit-Texte in Alltagssprache beschreiben; siehe AI setup
- Text, Number, URL, Dropdowns, Telefon (E.164 mit Ländervorwahl), Color (nativer Color-Picker; speichert HEX), Date- / Date-&-time- / Time-Picker, Bilder, Video-Upload und Media-Gallery-Multi-Upload
- Radio buttons und Checkbox (Mehrfachauswahl) bei Text-Feldern mit eigenen Optionen
- Multi-step form — Formular auf Seiten mit Next / Back und Fortschritt aufteilen; Preview step im Editor
- Show only when — Feld ausblenden, bis ein anderes leer, nicht leer ist oder ausgewählte Werte trifft
- Autosave — speichert während der Eingabe; Mitglieder setzen einen Collection-Entwurf fort, andere behalten einen Entwurf in diesem Browser bis zum Absenden
- Submit-Labels in einem Panel (ersetzt separate Text-Input- / Dropdown- / Submit-Button- / Form-Dataset-Widgets aus früheren Versionen)
- Update displays on this page — nach erfolgreichem Absenden laden Table-, Repeater-, Slideshow-, Media-Gallery-, Calendar- und Dynamic-Page-Widgets auf derselben Seite, die dieselbe Collection nutzen, automatisch neu
- Contacts — Create contact: Wix-Kontakt aus zugeordneten Formularfeldern anlegen oder aktualisieren
- Members — Create member: Site-Mitglied mit Login email und Passwort registrieren
- Wix Automations — Form submitted-Trigger nach jeder erfolgreichen Einsendung
- Payments (Pro) — Pay-on-Submit: Einsendung speichern, Wix Checkout öffnen und Bestelldetails zurück in die Einsendung schreiben
Einrichtung
Nutzen Sie AI setup im Panel für einen Start in Alltagssprache und verfeinern Sie danach in Manual. Details: AI setup.
- Fügen Sie Form über Add → Elements → Installed Apps → CMS for Harmony hinzu (auch mehrfach möglich).
- Verbinden Sie eine Collection, die Einsendungen empfangen soll.
- Wählen Sie Felder und Labels, die Besucher ausfüllen (Number- und URL-Felder erhalten passende Eingabetypen).
- Optional Multi-step form unter Steps einschalten und Felder in Field setup zuweisen; Show only when pro Feld konfigurieren.
- Schalten Sie optional Update displays on this page, Create contact, Create member und/oder Enable payments (Pro) ein — siehe unten.
- Veröffentlichen und testen Sie eine Einsendung auf der Live- (oder Preview-)Website. Der Zahlungs-Checkout läuft auf der Live-Website.
Einsendungen landen in Ihrer Collection, sodass Sie sie später mit Table oder Repeater anzeigen können, falls gewünscht. Mit Update displays on this page aktualisiert sich eine Liste auf derselben Seite, sobald die Einsendung erfolgreich war.
Steps
- Schalten Sie Multi-step form im Abschnitt Steps ein.
- Fügen Sie Schritte hinzu und setzen Sie jeden Step title.
- Weisen Sie in Field setup jedes Feld einem Step zu.
- Nutzen Sie Preview step im Editor, um eine Seite nach der anderen auf der Canvas zu sehen.
- Im Live-Formular nutzen Besucher Next / Back; Absenden läuft auf dem letzten Schritt.
Field setup
Pro Feld: Label, Placeholder, Required und Input type. Text-Felder unterstützen Radio buttons und Checkbox (Mehrfach) mit eigenen Options. Bei Multi-Step weisen Sie den Step zu. Show only when blendet das Feld aus, bis ein anderes leer, nicht leer ist oder Equals any of ausgewählte Werte trifft — Required gilt nur, solange das Feld sichtbar ist.
Update displays on this page
Schalten Sie im Form-Panel Update displays on this page ein. Nach erfolgreichem Absenden laden Table-, Repeater-, Slideshow-, Media-Gallery-, Calendar- und Dynamic-Page-Widgets auf derselben Seite, die dieselbe Collection nutzen, automatisch neu — Besucher sehen das neue oder aktualisierte Item ohne Browser-Refresh.
Autosave
Unter Submit Autosave einschalten, damit während der Eingabe gespeichert wird. Editable form und Autosave können nicht gleichzeitig an sein.
- Autosave einschalten.
- Ein Submitted field (Boolean) wählen. Mit Add submitted field ein Feld namens Submitted anlegen, wenn die Collection noch keines hat. Das Feld erscheint nicht im Formular.
- Mitglieder brauchen Read und Update für ihre eigenen Items (das Panel bietet Fix, wenn diese Rechte fehlen).
Mitglieder speichern einen Entwurf in der Collection, mit dem Submitted field auf false. Beim erneuten Öffnen wird dieser Entwurf fortgesetzt. Submit aktualisiert dasselbe Item und setzt das Feld auf true. Listen nach diesem Feld filtern, wenn unfertige Entwürfe ausgeblendet werden sollen.
Nicht angemeldete Besucher behalten den Entwurf in diesem Browser, bis sie absenden. Das Absenden schreibt ein neues Collection-Item und löscht den Browser-Entwurf.
Das Formular zeigt Saving…, Saved oder Couldn’t save. Keep editing — we’ll try again. Passwörter werden im Entwurf nicht gespeichert.
Contacts
Nutzen Sie den Abschnitt Contacts im Form-Panel, um bei jeder Einsendung einen Wix-Kontakt anzulegen oder zu aktualisieren.
- Schalten Sie Create contact ein.
- Ordnen Sie Email (Pflicht) und optionale Slots zu: Phone, First name, Last name, Full name, Company, Job title.
- Bevorzugen Sie Collection-Felder, wenn die Werte auch im CMS gespeichert werden sollen. Nutzen Sie Add field (contact) für reine Formularfelder, die nicht in der Collection landen — das Panel zeigt einen kurzen Hinweis und Add to collection, falls Sie es sich anders überlegen.
- Um eine optionale Zuordnung zu löschen, nutzen Sie das X neben dem Dropdown. Das Löschen einer Add field (contact)-Zuordnung entfernt auch dieses reine Formularfeld. Email bleibt Pflicht, solange Contacts aktiv ist, und hat daher keine Clear-Steuerung.
- Veröffentlichen und senden Sie einen Testeintrag; prüfen Sie, dass der Kontakt in den Contacts Ihrer Website erscheint.
Wenn Create member aktiv ist, bleibt Contacts eingeschaltet, damit Login email und Profilfelder zugeordnet bleiben.
Members
Nutzen Sie den Abschnitt Members, damit Besucher beim Absenden ein Site-Mitgliedskonto anlegen können.
- Schalten Sie Create member ein (aktiviert auch Contacts).
- Setzen Sie Login email (Pflicht) — ordnen Sie ein Collection-E-Mail-Feld zu oder Add field (member).
- Ordnen Sie weitere gewünschte Contact-Slots für Mitglied/Kontakt zu (gleiche Contacts-Zuordnung).
- Im Live-Formular sehen Besucher Password und Confirm password (Labels/Platzhalter in Field setup editierbar). Passwörter werden nie in die Collection geschrieben.
- Veröffentlichen und testen Sie die Registrierung auf der Live-Website.
Wix Automations
Jede erfolgreiche Form-Einsendung meldet ein Form submitted-Ereignis an Wix Automations (best-effort; blockiert nicht das Speichern der Einsendung).
Wählen Sie in Automations den CMS-for-Harmony-Trigger Form submitted. Die Payload enthält submission id, collection id, submitted time, payment-pending flag, einen JSON-String der Feldwerte und — wenn Contacts zugeordnet ist — email, name, phone und contact id, sofern verfügbar.
Nutzen Sie das für E-Mail-Benachrichtigungen, CRM-Übergaben oder jede Automations-Aktion, die Sie bereits auf der Website verwenden.
Form payments (Pro)
Form-Zahlungen sind getrennt von Katalogzahlungen (Add to cart / Buy now auf Anzeigen). Hier zahlt der Besucher beim Absenden des Formulars einen festen oder eingegebenen Betrag.
- Verbinden Sie eine Collection und öffnen Sie den Abschnitt Payments im Form-Panel.
- Schalten Sie Enable payments ein (installiert bei Bedarf Wix Stores).
- Setzen Sie Item name (Position im Checkout).
- Wählen Sie Price: Fixed amount oder Visitor enters amount (fügt ein Pflichtfeld Amount auf dem Live-Formular hinzu).
- Setzen Sie die Label des Zahlungsbuttons.
- Unter Save to submission nutzen Sie Add fields (oder manuell zuordnen) für Order ID, Total paid und Payment status — werden nach erfolgreichem Checkout ausgefüllt.
- Veröffentlichen und auf der Live-Website testen.
Ohne Pro bleibt der Zahlungsschalter aus und das Panel zeigt eine Upgrade-Aufforderung.