header-logo
Erfahre, wie du Wix für den Aufbau deiner Website und deines Unternehmens nutzen kannst
Gestalte und verwalte deine Website mit Wix.
Verwalte Premiumpakete, Abos und Rechnungen
Führe dein Unternehmen und vernetze dich mit Mitgliedern.
Kaufe, verknüpfe oder übertrage eine Domain.
Stärke dein Unternehmen und deine Webpräsenz.
Steigere deine Sichtbarkeit mit SEO und Marketing.
Nutze erweiterte Funktionen für mehr Effizienz.
Finde Lösungen oder kontaktiere uns.
placeholder-preview-image
Verbessere deine Kenntnisse mit unseren Tutorials.
Erhalte Tipps für Webdesign, Marketing und mehr.
Erfahre, wie du den organischen Traffic steigerst.
Erstelle eine Website mit unserer Full-Stack-Plattform.
Finde einen Spezialisten, der dir hilft, deine Ziele zu erreichen.
placeholder-preview-image

CMS: Ein benutzerdefiniertes Formular mit Eingabeelementen von Dropdown-Menüs einrichten

26 min
Erstelle benutzerdefinierte Formulare, die es Besuchern ermöglichen, Eingabeelemente von Dropdown-Menüs zu verwenden, um ihre Auswahl direkt an deine CMS-CMS zu übermitteln. In diesem Artikel erfährst du, wie du ein Dropdown-Menü-Eingabeelement und einen „Einreichen“-Button hinzufügst. Du verbindest beide Elemente mit einem Datensatz, mit dem die Einreichungen von Besuchern in deiner CMS-Sammlung gespeichert werden.

Nachdem du diese Schritte abgeschlossen hast, kannst du dein Formular erweitern, indem du weitere Eingabeelemente hinzufügst und sie mit demselben Datensatz verbindest.
Screenshot eines Dropdown-Menü-Eingabeelements, das auf einer Live-Website verwendet wird.
Bevor du loslegst:
Falls du dies noch nicht getan hast, musst du das CMS zu deiner Website hinzufügen.

Schritt 1 | Das Dropdown-Menü hinzufügen

Öffne in deinem Editor die Seite, auf der du ein benutzerdefiniertes Formular erstellen möchtest, und füge das Dropdown-Menü hinzu.

Wix Editor
Studio Editor
  1. Öffne deinen Editor.
  2. Öffne die Seite, auf der du Eingabeelemente hinzufügen möchtest.
  3. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
  4. Klicke auf Eingabefelder.
  5. Klicke auf Dropdown-Menü.
  6. Klicke und ziehe das Dropdown-Menü, das du verwenden möchtest.
Screenshot des Dropdown-Menüs im Editor.
Tipp:
Füge weitere Eingabeelemente für alle möglichen Informationen hinzu, die deine Besucher übermitteln müssen. Die Art der Eingabeelemente bestimmt, mit welchen Feldern sie verknüpft werden können und die Art der Daten, die sie speichern können.

Schritt 2 | Mit CMS verknüpfen

Verknüpfe dein Dropdown-Menü mit einem Datensatz, der mit einer CMS-Sammlung verknüpft ist, in der du die Einreichungen speicherst.

Die Optionen, die im Dropdown-Menü angezeigt werden, können manuell hinzugefügt oder Elemente aus einer anderen CMS-Sammlung verwendet werden. Um Elemente aus dem CMS zu verwenden, verbinde die Listenoptionen des Dropdown-Menüs mit einem anderen Datensatz, der sich mit einem Feld in einer anderen Sammlung verbindet.
Wix Editor
Studio Editor
  1. Füge in deinem Editor einen Datensatz hinzu, der mit einer Sammlung verknüpft ist, in der du die Einreichungen speicherst:
    1. Klicke links auf CMS .
    2. Klicke auf Content-Elemente hinzufügen.
    3. Klicke auf Formular-Datensatz.
    4. Klicke auf das Dropdown-Menü Sammlung wählen und wähle eine Sammlung aus, um die Einreichungen zu speichern.
    5. Benenne den Datensatz (z. B. „Einreichungen“).
    6. Klicke auf Erstellen.
  2. Klicke auf das Dropdown-Menü und wähle im Panel Dropdown verknüpfen die Option Content sammeln.
