DokumentationJourney Optimizer B2BDokumentation zu Journey Optimizer B2B Edition

[Beta]{class="badge informative" title="Diese Funktion befindet sich derzeit in einer eingeschränkten Beta-Version"}

Formular-Design

Last update: Wed Nov 19 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Benutzende

Nach dem Erstellen eines Formulars wird im visuellen Design-Bereich ein Entwurf mit einer standardmäßigen allgemeinen Formulardefinition geöffnet. Klicken Sie im Zusammenfassungsbereich auf der rechten Seite auf Formular bearbeiten und verwenden Sie den visuellen Design-Bereich, um die Formularstile und Feldkomponenten zu definieren.

Zugriff auf die Forms-Bibliothek {width="700" modal="regular"}

Felder

Formularfelder werden verwendet, um Personenprofildaten zu erfassen, mit denen Personen angesprochen und mit Konten und Einkaufsgruppen verknüpft werden können. Alle neuen Formulare beginnen mit den folgenden Feldern in einem einspaltigen Layout:

  • Vorname
  • Last name
  • E-Mail-Adresse

Verwenden Sie die Tools für den Feldentwurf, um die Felder und das Layout zu erstellen, die Sie zum Erfassen der Daten benötigen, die für Ihre Account-basierten Marketing-Aktivitäten erforderlich sind.

Feld hinzufügen add-field

  1. Ziehen Sie Bedienfeld Komponenten“ auf der linken Seite die Inhaltskomponente Feld und legen Sie sie auf der Arbeitsfläche ab.

    Fügen Sie eine Feldkomponente zum Formular hinzu {width="700" modal="regular"}

  2. Klicken Sie Feldattribut auswählen.

  3. Aktivieren im Dialogfeld Feldattribut auswählen“ das Kontrollkästchen für das Personenprofilattribut, das Sie für das Feld verwenden möchten, und klicken Sie auf Auswählen.

    Die XDM-Geschäftsschemata bestimmen die verfügbaren Attribute. Alle benutzerdefinierten Felder, die für Ihre Journey Optimizer B2B edition-Instanz definiert sind, sind ebenfalls verfügbar. Verwenden Sie das Textfeld Suchen , um die Liste nach Namen zu filtern, oder klicken Sie auf das Symbol Filtern , um die Liste nach Schema/Datentyp zu filtern.

    Fügen Sie eine Feldkomponente zum Formular hinzu {width="700" modal="regular"}

    Auf der Arbeitsfläche wird die Standardfeldbeschriftung für das ausgewählte Attribut auf der Arbeitsfläche eingefügt. Die Felddetails werden im Bedienfeld auf der rechten Seite angezeigt.

  4. Ändern Sie bei Bedarf den Titel-Text.

    Dieser Text wird neben dem Feld im Formular angezeigt. Der Standardtext wird aus dem Feldattribut gefüllt.

  5. Legen Sie Feldtyp entsprechend dem Datentyp für das Feld fest:

    table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 5-row-3 6-row-3 7-row-3 8-row-3 9-row-3 10-row-3 11-row-3 12-row-3 13-row-3 14-row-3
    Feldtyp Nutzung Beispiel
    checkbox Verwenden Sie diesen Typ, damit Besucher einen Wert true (aktiviert) oder false (deaktiviert) auswählen können.
    Kontrollkästchen-Gruppe Verwenden Sie diesen Typ, damit Besucher einen Wert true (aktiviert) oder false (deaktiviert) für mehrere Elemente auswählen können.
    Währung Verwenden Sie diesen Typ, um ein schwebendes Feld zuzulassen, das den für die Journey Optimizer B2B edition-Instanz ausgewählten Standardwährungstyp darstellt.
    Datum Verwenden Sie diesen Typ, um die Eingabe auf ein Datumsformat zu beschränken und einen Kalenderselektor in das Feld einzugeben.
    Double
    E-Mail Verwenden Sie diesen Typ, um die Eingabe auf das Format einer E-Mail-Adresse zu beschränken.
    Zahl Verwenden Sie diesen Typ, um das Feld auf einen numerischen Wert zu beschränken.
    Optionsfeldgruppe Verwenden Sie diesen Typ, damit Besucher aus einer Reihe von Optionen auswählen können.
    Auswählen Verwenden Sie diesen Typ, damit Besucher mithilfe einer Dropdown-Liste eine aus einer Reihe von Optionen auswählen können.
    Schieberegler Verwenden Sie diesen Typ, damit Besucher einen numerischen Wert mithilfe eines Schiebereglers festlegen können.
    Telefon Verwenden Sie diesen Typ für ein Telefonnummerneingabefeld.
    Text Verwenden Sie diesen Typ für ein Eingabefeld mit Standardtext (Zeichenfolge).
    Textarea Verwenden Sie diesen Typ, um eine längere Texteingabe zu unterstützen.
    URL Verwenden Sie diesen Typ, um die Texteingabe auf eine URL zu beschränken, einschließlich des standardmäßigen URL-Protokolls.

  6. Legen Sie je nach ausgewähltem Feldtyp die anderen Optionen für die Feldeingabe und -validierung fest:

    Legen Sie Optionen für das Feld entsprechend dem ausgewählten Feldtyp fest {width="400" modal="regular"}

    • Platzhalter - Der Platzhalterwert für das Feld, der dem Besucher ein Beispiel dafür gibt, was für das Feld erwartet wird.

    • Anweisungen - Anleitender Text, der dem Besucher beim Ausfüllen des Felds hilft. Geben Sie den Text ein, der als für das Feld angezeigt soll.

      note tip
      TIP
      Anweisungen vs. Platzhaltertext
      Verwenden Sie diese beiden Eigenschaften, um Besuchende zum Ausfüllen des Felds anzuleiten. Der Anweisungstext wird als QuickInfo/Popup-Text angezeigt, wenn der Mauszeiger über das Feld bewegt wird. Platzhaltertext wird im Feld abgeblendet und verschwindet, wenn der Besucher seinen Text in das Feld eingibt. Sie können beide Methoden oder nur eine verwenden.

    • Standardwert - Verwenden Sie diese Option, um einen Standardwert für das Feld anzugeben.

    • Validierungsmeldung - Verwenden Sie diese Option, um eine Validierungsmeldung für das Feld anzugeben. Diese Meldung wird angezeigt, wenn der Besucher einen ungültigen Wert für das Feld eingibt. Die Standard-Nachricht ist standardmäßig festgelegt. Wählen Sie Benutzerdefiniert und geben Sie Ihre eigene Nachricht ein.

    • Maximale Länge - Geben Sie die maximale Anzahl von Zeichen ein, die in das Feld eingegeben werden können.

  7. Legen Sie Feldverhalten nach Bedarf fest:

    • Erforderlich - Aktivieren Sie das Kontrollkästchen, um die Feldeingabe durchzuführen, die zum Senden des Formulars erforderlich ist.

    • Eingabemaske aktivieren - Aktivieren Sie das Kontrollkästchen, um die Eingabe Ihres Besuchers mithilfe einer Eingabemaske einzuschränken. Beispielsweise können Sie möchten, dass Besuchende Telefonnummern in einem bestimmten Format eingeben. Geben Sie im Dialogfeld die Maske mithilfe von 9 für eine beliebige Zahl, a für einen beliebigen Buchstaben und * für eine dieser Zahlen ein. Klicken Sie auf Speichern , um die angegebene Eingabemaske zu aktivieren.

      Definieren Sie eine Eingabemaske für das Feld {width="500" modal="regular"}

