Trick # 304 | Dieser Beitrag beinhaltet 1842 Wörter. – Geschätzte Lesezeit: ca. 10 Minuten.
Die meisten Kontaktformulare zeigen Beschriftungen über den Eingabefeldern. Im Divi-Formularmodul sind diese Feldbeschriftungen standardmässig nicht sichtbar. Mit einem CSS-Snippet werden die Beschriftungen eingeschaltet. Wir zeigen Ihnen, wie das geht.
Eigentlich ist das Divi-Kontaktformular ganz nett gemacht. Die Beschriftungen über den Feldern sind nämlich etwas aus der Mode gekommen – vielfach legen WebdesignerInnen Wert darauf, die Beschriftungen direkt im Feld anzuzeigen.
Das hat aber auch einen Haken: Sobald man erste Zeichen in die Felder eingibt, ist der eigentliche Zweck des Formularfeldes nicht mehr sichtbar. Das führt ab und an zu Verwirrungen.
Die Beschriftungen über den Feldern lassen sich aber hervorzaubern. Dazu dient der folgende CSS-Code, welchen Sie in das Stylesheet Ihrer WordPress-Installation kopieren. Unter Design/Customizer/Zusätzliches CSS:
.et_pb_contact_form label.et_pb_contact_form_label {
display: block !important;
font-weight: 700 !important;
}
.et_pb_contact_form .et_pb_contact_field_options_wrapper .et_pb_contact_field_options_title {
display: none;
}
.et_pb_contact_form ::-webkit-input-placeholder {
color: transparent !important;
}
.et_pb_contact_form.my_contact :-moz-placeholder {
color: transparent !important;
}
.et_pb_contact_form ::-moz-placeholder {
color: transparent !important;
}
.et_pb_contact_form :-ms-input-placeholder {
color: transparent !important;
}Das obige Formular sieht mit diesem Code so aus:
Der Code bedient sich eines kleinen Tricks: Tatsächlich sind nämlich in vielen Browsern die Bezeichnungen innerhalb der Felder noch enthalten. Ab Zeile 8 wird aber deren Farbe auf «transparent» festgelegt.
Damit ist auch nach einer Eingabe klar, welche Information im entsprechenden Feld genannt werden muss.
Übrigens können Sie die Bezeichnungen auch links der Eingabefelder anzeigen lassen. Hiezu haben wir einen Beitrag unter «Bezeichnungen der Divi-Formularfelder links anzeigen» parat.
Werbung
Werbung
