Lesefortschritt:

Feldbeschriftungen im Divi-Kontaktformular über dem Eingabefeld anzeigen

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

Dieser Beitrag beinhaltet 1704 Wörter. – Geschätzte Lesezeit: ca. 9 Minuten.

Die meisten Kontaktformulare zeigen Beschriftungen über den Eingabefeldern. Im Divi-Formularmodul sind diese Feldbeschriftungen standardmässig ausgeblendet. 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.

13 + 11 =

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.

9 + 14 =

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This