Feldstile ändern field-styling

Wählen Sie die Stile im rechten Bedienfeld aus, um den Stil für das ausgewählte Feld zu ändern.

  • Hintergrund - Aktivieren Sie das Kontrollkästchen, um eine Hintergrundfarbe auf das Feld anzuwenden. Weiß ist die Standardfarbe. Klicken Sie auf Hintergrundfarbe, um das Popup-Farbwähler zu öffnen und eine Farbe für den Feldhintergrund auszuwählen.

    Legen Sie die Hintergrundstile für das Formularfeld fest {width="600" modal="regular"}

  • label - Der Stil der Beschriftung bestimmt die visuellen Eigenschaften des neben dem Feld angezeigten Textes. Wählen Sie eine obere oder seitliche Beschriftungsanzeige relativ zum Feld aus. Sie können die Schriftgröße, Zeilenhöhe, den Textstil und die Textausrichtung festlegen. Klicken Sie auf Schriftfarbe Quadrat, um das Popup-Farbwähler zu öffnen und eine Farbe für den Titeltext auszuwählen.

    Legen Sie die Beschriftungsstile für das Formularfeld fest {width="600" modal="regular"}

  • Rahmen - Klicken Sie auf das Rahmenfarbe Quadrat, um die Popup-Farbauswahl zu öffnen und eine Farbe für den Rahmen auszuwählen. Sie können einen Rahmen für das Feld definieren, einschließlich der Farbe und der Linienbreite. Deaktivieren Sie das Kontrollkästchen, um den angezeigten Feldrand zu entfernen. Sie können auch die Rahmengröße (Pixelbreite), den Stil und den Radius für die Ecken ändern.

    Legen Sie die Rahmenstile für das Formularfeld fest {width="600" modal="regular"}

  • Size - Wählen Sie eine Größeneinstellung aus, um die Anzeigebreite für das Feld zu bestimmen. Wählen Sie Volle Breite, Halbe Breite oder Automatisch.

  • Spanne: Legt Ränder (in Pixeln) um das Feld fest. Sie können denselben Rand auf allen vier Seiten festlegen oder das Kontrollkästchen Unterschiedlicher Rand für jede Seite aktivieren, um die horizontalen und vertikalen Ränder separat festzulegen.

  • Abstand: Abstand (in Pixeln) um das Feld festlegen. Sie können denselben Rand auf allen vier Seiten festlegen oder das Kontrollkästchen Unterschiedlicher Abstand für jede Seite aktivieren, um die horizontalen und vertikalen Ränder separat festzulegen.

    Legen Sie die Stile für Größe, Rand und Abstand für das Formularfeld fest {width="600" modal="regular"}

Felder neu anordnen field-reorder

Sie können Formularfelder direkt im visuellen Arbeitsbereich verschieben. Klicken Sie auf Verschieben-Tool am rechten Rand des ausgewählten Felds und ziehen Sie es an eine neue Position.

Fügen Sie dem Formular Strukturkomponenten hinzu und verschieben Sie Felder in Spalten, um sie zu gruppieren und das Layout zu ändern. Klicken Sie auf Verschieben am linken Rand der ausgewählten Spaltenkomponente und ziehen Sie sie an eine neue Position im Formular.

Verschieben Sie Felder im Formular und verwenden Sie Strukturkomponenten für Gruppierung und Layout {width="500"}

Löschen oder Duplizieren eines Felds field-delete-duplicate

Klicken Sie auf das Löschen-Symbol ( Löschsymbol ) in der Symbolleiste oder im rechten Bereich, um ein ausgewähltes Feld zu löschen. Klicken Sie im Bestätigungsdialog auf Löschen.

Klicken Sie auf Duplizieren-Symbol ( Duplizieren-Symbol ) in der Symbolleiste oder im rechten Bereich, um ein ausgewähltes Feld zu duplizieren. Das neue Feld wird direkt unter dem ursprünglichen Feld angezeigt. Klicken Sie Feldattribut auswählen, um das Attribut für das Feld festzulegen. Legen Sie den Feldtyp, die Details und die Stile nach Bedarf fest.

Löschen und Duplizieren von Symbolen für Formularfelder {width="600" modal="regular"}

Senden-Schaltfläche

Die Senden-Schaltfläche (Fußzeilenfeld) ist standardmäßig Teil des Formulars und kann nicht entfernt werden. Wählen Sie die Schaltflächen-/Fußzeilenkomponente im Formular aus, um Text und Stil für die Schaltfläche zu ändern.

Inhalt der Schaltfläche bearbeiten button-content

Ändern Sie den Text im Textfeld Schaltfläche, während die Registerkarte Inhalt im rechten Bereich angezeigt wird. Die Schaltflächengröße wird an die Länge des Textes angepasst.

Ändern des Schaltflächentextes im Formular {width="600" modal="regular"}

Gestalten der Senden-Schaltfläche button-styles

Wählen Sie die Stile im rechten Bedienfeld aus, um den Stil für die ausgewählte Schaltflächen-/Fußzeilenkomponente zu ändern.

  • Hintergrund - Aktivieren Sie das Kontrollkästchen, um eine Hintergrundfarbe auf die Schaltfläche anzuwenden. Blau ist die Standardfarbe. Klicken Sie auf das Hintergrundfarbe Quadrat, um die Popup-Farbauswahl zu öffnen und eine Farbe für den Schaltflächenhintergrund auszuwählen.

    Legen Sie die Hintergrundstile für die Formularschaltfläche fest {width="600" modal="regular"}

  • Beschriftung - Der Beschriftungsstil steuert die visuellen Eigenschaften für den Text in der Schaltfläche. Sie können die Schriftgröße, Zeilenhöhe, den Textstil und die Textausrichtung festlegen. Klicken Sie auf Schriftfarbe Quadrat, um das Popup-Farbwähler zu öffnen und eine Farbe für den Titeltext auszuwählen.

  • Rahmen - Klicken Sie auf das Rahmenfarbe Quadrat, um die Popup-Farbauswahl zu öffnen und eine Farbe für den Rahmen auszuwählen. Sie können einen Rahmen für die Schaltfläche definieren, einschließlich der Farbe und Zeilenbreite. Deaktivieren Sie das Kontrollkästchen, um den angezeigten Rand der Schaltfläche zu entfernen. Sie können auch die Rahmengröße (Pixelbreite), den Stil und den Radius für abgerundete Ecken ändern.

  • Size - Wählen Sie eine Größeneinstellung aus, um die Anzeigebreite für die Schaltfläche zu bestimmen. Wählen Sie Volle Breite, Halbe Breite oder Automatisch. Der Abstand wird entsprechend den Größen- und Ausrichtungseinstellungen angepasst.

    Legen Sie die Stile für Beschriftung, Rahmen und Größe für die Formularschaltfläche fest {width="600" modal="regular"}

  • Schaltflächenausrichtung - Wenn Sie eine halbe Breite oder Auto für die Schaltfläche auswählen, legen Sie die Ausrichtung auf links, rechts oder zentriert fest. Der Abstand wird entsprechend den Größen- und Ausrichtungseinstellungen angepasst.

  • Spanne: Legt Ränder (in Pixeln) um das Feld fest. Sie können denselben Rand auf allen vier Seiten festlegen oder das Kontrollkästchen Unterschiedlicher Rand für jede Seite aktivieren, um die horizontalen und vertikalen Ränder separat festzulegen.

  • Abstand: Abstand (in Pixeln) um das Feld festlegen. Sie können denselben Rand auf allen vier Seiten festlegen oder das Kontrollkästchen Unterschiedlicher Abstand für jede Seite aktivieren, um die horizontalen und vertikalen Ränder separat festzulegen. Der Abstand wird angepasst, wenn Sie die Größe und die Ausrichtungseinstellungen ändern.

    Festlegen der Stile für Ausrichtung, Rand und Abstand für die Formularschaltfläche {width="600" modal="regular"}

