Hi meisterleise,
Danke. Der Links wäre: https://netaccess.gruenkraft.design/ Das Formuar ist ziemlich in der Mitte, bei "[size=18]Kostenloser Rückrufservice[/SIZE]".
Ich antworte zunächst mal zum Problem allgemein und dann zum Code.
Allgemein/ Plugin:
Es ist zum verrückt Werden. Jedes Mal, wenn ich ewas gestylt habe, hat es in irgendeinem Browser nicht funktioniert, in den anderen Browsern schon. Bis jetzt gingen mehrere Stunden Recherchezeit rauf und natürlich Rumprobieren, bis zum Geht nicht mehr. Daher frage ich mich, ob es nicht Sinn macht in Zukunft auf eine Alternative zu CF7 zu setzen.
Ärgerlich bei CF7 ist ja auch, dass der Versandt oft nicht klappt und man muss dann noch ein SMTP-Plugin installieren um den Versand zu ermöglichen. OK, das ist jetzt ein anderes Problem, aber trotzdem: das Bauteil "Kontaktformular" in einer Webseite ist extrem winzig und frisst sehr häufig Stunden bei der Konfiguration. Ich hätte lieber etwas, das "out of the box" klappt und nicht rumzickt. Das wäre eigentlich die wichtigste Frage, ob es so etwas gibt.
Derzeit habe ich diese Plugins entdeckt:
https://www.jotform.com
https://wpforms.com/
Hat da jemand Erfahrung damit? Wenn ich mir diesen Mist mit CF7 ersparen kann und auch einen Priority-Support habe, der mir ein Problem innerhalb von ein paar Minuten löst, zahle ich gerne. Wenn ich zahle, mir aber mit einem der Plugins einfach nur andere Probleme einhandle, dann lasse ich es lieber.
Aber jetzt zur Erklärung noch der Code:
Das hier ist der aktuelle Stand, im FF und Chrome funktionieren absurder Weise das Feld "Telefon" korrekt, das Feld "Name" nur in Chrome, aber nicht in FF. Ärgerlicher Weise kann ich :: placeholder nicht über JS ansprechen, sonst wäre das ja bereits gelöst.
#cf7_name::-webkit-input-placeholder,
#cf7_telefon::-webkit-input-placeholder {
color: #fff !important;
opacity: 1;
}
#cf7_name:-moz-placeholder,
#cf7_telefon:-moz-input-placeholder {
color: #fff !important;
opacity: 1;
}
#cf7_name::-moz-placeholder,
#cf7_telefon::-moz-input-placeholder {
color: #fff !important;
opacity: 1;
}
#cf7_name:-ms-input-placeholder,
#cf7_telefon:-webkit-input-placeholder {
color: #fff !important;
opacity: 1;
}
#cf7_name::placeholder,
#cf7_telefon::placeholder,
.wpcf7-form-control::placeholder,
.wpcf7-text::placeholder,
.wpcf7-validates-as-required::placeholder {
color: #fff !important;
opacity: 1;
}
Alles anzeigen