Label bei Formularen anzeigen

Shopware 5 Themes & Design
1

In Shopware 5 werden bei Formularen (z.B. Kontakt) keine Labels über den Feldern gezeigt, sondern das Feld wird über den Placeholder gekennzeichnet. Ich würde das gerne ändern und bin auf einen 5 Jahre alten Post gestoßen, in dem gesagt wurde, es gäbe keine Backend-Funktion, sondern man müsse das in den .tpl-Dateien anpassen:

https://forum.shopware.com/discussion/32016/placeholder-statt-labels-bei-formularen

Was mich jetzt irritiert ist, dass es im Theme Manager unter “Formulare” direkt oben als erstes eine Option zum stylen von Labels gibt. Wenn ich jetzt Label statt Placeholder anzeigen möchte: Wie mache ich das am geschicktesten? Ich habe mich schon durch das Git-Repository gekämpft und wüsste auch einfach nicht, wo ich die .tpl-Dateien für Formulare finde, die diese Änderung global allen Formularen hinzufügt.

Shopware-Version: 5.6.9

2

Weiß niemand Rat? *schnief* Push

3

Tja scheinbar gibt es Styling für das label Element. Im Code gibt es aber keine Labels. Man müsste sie wohl erst einsetzen, da hat sich seit 5 Jahren nichts getan.

4

Man kann auf die Labels auch verzichten und ein Pseudo Element einhängen. 

Grob würde das so aussehen beim Kontaktformular:

#support .forms--inner-form.panel--body div:nth-child(0n+1):before{content: "Erstes Feld";}
#support .forms--inner-form.panel--body div:nth-child(0n+2):before{content: "Zweites Feld";}
#support .forms--inner-form.panel--body div:nth-child(0n+3):before{content: "Drittes Feld";}
#support .forms--inner-form.panel--body div:nth-child(0n+4):before{content: "Viertes Feld";}
...

Da muss aber dann auch die Reihenfolge stimmen :wink: und man müsste noch die input.selects in der Weite anpassen

Einzige Alternative dazu wäre die Formulare im Template zu machen.

1 „Gefällt mir“
5

Gute Frage, wäre mal zu testen, wenn man dazu kommt.

6

Super, vielen Dank! Die Idee mit den Pseudoelementen find ich schon ziemlich clever. Darauf wäre ich jetzt nicht gekommen :smiley: Mal gucken, ob sich das umsetzen lässt.

@NextMike‍ Das Mysterium der Label-Optionen ist übrigens gelüftet. Das styled dann z.B. den Text von Checkboxen wie z.B. die Beschreibung der Datenschutz-Einwilligung.

7

Noch eine kleine Info warum das CSS so lang ist: Man kann an Input Felder selbst kein :before hängen, deswegen muss man die Eltern-Elemente nehmen. Und weil die Elternelemente aber alle keine ID haben nimmt man wiederum deren Elternelement und hangelt sich dann durch. Es funktioniert. Nur man muss etwas Geduld haben und Rumtesten

8

Oh ha, das hab ich tatsächlich noch gar nicht machen müssen, daher besten Dank für den Tipp. Wahrscheinlich hätte ich mich nachher gewundert, warum das nicht funktioniert :smiley:

9

Hallo,

also ich würde einfach das Label des Feldes, das ja als Platzhalter (placeholder) verwendet wird (siehe: https://github.com/shopware/shopware/blob/5.7/engine/Shopware/Controllers/Frontend/Forms.php#L312 ) , vor diesem Shopware Block https://github.com/shopware/shopware/blob/5.7/themes/Frontend/Bare/frontend/forms/form-elements.tpl#L12 noch als Label ausgeben lassen. Fertig.

Grüße

Sebastian

1 „Gefällt mir“
10

@sschreier schrieb:

Hallo,

also ich würde einfach das Label des Feldes, das ja als Platzhalter (placeholder) verwendet wird (siehe: https://github.com/shopware/shopware/blob/5.7/engine/Shopware/Controllers/Frontend/Forms.php#L312 ) , vor diesem Shopware Block https://github.com/shopware/shopware/blob/5.7/themes/Frontend/Bare/frontend/forms/form-elements.tpl#L12 noch als Label ausgeben lassen. Fertig.

Grüße

Sebastian

so hätte ich das auch gemacht

11

Japp, das hat genau so geklappt :slight_smile: Vielen Dank für die Hilfe!