Formularstil form-styling

Sie können die Stile für den Formularbereich ändern, wenn Sie außerhalb der Struktur- oder Formularkomponenten klicken. Die Formularkomponenten (Felder und Schaltflächen) übernehmen die Textkörper-Stile, die in den Stilen der obersten Ebene definiert sind, es sei denn, andere Stile werden auf Feld- oder Schaltflächen-/Fußzeilenebene definiert.

Festlegen der Stile der obersten Ebene für den Formularhauptteil {width="600" modal="regular"}

CSS-Stile

Für neue Formulare wird das Standard-CSS zum Formatieren verwendet. Wenn Sie die Stile ändern möchten, indem Sie das CSS ändern, können Sie es kopieren und dann verwenden, um ein benutzerdefiniertes CSS für das Formular zu definieren.

So definieren Sie eine benutzerdefinierte CSS für das Formular :

  1. Klicken Sie rechten Bedienfeld auf CSS anzeigen“, um den CSS-Code zu überprüfen.

    Legen Sie die Hintergrundfarben für das Formular fest {width="450" modal="regular"}

  2. Wählen Sie den CSS-Code im Bildlauffenster aus und kopieren Sie ihn in die Zwischenablage.

  3. Klicken Sie auf Schließen.

  4. (Optional) Fügen Sie den kopierten Code in Ihr bevorzugtes CSS-Tool ein und bearbeiten Sie die CSS-Datei so, dass sie den gewünschten Stil widerspiegelt.

  5. Klicken im rechten Bedienfeld Benutzerdefiniertes CSS hinzufügen“.

  6. Fügen Sie den CSS-Code in das Fenster ein.

    Legen Sie die Hintergrundfarben für das Formular fest {width="450" modal="regular"}

    Sie können den eingefügten Text in diesem Fenster bearbeiten.

  7. Klicken Sie auf Speichern.

Manuelle Formatierung

Ändern Sie die Einstellungen im rechten Bedienfeld, um die Anzeige für das gesamte Formular zu definieren.

  • Hintergrundfarbe - Aktivieren Sie das Kontrollkästchen, um eine Hintergrundfarbe um den Formularbereich anzuwenden. Weiß ist die Standardfarbe. Klicken Sie auf das Farbfeld, um das Popup-Farbwähler zu öffnen und eine Farbe für den Formularhintergrund auszuwählen.

  • Viewport-: Aktivieren Sie das Kontrollkästchen, um eine Hintergrundfarbe auf alle Formularkomponenten anzuwenden. Der Standardwert ist „Keine Farbe“ (vom äußeren Hintergrund übernehmen). Klicken Sie auf das Farbfeld, um das Popup-Farbwähler zu öffnen und eine Farbe für die Formularkomponenten der Struktur auszuwählen.

    Legen Sie die Hintergrundfarben für das Formular fest {width="600" modal="regular"}

  • Text: Wählen Sie eine Schriftfamilie für das Formular aus, was sich auf die Beschriftungen, den Hinweis und den Platzhaltertext für Formularfelder auswirkt. Dies wirkt sich auch auf den Standardtext der Senden-Schaltfläche aus.

  • Größe - Ändern Sie die Größe (Breite) für das Formular in Pixel.

  • Spanne - Legt Ränder (in Pixeln) um die Formularkomponenten fest. Sie können denselben Rand auf allen vier Seiten festlegen oder das Kontrollkästchen Unterschiedlicher Rand für jede Seite aktivieren, um die horizontalen und vertikalen Ränder separat festzulegen.

    Legen Sie den Text, die Größe und die Ränder für das Formular fest {width="600" modal="regular"}

recommendation-more-help
6ef00091-a233-4243-8773-0da8461f7ef0