Trick # 528 | Dieser Beitrag beinhaltet 1721 Wörter. – Geschätzte Lesezeit: ca. 9 Minuten.
Die Formularfelder des Kontaktformular-Moduls im Divi-Theme werden normalerweise innerhalb der eigentlichen Felder angezeigt. Doch das lässt sich ändern: Die Feldbezeichnungen können auch links der Eingabefelder platziert werden. Wie das geht, zeigen wir Ihnen heute,
So wie nebenan zeigt sich das Kontaktformular-Modul des Divi-Themes üblicherweise:
Die Bezeichnungen der Formularfelder werden innerhalb der Eingabefelder angezeigt.
Doch diese Feldbezeichnungen lassen sich auch links des jeweiligen Eingabefeldes platzieren. Hierfür setzen Sie zunächst alle Eingabefelder (unter Design/Layout) auf «Volle Breite».
Weiter vergeben Sie dem Kontaktformuar-Modul eine CSS-Klasse namens «contact-form-labels-left». Diese tragen Sie im Tab «Erweitert» unter «CSS-ID und Klassen» ins Textfeld «CSS-Klasse» ein.
Und zuletzt benötigen Sie noch einen Block CSS-Code. Diesen kopieren Sie in das CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
@media (min-width:981px) {
.contact-form-labels-left .et_pb_contact_form_label {
display: block !important;
}
.contact-form-labels-left .et_pb_contact_field_options_title {
display: none;
}
.contact-form-labels-left input::placeholder,
.contact-form-labels-left textarea::placeholder {
color: transparent !important;
}
.contact-form-labels-left p.et_pb_contact_field {
display: flex;
align-items: start;
justify-content: flex-end;
gap: 2%;
}
.contact-form-labels-left p input,
.contact-form-labels-left p textarea,
.contact-form-labels-left .et_pb_contact_select {
width: 80%;
}
}Nun werden die Bezeichnungen der Eingabefelder im Feld selbst ausgeblendet und stattdessen links des Eingabfeldes angezeigt. So wie in diesem Beispiel:
Übrigens können Sie die Bezeichnungen auch über den Eingabefeldern anzeigen lassen. Hiezu haben wir einen Beitrag unter «Feldbeschriftungen im Divi-Kontaktformular über dem Eingabefeld anzeigen» parat.
Werbung
Bilder-Special – Trick #5: Coole 3D-Flip-Cards ganz einfach in HTML erstellen – komplett ohne Plugin
Werbung
