Sie können die Darstellung und Gestaltung eines adaptiven Formulars durch Angabe einer CSS-Datei oder einer Client-Bibliothek festlegen. Außerdem können Sie Inline-CSS-Stile auf einzelne Komponenten anwenden und die Änderungen direkt in der Vorschau anzeigen.

Anhand des nächsten Bilds einer Textkomponente erklären wir zuerst die verschiedenen Teile einer Komponente im adaptiven Formular, auf die Sie Formatvorlagen anwenden können.

Teile einer Komponente im adaptiven Formular

Folgende Teile einer Komponente im adaptiven Formular sind im Bild oben zu sehen:

A. Beschriftung: Beschriftung für die Komponente. 
B. Feld: Bereich, der alle Teile der Komponente umfasst
C. Widget: Bereich, in dem der Benutzer einen Wert für das Feld festlegt oder wählt
D. Hilfe: Kurzbeschreibung, Langbeschreibung und Hilfsanzeige für die Komponente

Hinweis:

Sie können nur das Aussehen der Beschriftung festlegen. Um Beschriftungstext zu ändern, verwenden Sie die Eigenschaft „Titel“ des Textfelds im Bearbeitungsmodus. Weitere Informationen finden Sie unter Seitensymbolleiste

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 die Komponente aus und tippen Sie auf die Schaltfläche „Bearbeiten“ . In der Randleiste geöffnete Stileigenschaften. 

  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 Stile für Widget, 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

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

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.

Registerkarte

CSS-Eigenschaft

Wert

Ergebnis

Feld

border

Border width =2px

Border color=solid black

Erstellt einen schwarzen, 2px breiten Rahmen um das Feld

Widget

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

Hilfe – Fragezeichen

color

green

Ändert die Farbe für die Hilfsanzeige in Grün

Hilfe – Langbeschreibung

text-align

center

Richtet die Langbeschreibung für die Hilfe mittig aus

Textfeldkomponente nach der Anwendung der Inline-Stil-Eigenschaften

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