Erstellung eines Lanxess Form Buttons

Um eine Lanxess Button zu erstellen, muss man mehrere „Form elements“ und CSS-Klassen verwenden.

Zuerst nimmt man eine Section und setzt die CSS-Klassen „button“ und „button—bg-color-red“ darauf.

Screenshot Backend Button Section:

Darin kommen ein „Submit Button“ an dem später die Save Actions eingestellt werden.

Darunter kommen 2 weitere Sections und in diese kommen je ein Text-Element.

Screenshot Backend Form element Text:

Auf die erste Section schreibt man die CSS-Klassen „button__wrapper“, „button—default“ und „button—cta“.

Screenshot Backend Submit Section:

Auf die zweite Section schreibt man die CSS-Klassen „button__wrapper“ und „button—underline“.

Screenshot Backend Cancel Section:

In das Text-Feld des ersten Text-Elements kann man den Text für den Submit-Button eintragen, z. B. „Submit“.

Screenshot Backend Submit Button Text:

Auf das Text-Element schreibt man zusätzlich die CSS-Klasse „send-message“.

Screenshot Backend Submit Button CSS Class:

In das Text-Feld des zweiten Text-Elements kann man den Text für den Cancel-Button eintragen, z. B. „Cancel“.

Screenshot Backend Cancel Button Text:

Auf das Text-Element schreibt man zusätzlich die CSS-Klasse „button-cancel“.

Screenshot Backend Cancel Button CSS Class:

Im Frontend werden nun ein Button und ein Link für das Absenden und Abbrechen der Formularanfrage angezeigt.

Screenshot Frontend Submit and Cancel Button:

Damit mit dem Cancel-Button auch die vorher ausgefüllten Felder gelöscht werden, muss auf jedes Form-Element, was zurückgesetzt werden soll, die CSS-Klasse „js-clearable“ geschrieben werden.

Screenshot Backend Form element Reset: