Sie sehen sich Hilfeinhalte der folgenden Version an:

Sie können die Darstellung und das Design eines adaptiven Formulars definieren, indem Sie die Stile mithilfe des Designs mithilfe des Designeditors angeben. Außerdem können Sie Inline-CSS-Stile auf einzelne Komponenten anwenden und die Änderungen direkt in der Vorschau anzeigen. Inline-Formatvorlagen überschreiben die Formatierung, die im Design bereitgestellt werden. 

Verwenden von Inline-CSS-Eigenschaften

Hinzufügen von Inline-Stilen zu einer Komponente:

  1. Öffnen Sie das Formular im Formular-Editor und ändern Sie den Modus in Stilmodus. Tippen Sie dazu in der Seitensymbolleiste auf > Stil

  2. Wählen Sie eine Komponente auf der Seite aus und tippen Sie auf die Schaltfläche „Bearbeiten“. In der Randleiste geöffnete Stileigenschaften.

    Sie können auch Komponenten aus der Hierarchiestruktur in der Seitenleiste auswählen. Die Hierarchiestruktur für das Formular ist als „Formularobjekte“ in der Seitenleiste verfügbar. 

    Sie können auch Komponenten in der Seitenleiste auswählen. Im Formatierungsmodus können Sie Komponenten sehen, die unter „Formularobjekte“ aufgeführt sind. Allerdings führt „Formularobjekte“ in der Seitenleiste Komponenten wie Felder und Bereiche auf. Felder und Bereiche sind generische Komponenten, die Komponenten wie Textfelder und Optionsschaltflächen enthalten können.

    Wenn Sie eine Komponente aus der Seitenleiste auswählen, sehen Sie alle aufgelisteten Unterkomponenten sowie die Eigenschaften der ausgewählten Komponente. Sie können eine bestimmte Unterkomponente auswählen und formatieren. 

  3. Klicken Sie auf eine Registerkarte in der Randleiste, um CSS-Eigenschaften festzulegen. Sie können Eigenschaften wie die folgenden angeben:

    • Abmessungen und Position (Anzeigeeinstellung, Auffüllung, Höhe, Breite, Ränder, Position, Z-Index, „float“, „clear“, Überlauf)
    • Text (Schriftfamilie, Stärke, Farbe, Größe, Zeilenhöhe und Ausrichtung)
    • Hintergrund (Bild und Verlauf, Hintergrundfarbe)
    • Rahmen (Breite, Stil, Farbe, Radius)
    • Effekte (Schatten, Deckkraft)
    • Erweitert (hier können Sie benutzerdefinierte CSS für die Komponente verwenden)
  4. Ebenso können Sie Designs für andere Teile einer Komponente wie Widgets, Beschriftung und Hilfe anwenden.

  5. Tippen Sie auf Fertig, um die Änderungen zu bestätigen oder auf Abbrechen, um die Änderungen zu verwerfen.

Beispiel: Inline-Stile für eine Feldkomponente

Die folgenden Bilder zeigen ein Textfeld, bevor und nachdem Inline-Stile darauf angewendet wurden.

Textfeldkomponente vor der Anwendung von Inline-Formatierung
Textfeldkomponente vor der Anwendung von Inline-Stil-Eigenschaften

Beachten Sie die Änderung im Textfeldstil in der folgenden Abbildung, nachdem die folgenden CSS-Eigenschaften angewendet wurden.

Selektor

CSS-Eigenschaft

Wert

Ergebnis

Feld

border

Border width =2px

Border style=Solid

Border color=#1111

Erstellt einen schwarzen, 2px breiten Rahmen um das Feld

Textfeld

background-color

#6495ED

Ändert die Hintergrundfarbe zu Kornblumenblau (#6495ED)

Hinweis: Sie können einen Farbnamen oder seinen Hexadezimalcode im Wertefeld angeben.

Bezeichnung

Abmessungen & Position > width

100px

Stellt die Breite als 100px für die Beschriftung ein

Feld Hilfe Symbol Text > Schriftfarbe #2ECC40 Ändert die Farbe des Hilfesymbols.

Lange Beschreibung

text-align

center

Richtet die Langbeschreibung für die Hilfe mittig aus

Textfelddesign nach der Anwendung von Inline-Formatierung
Textfeldkomponente nach der Anwendung der Inline-Stil-Eigenschaften

Wenn Sie den obigen Schritten folgen, können Sie andere Komponenten wie Bereiche, Sendeschaltflächen und Optionsschaltflächen auswählen und formatieren. 

Hinweis:

Designeigenschaften variieren je nach ausgewählter Komponente. 

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie