CMS: Ein benutzerdefiniertes Formular mit Eingabeelementen erstellen, die an deine Sammlung übermitteln
18 min
Erstelle ein benutzerdefiniertes CMS-Formular, das es Besuchern ermöglicht, ihre Informationen über Eingabeelemente direkt an deine Sammlungen zu übermitteln. Zu den Eingabeelementen gehören Textfelder, Dropdown-Menüs, Datum- und Uhrzeitauswahl und viele mehr. Dieser Artikel führt dich durch die Erstellung einer Sammlung, in der du die Einreichungen deiner Website-Besucher speicherst. Außerdem erklärt der Artikel wie du Eingabeelemente und einen „Einreichen“-Button hinzufügst und wie du Datensätze verwendest, um alles zu verknüpfen.
Du benötigst ein einfacheres, vorgefertigtes benutzerdefiniertes Formular?
Sieh dir Wix Forms an, um dir Formularvorlagen anzusehen, die du weniger einrichten musst, wie z. B. Kontaktformulare, Bestellformulare, Registrierungsformulare und mehr.
Bevor du loslegst:
- Falls du dies noch nicht getan hast, musst du das CMS zu deiner Website hinzufügen.
- Eine Übersicht über diesen Prozess findest du in unserem ultimativen CMS-Leitfadenvideo.
Schritt 1 | Eine Sammlung erstellen und Berechtigungen festlegen
Erstelle eine Sammlung, in der du Einreichungen über benutzerdefinierte Formulare speicherst, und richte die Sammlungsberechtigungen ein. Du kannst die Einstellungen der Berechtigungen auf Content sammeln festlegen und dann festlegen, wer Inhalte auf deiner Live-Website ansehen oder hinzufügen kann. Alternativ kannst du Erweitert wählen, um festzulegen, welche Rollen Inhalte ansehen, hinzufügen, aktualisieren und löschen können (Jede Person, Mitglieder, Ersteller von Elementen und Mitbearbeiter).
Du kannst an dieser Stelle der Sammlung Felder hinzufügen, aber wir empfehlen, diese später hinzuzufügen (Schritt 3), wenn du die Eingabeelemente verbindest. Auf diese Weise kannst du sicher sein, dass du nur die Feldtypen hinzufügst, die eine Verbindung zu den einzelnen Eingabeelementen herstellen können.
Um eine Sammlung zum Speichern von Formulareinreichungen zu erstellen:
- Öffne den CMS-Bereich in deiner Website-Verwaltung.
- Klicke auf Sammlung erstellen.
- Klicke auf Neu erstellen.
Tipp: Alternativ kannst du auf Mit KI erstellen klicken, damit die KI (künstliche Intelligenz) eine Sammlung für dich erstellt. - Klicke auf Weiter.
- Gib einen Namen für deine Sammlung ein. Lass uns diese Sammlung „Einreichungen“ nennen.
- (Nur zum Programmieren) Gib eine Sammlungs-ID ein, die du in deinem Code verwenden möchtest.
- Lasse Mehrere Elemente (Standard) ausgewählt und klicke auf Erstellen.
- Klicke auf Weitere Aktionen und wähle Berechtigungen & Datenschutz.
- Wähle aus, welche Berechtigungen du für die Sammlung verwenden möchtest:
Content sammeln
Advanced (Erweitertes Paket)
Schritt 2 | Eingabeelemente zu deiner Website hinzufügen
Öffne die Seite oder den Abschnitt in deinem Editor, bei dem du das benutzerdefinierte Formular erstellen möchtest. Füge anschließend alle Eingabeelemente hinzu, die Besucher zum Einreichen ihrer Antworten verwenden. Denke daran, dass es für jedes Eingabeelement Einschränkungen hinsichtlich der Datentypen gibt, die es erfassen kann, und die Feldtypen, mit denen es eine Verbindung herstellen kann.
Welche Eingabeelemente können so eingestellt werden, dass sie Content sammeln?
Mit den folgenden Eingabeelementen kannst du Inhalte sammeln: Texteingabe, Textfeld, Rich Text, Radiobuttons, Mehrfachauswahl, einzelnes Kontrollkästchen, Dropdown-Menü, Auswahl-Tags, Datumsauswahl, Zeitauswahl, Schieberegler, Upload-Button, Ratingeingabe, Adresseingabe, Schalter und Unterschrifteneingabe.
Wix Editor
Studio Editor
- Öffne deinen Editor.
- Öffne die Seite oder den Abschnitt, auf der du ein benutzerdefiniertes Formular erstellen möchtest.
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
- Klicke auf Eingabefelder.
- Klicke auf das Eingabeelement, das du hinzufügen möchtest.
- Klicke und ziehe das entsprechende Eingabeelement auf die Seite.
.
- Wiederhole die obigen Schritte 3 bis 6, um so viele Eingabeelemente hinzuzufügen, wie dein Formular benötigt.
Schritt 3 | Die Eingabeelemente mit deiner Sammlung verknüpfen
Verknüpfe jedes deiner Eingabeelemente mit einem Datensatz, der mit deiner „Einreichungen“-Sammlung verknüpft ist. Verknüpfe dann die Eingabewerte mit neuen Sammlungsfeldern, die der Art der Daten entsprechen, die du sammeln möchtest.
Du kannst die Optionen, die Besucher in Dropdown-Menüs und Auswahl-Tag-Elementen auswählen können, mit Elementen aus einer anderen CMS-Sammlung verknüpfen. Verknüpfe dazu die Listenoptionen mit einem anderen Datensatz, der mit einem Feld in einer anderen Sammlung verknüpft ist. Dieser Datensatz sollte im Modus „Lesen“ oder „Lesen & schreiben“ sein.
Wix Editor
Studio Editor
- Füge in deinem Editor einen Datensatz hinzu, der mit deiner „Einreichungen“-Sammlung verknüpft ist:
- Klicke links auf CMS .
- Klicke auf Content-Elemente hinzufügen.
- Klicke auf Formular-Datensatz.
- Klicke auf das Dropdown-Menü Sammlung auswählen und wähle die „Einreichungen“-Sammlung aus.
- Benenne den Datensatz (z. B. „Einreichungen“).
- Klicke auf Erstellen.
- Klicke auf eines der Eingabeelemente, die du hinzugefügt hast.
- Klicke auf das Symbol für Mit CMS verknüpfen .
- Klicke auf das Dropdown-Menü Datensatz wählen und wähle deinen „Einreichungen“-Datensatz.
Tipp: Klicke zunächst auf Content sammeln, wenn du dazu aufgefordert wirst, zwischen „Filtern von Inhalten“ und „Content sammeln“ zu wählen. - Verknüpfe das Eingabeelement mit einem neuen Feld der Sammlung:
- Klicke auf das Dropdown-Menü Wert verknüpft mit und wähle Neues Feld hinzufügen.
- Gib einen Feldnamen für das neue Sammlungsfeld ein.
- (Nur zum Programmieren) Gib den Feldschlüssel ein, der dieses Feld im Code deiner Website identifiziert. Er kann später nicht mehr geändert werden.
- Wähle den Feldtyp aus dem Dropdown-Menü aus. Der Feldtyp bestimmt, welche Art von Daten du in dem Feld speichern kannst.
- Klicke auf Hinzufügen.
.
. 
- (Wenn du die Liste von Elementen in bestimmten Eingabeelementen verknüpfst) Klicke auf den Schalter Optionen aus einer Sammlung anzeigen, um auszuwählen, wo die Auswahlmöglichkeiten des Elements verwaltet werden sollen:
- Aktiviert: Verwende für die Auswahl ein Feld aus einer anderen CMS-Sammlung. Verknüpfe den entsprechenden Datensatz und wähle aus dem Dropdown-Menü Labels und Werte verknüpfen mit die Felder aus, die du verwenden möchtest.
- Deaktiviert: Klicke auf Auswahloptionen verwalten, um separat vom CMS statische Auswahlmöglichkeiten für das Element zu erstellen.
- Wiederhole diese Schritte für jedes Eingabeelement deines benutzerdefinierten CMS-Formulars.
Was ist mit den Datensatz-Modi?
- Wenn du einen „Formulardatensatz“ hinzugefügt hast, ist dieser richtigerweise bereits auf den Modus „Schreiben“ eingestellt. In diesem Modus kann der Datensatz basierend auf den Einreichungen über die Eingabeelemente neue Elemente zur Sammlung hinzufügen.
- Wenn du die Optionen, die Besucher in Dropdown-Menüs und Auswahl-Tag-Elementen auswählen können, verknüpft hast, stelle sicher, dass sich dieser separate Datensatz im Modus „Lesen“ oder „Lesen & schreiben“ befindet.
- Wenn du möchtest, dass mit deinem CMS-Formular vorhandene Sammlungselemente aktualisiert werden können, dann setze den Datensatz-Modus für „Einreichungen“ auf „Lesen & schreiben“. Stelle sicher, dass die Sammlungsberechtigungen es Personen mit den entsprechenden Rollen erlauben, Inhalte zu aktualisieren.
Schritt 5 | Einen „Einreichen“-Button erstellen
Du musst eine Möglichkeit schaffen, mit der deine Besucher die Antworten einreichen können, die sie in Eingabeelementen eingegeben oder ausgewählt haben. Erstelle einen „Einreichen“-Button, indem du einen normalen Button oder ein Bild hinzufügst und mit der Klick-Aktion „Einreichen“ des Datensatzes verbindest. Wenn Besucher auf den „Einreichen“-Button klicken, werden die Werte aus allen Eingabeelementen, die mit deinem „Einreichungen“-Datensatz verknüpft sind, in deiner Sammlung gespeichert. Je nach Datensatz-Modus und deinen Sammlungsberechtigungen werden die Werte entweder als neue Elemente hinzugefügt oder vorhandene Elemente werden aktualisiert.
Du kannst auch separate Buttons für die folgenden Datensatzaktionen erstellen:
- Neu: Füge Sammlungselemente hinzu oder aktualisiere sie (je nach Datensatz-Modus) und setze die Eingabe zurück, damit sie neue Werte annehmen kann.
- Zurücksetzen: Setze die Werte in den Eingabeelementen zurück, die noch nicht eingereicht wurden.
- Löschen: Entferne ausgewählte Elemente aus deiner Sammlung (nur im Modus „Lesen & schreiben“).
- Nächste/Vorherige Seite: Wenn du die Elemente in einer Galerie oder einem Repeater anzeigst, wo Besucher sie bearbeiten können, kannst du diese Buttons hinzufügen, damit Besucher Elemente „seitenweise“ navigieren können. Wenn du dein Formular auf einer dynamischen Elementseite erstellt hast, verwende stattdessen die Klick-Aktion Nächste dynamische Seite/Vorherige dynamische Seite.
Wix Editor
Studio Editor
- Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
- Klicke auf den Button.
- Klicke und ziehe den Button, den du als Einreichen-Button verwenden möchtest, auf die Seite. Du kannst einen der folgenden Buttontypen verwenden: Buttonvorlagen, Text- und Symbolbuttons, Symbolbuttons, oder Bildbuttons.
Tipp: Alternativ kannst du ein Bild hinzufügen und es als deinen Einreichen-Button verwenden.
- Klicke auf Text & Symbol ändern und gib den Text ein, der auf dem Button angezeigt werden soll (z. B. „Einreichen“).
- Klicke auf das Symbol für Mit CMS verknüpfen .
- Klicke auf das Dropdown-Menü Datensatz wählen und wähle den Datensatz aus, der mit deiner Einreichungssammlung verknüpft ist.
- Klicke auf das Dropdown-Menü Beim Klicken verknüpfen mit und wähle die Option Einreichen.
- (Optional) Füge Erfolgs- und Fehlermeldungen hinzu, die angezeigt werden, wenn Einreichungen erfolgreich übermittelt wurden oder ein Fehler bei der Übermittlung aufgetreten ist:
- Klicke auf + Erfolgsnachricht hinzufügen und klicke dann auf + Fehlermeldung hinzufügen.
- Klicke und ziehe beide Nachrichten an die gewünschte Stelle. Sie können sich überschneiden, da die Nachrichten nicht gleichzeitig angezeigt werden.
- Klicke in jeder Nachricht auf Text bearbeiten, um dem Text der Nachrichten zu bearbeiten.
- Wähle den Button und klicke auf das Symbol für Mit CMS verknüpfen . Klicke anschließend auf das Dropdown-Menü Wenn erfolgreich, navigieren zu und wähle eine Option:
- Auf der Seite bleiben: Der Besucher bleibt nach dem Absenden des Formulars auf derselben Seite.
- Ein Link: Der Besucher wird auf eine andere Seite weitergeleitet, nachdem er das Formular abgeschickt hat. Klicke unter Link wählen auf Auswählen und richte den Link ein.
- Klicke auf den Button und wähle das Symbol für Design , um das Aussehen deines „Einreichen“-Buttons anzupassen.
, um Schritt 6 | Die Eingabeelemente anpassen
Du kannst jedes deiner Eingabeelemente anpassen, um ein Formular zu erstellen, das zum Design deiner Website passt.
Wix Editor
Studio Editor
- Klicke in deinem Editor auf eines deiner Eingabeelemente, das du anpassen möchtest.
- Klicke auf Einstellungen, um den Feldtitel einzugeben, das Feld als erforderlich festzulegen oder verschiedene Einstellungen je nach Eingabetyp anzupassen.
- Klicke auf das Symbol für Layout , um die Textausrichtung und andere Layout-Optionen anzupassen.
- Klicke auf das Symbol für Design , um ein voreingestelltes Design zu wählen, und wähle dann Design anpassen, um das Aussehen des Elements weiter anzupassen.
- Wiederhole diese Schritte für jedes Eingabeelement, das du anpassen möchtest.
, um die Textausrichtung und andere Layout-Optionen anzupassen.
, um ein voreingestelltes Design zu wählen, und wähle dann Design anpassen, um das Aussehen des Elements weiter anzupassen.Bist du bereit, live zu gehen?
Klicke oben rechts im Editor auf Vorschau, um das neue benutzerdefinierte Formular auszuprobieren. Wenn alles gut aussieht und perfekt funktioniert, klicke auf Veröffentlichen, um die Änderungen zu veröffentlichen.
Wenn du Sandbox aktiviert hast, synchronisiere deine Sandbox-Sammlung mit der Live-Sammlung, um die Änderungen in der Datenbank zu veröffentlichen.
Häufig gestellte Fragen
Klicke unten auf eine Frage, um Antworten auf die häufigsten Fragen zum Erstellen benutzerdefinierter Formulare mit Eingabeelementen zu erhalten.
Wo finde ich die Erfolgs-/Fehlermeldungen meines „Einreichen“-Buttons im Editor?
Kann ich automatisieren, was passiert, wenn ich Formulareinreichungen erhalte?
Kann ich die Einreichungen, die gespeichert werden, in meine Sammlung exportieren?
Können Website-Besucher Eingabeelemente verwenden, um den Inhalt zu filtern, der auf meiner Website angezeigt wird?
Woher kommen die Listenoptionen, wenn ich Dropdown-Menü- oder Auswahl-Tag-Listen mit Referenzfeldern verbinde?
Kann ich die Felder meiner Sammlung zuerst einrichten, bevor ich Eingabeelemente hinzufüge?