Lesefortschritt:

Feldbeschriftungen im Divi-Kontaktformular über dem Eingabefeld anzeigen

27. Dezember 2023 | CSS-Stylesheet, Divi-Theme

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.

10 + 1 =

Die Beschriftungen über den Feldern lassen sich aber hervorzaubern. Dazu dient der folgende CSS-Code, welchen Sie in das Stylesheet Ihrer Word­Press-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.

13 + 8 =

Werbung

Header-Menu des Divi-Themes anpassen

Das Headermenu (auch «Primary Menu» genannt) lässt sich im Customizer des Divi Themes optisch verändern. Es geht aber noch viel besser: Mit CSS haben Sie weitaus mehr Möglichkeiten, das Styling anzupassen. Wir zeigen Ihnen wie.

Werbung

 

Pin It on Pinterest

Share This