Formular – Farbfelder für Farboptionen

[Findarato]

Hallo zusammen,

ich möchte gerne für einen Kunden ein Formular auf die Seite stellen, wo man verschiedene Farboptionen zur Auswahl hat. Hier wäre es natürlich gut, wenn jeder dieser Farben ein Kasten vor oder hinter dem Namen hat, wo man die Farbe noch mal sehen kann. Ein wenig schwierig zu erklären. Es soll in etwa so aussehen, wie in dem Screenshot vom Bestell-PDF:
Bildschirmfoto 2021-04-29 um 10.28.04.png

Ich hatte schon versucht, in dem Formular mit HTML zu arbeiten. Das wird aber von Contao ignoriert.

Weiß jemand eine Lösung?

Vielen Dank und liebe Grüße
Jörg

[Thoni]

Hallo,

ich weiß nicht, ob ich es richtig verstanden habe.

Du kannst dem Element eine ID geben und mit CSS die Farben einblenden.

Gruß
Thoni

[Findarato]

Hallo,

ich weiß nicht, ob ich es richtig verstanden habe.

Du kannst dem Element eine ID geben und mit CSS die Farben einblenden.

Gruß
Thoni

Das verstehe ich jetzt wiederrum nicht. ;-) Wie kann ich einem einzelnen Feld eine ID geben?

Ich möchte ein Checkbox Formular erstellen, wo nur eine Option möglich ist. Neben den Checkboxen sollen die möglichen Farben stehen, aber auch ein Farbfeld mit der jeweiligen Farbe zu sehen sein. Der Kunde kann somit die Farbe direkt sehen und nicht nur den Farbnamen (z.B. Kobaltblau) lesen.

Gruß

[cliffparnitzky]

Du legst ja ein Formularfeld "Checkbox-Menü" an.

Darin definierst du die Optionen.

Beim Generieren im Frontend erhält die Checkbox eine CSS ID à la "opt_49_0" (die 49 ist die ID des Feldes ... die 0 ist die fortlaufende Nummer der Optionen).

Zusätzlich wir der Text in einem <label> ausgegeben. Dieses hat eine CSS ID à la "lbl_49_0".

So kannst du die Label mit CSS einfärben.

Ist aber alles in allem eher nicht sondernlich komfortabel.

[Findarato]

Hallo Cliff,
das ist auf jeden Fall eine Möglichkeit. ist nicht ganz was ich mir vorgestellt habe, aber eine gute Idee. Vielen Dank dafür.

Ich hätte gerne das Farbfeld und den Namen voneinander getrennt. Also erst das Farbfeld, anschließend dahinter den Namen der Farbe.
Wenn noch jemand eine Idee hat, gerne her damit.

Ansonsten werde ich das Formular wohl so aufbauen.

LG

[mlweb]

Auch das sollte damit gehen mit ::before

[cliffparnitzky]

Na gut, das ginge im Grunde auch recht einfach indem du das Template für das Formularfeld anpasst.

Noch schöner wäre es dann, die Konfigurationsmöglichkeit des Formularfeldes so anzupassen, dass man dort auch den Ferbwert (z.B. HEX) eingeben/auswählen kann und der dann auch gleich ins Frontend übernommen wird.

[Findarato]

Mit ::before ist sicherlich eine sehr gute Idee. Jetzt muss ich erst mal schauen, wie ich damit umgehe. Damit habe ich noch nicht gearbeitet.
Ich muss dem ::before ja dann irgendwie mitteilen, dass es eine gewisse Größe, background-color und Abstand hat.

Das Template anzupassen wäre natürlich eine komfortable Sache. Traue ich mir aber nicht zu. Später vielleicht mal.

Danke auf jeden Fall schon mal.

[cliffparnitzky]

Ansonsten Kleinstauftrag -> https://community.contao.org/de/foru...Auftr%C3%A4ge)

[mlweb]

Du brauchst für ::before in dem Fall m.E. nur einen leeren content, eine entsprechende Breite und Höhe und musst das Element platzieren. Alles kein Hexenwerk.
Allerdings würde ich je nach Anwendungsfall auch eine Auswahl im Backend recht charmant finden.