Trick # 389 | Dieser Beitrag beinhaltet 2125 Wörter. – Geschätzte Lesezeit: ca. 11 Minuten.
Das Kontaktformular-Modul des Divi-Themes zeigt die Namen der einzelnen Felder innerhalb des jeweiliegn Eingabefelds an. Nachteil: Beim ersten eingegebenen Zeichen verschwindet der Feldname. Das muss nicht sein – der Feldname lässt sich nämlich elegant verschieben. Ist gar nicht schwierig.
So wie nebenan zeigt sich das Kontaktformular im Divi-Theme von Haus aus:
Sobald ein Feld ausgefüllt wird, verschwindet dessen Beschriftung. Das möchten wir mit dem folgenden Hack ändern.
Zunächst müssen Sie allerdings dem gewünschten Formular eine CSS-Klasse zuweisen. Wir schlagen «floating-labels» vor. Fügen Sie diesen Begriff im Kontaktformular-Modul ein: Im Tab «Erweitert», dann unter «CSS-ID und Klassen» und dort ins Feld «CSS-Klasse».
Dann benötigen Sie noch das folgende Script. Fügen Sie es dem <head>-Bereich Ihrer Website hinzu – unter Divi/Theme-Optionen/Integration:
<script>
jQuery(document).ready(function ($) {
var $floatLabelInput = $(".floating-labels .input");
$floatLabelInput.on("focus", function (e) {
$(e.target).prev().addClass("active");
e.stopPropagation();
});
$floatLabelInput.on("blur", function (e) {
if (!$(e.target).val()) {
$(e.target).prev().removeClass("active");
} else {
$(e.target).prev().addClass("active");
}
});
});
</script>Zu guter Letzt folgt noch ein Block CSS-Code – diesen kopieren Sie in das CSS-Stylesheet Ihrer Website. Sie finden es im Backend unter Design/Customizer/Zusätzliches CSS:
.floating-labels p {
position: relative !important;
}
.floating-labels .et_pb_contact_form_label {
display: block !important;
visibility: hidden;
opacity: 0;
position: absolute;
top: 1em;
padding: 0 1em;
transform: translateY(0%);
transform-origin: left;
color: #000000;
font-size: 1.2em;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 0;
}
.floating-labels .et_pb_contact_form_label.active {
visibility: visible;
opacity: 0.6;
top:0;
transform: translateY(-100%) scale(0.9);
}
.et_pb_module.floating-labels form p .input::-webkit-input-placeholder {
-webkit-transition: all 0.4s;
transition: all 0.4s;
}
.et_pb_module.floating-labels form p .input::-moz-placeholder {
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.floating-labels form p .input:-ms-input-placeholder {
-ms-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.floating-labels form p .input:-moz-placeholder {
-moz-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.et_pb_module.floating-labels form p .input::placeholder {
transition: all 0.4s ease-in-out;
}
.et_pb_module.floating-labels form p .input:focus::-webkit-input-placeholder {
color: transparent !important;
}
.et_pb_module.floating-labels form p .input:focus::-moz-placeholder {
color: transparent !important;
}
.et_pb_module.floating-labels form p .input:focus:-moz-placeholder {
color: transparent !important;
}
.et_pb_module.floating-labels form p .input:focus:-ms-input-placeholder {
color: transparent !important;
}
.et_pb_module.floating-labels form p .input:focus::placeholder {
color: transparent !important;
}Voilà! Das Formular verhält sich nun wie nebenan gezeigt:
Probieren Sie es aus – füllen Sie ein oder mehrere Felder aus. Die Flednamen verschieben sich dabei jeweils nach oben.
Werbung
Werbung