Screenshot der Auswahl von „Content sammeln“ im Panel „Dropdown verknüpfen“.
  1. Klicke auf das Dropdown-Menü Datensatz wählen und wähle deinen Datensatz „Einreichungen“ aus.
  2. Verknüpfe das Dropdown-Menü-Eingabeelement mit einem neuen Feld der Sammlung, um die Einreichungen zu speichern:
    1. Klicke auf das Dropdown-Menü Wert verknüpft mit und wähle Neues Feld hinzufügen.
    2. Gib einen Feldnamen für das neue Sammlungsfeld ein.
    3. (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.
    4. Klicke auf das Dropdown-Menü Feldtyp und wähle den Feldtyp, je nachdem, welche Art von Daten du sammeln möchtest.
      Tipp: Wenn der Feldtyp „Referenz“ ist, kannst du die referenzierte Sammlung im Dropdown-Menü auswählen.
    5. Klicke auf Hinzufügen.
Screenshot, der zeigt, wie ein Dropdown-Menü-Eingabeelement mit einem neuen Sammlungsfeld verknüpft wird.
  1. Klicke auf den Schieberegler Optionen aus Sammlung anzeigen, um auszuwählen, wo die Auswahlmöglichkeiten des Dropdowns 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.
Ein Screenshot zeigt, wie die Listenoptionen eines Dropdown-Menü-Eingabeelements verknüpft werden.
  1. (Wenn du andere Eingabeelemente hinzugefügt hast) Verknüpfe die Eingabeelemente mit deinem „Einreichungen“-Datensatz:
    1. Klicke auf das entsprechende Eingabeelement.
    2. Klicke auf das Symbol für Mit CMS verknüpfen .
    3. Wiederhole die Schritte 3-4 oben, um die Eingabe mit deinem Datensatz „Einreichungen“ zu verknüpfen.
    4. Wiederhole diesen Schritt für jedes Eingabeelement, das du zu deinem benutzerdefinierten CMS-Formular hinzufügen möchtest.
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 das Dropdown-Eingabeelement neue Elemente zu deiner „Einreichungen“-Sammlung hinzufügen.
  • Wenn du die Listenoptionen, die Besucher in dem Dropdown-Menü 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 3 | Sammlungsberechtigungen festlegen

Lege die Berechtigungen für die Sammlung fest, in der du die Einreichungen speicherst. Du kannst die voreingestellte Einstellung Content sammeln wählen, die es Besuchern ermöglicht, Inhalte hinzuzufügen, und dann genauer bestimmen, wer es darf. Alternativ kannst du Erweiterte Berechtigungen wählen, um zu steuern, wer die Sammlungselemente ansehen, bearbeiten, aktualisieren und löschen kann.
Wix Editor
Studio Editor
  1. Klicke auf der linken Seite des Editors auf CMS .
  2. Klicke auf Deine Sammlungen.
  3. Fahre mit der Maus über deine Sammlung „Einreichungen“ und klicke auf das Symbol für Weitere Aktionen .
  4. Klicke auf Berechtigungen & Privatsphäre.
Screenshot der Auswahl der Berechtigungen und Privatsphäre-Einstellungen für eine CMS-Sammlung.
  1. Wähle aus, welche Berechtigungen du für die Sammlung verwenden möchtest:
  2. Wähle die Art der Berechtigungen, die du für deine Sammlung verwenden möchtest:

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 deinem Dropdown-Eingabeelement und allen anderen 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
  1. Klicke auf der linken Seite des Editors auf Elemente hinzufügen .
  2. Klicke auf den Button.
  3. 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. 
Screenshot, der zeigt, wie ein Button im Wix Editor hinzugefügt wird.
  1. Klicke auf Text & Symbol ändern und gib den Text ein, der auf dem Button angezeigt werden soll (z. B. „Einreichen“). 
  2. Klicke auf das Symbol für Mit CMS verknüpfen .
  3. Klicke auf das Dropdown-Menü Datensatz wählen und wähle den Datensatz aus, der mit deiner Einreichungssammlung verknüpft ist.
  4. Klicke auf das Dropdown-Menü Beim Klicken verknüpfen mit und wähle die Option Einreichen.
  5. (Optional) Füge Erfolgs- und Fehlermeldungen hinzu, die angezeigt werden, wenn Einreichungen erfolgreich übermittelt wurden oder ein Fehler bei der Übermittlung aufgetreten ist:
    1. Klicke auf + Erfolgsnachricht hinzufügen und klicke dann auf + Fehlermeldung hinzufügen.
    2. Klicke und ziehe beide Nachrichten an die gewünschte Stelle. Sie können sich überschneiden, da die Nachrichten nicht gleichzeitig angezeigt werden.
    3. Klicke in jeder Nachricht auf Text bearbeiten, um dem Text der Nachrichten zu bearbeiten.
  6. 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 auswählen auf Auswählen und richte den Link ein.
Ein Screenshot zeigt, wie ein „Einreichen“-Button eingerichtet wird.
  1. Klicke auf den Button und wähle das Symbol für Design  aus, um das Aussehen deines „Einreichen“-Buttons anzupassen

Schritt 6 | Das Dropdown-Menü anpassen

Lege den Titel, den Platzhaltertext und weitere Optionen in den Einstellungen des Dropdown-Menüs fest. Passe das Design des Elements im Design-Panel und die Ausrichtung, den Zeichenabstand und den Abstand im Layout-Panel an.
Wix Editor
Studio Editor
  1. Klicke in deinem Editor auf das Dropdown-Menü.
  2. Klicke auf Einstellungen und bearbeite Folgendes:
    • Feldtitel: Gib einen Titel ein, der oben im Dropdown-Menü angezeigt wird.
    • Text beim Laden anzeigen: Wähle aus, welchen Text deine Besucher sehen, bevor sie auf das Dropdown-Menü klicken:
      • Keine Inhalte: Besucher sehen ein leeres Feld, bevor sie auf das Dropdown-Menü klicken.
      • Platzhaltertext: Verwende deinen eigenen Text im Dropdown-Menü (z. B. „Wähle deine Farbe“). Gib den Text in das Feld Platzhaltertext ein.
      • Element aus dem Dropdown-Menü: Zeige ein Element aus dem Dropdown-Menü an. Wenn du die Liste mit dem CMS verknüpft hast, ist das angezeigte Element die erste Option, die Besucher aus dem Dropdown-Menü auswählen können. Wenn du die Listenelemente nicht mit dem CMS verknüpft hast, klicke auf Element aus deiner Liste wählen, um auszuwählen, welches Element angezeigt werden soll.
      • Automatisch ausfüllen: Klicke auf den Schieberegler, um festzulegen, was passiert, wenn Besucher etwas eingeben, um im Dropdown-Menü zu suchen:
        • Aktiviert: Im Dropdown-Menü werden nur Auswahlmöglichkeiten angezeigt, die dem eingegebenen Text entsprechen.
        • Deaktiviert: Alle Auswahlmöglichkeiten werden im Dropdown-Menü angezeigt.
    • Aufklappliste — Art: Wähle eine Option:
      • Benutzerdefiniert: Passe das Dropdown-Menü im Design-Panel an. Auf Mobilgeräten ist der Listentyp immer auf Browser eingestellt.
      • Browser: Verwende das Standarddesign des Browsers für das Dropdown-Menü.
    • Dieses Feld ist: Aktiviere das Kontrollkästchen Pflichtfeld, damit Besucher ein Element aus diesem Dropdown-Menü auswählen, bevor ihre Einreichung übermittelt werden kann.
Screenshot der Einstellungen für das Dropdown-Menü-Eingabeelements.
  1. Klicke auf das Symbol für Layout , um die Textausrichtung sowie den Abstand des Elements anzupassen.
  2. Klicke auf das Symbol für Design , um ein voreingestelltes Design zu wählen, und wähle dann Design anpassen, um das Aussehen des Dropdown-Menüs weiter anzupassen.
  3. (Optional) Klicke auf das Symbol für Animation , um dem Dropdown-Menü eine Animation hinzuzufügen.
Bist du bereit, live zu gehen?
Klicke oben rechts im Editor auf Vorschau, um dein neues benutzerdefiniertes Dropdown-Menü auszuprobieren. Wenn dir alles gefällt 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 Verbinden von Dropdown-Menüs mit dem CMS zu erhalten.
Screenshot eines Dropdown-Menü-Eingabeelements, das auf einer Live-Website verwendet wird.
Screenshot des Dropdown-Menüs im Editor.
Screenshot der Auswahl von „Content sammeln“ im Panel „Dropdown verknüpfen“.
Screenshot, der zeigt, wie ein Dropdown-Menü-Eingabeelement mit einem neuen Sammlungsfeld verknüpft wird.
Ein Screenshot zeigt, wie die Listenoptionen eines Dropdown-Menü-Eingabeelements verknüpft werden.
Screenshot der Auswahl der Berechtigungen und Privatsphäre-Einstellungen für eine CMS-Sammlung.
Screenshot, der zeigt, wie ein Button im Wix Editor hinzugefügt wird.
Ein Screenshot zeigt, wie ein „Einreichen“-Button eingerichtet wird.
Screenshot der Einstellungen für das Dropdown-Menü-Eingabeelements.