Stylbares Kontaktformulat gesucht

Hi community,
ich verwende Contact Form 7 sehr gerne, weil es sehr viele, proktische Möglichkeiten bietet. Nur beim Styling ist das Plugin ziemlich nervtötend. Das liegt natürlich daran, dass es auf HTML-Elemente zurückgreift, die nun mal schwer oder kaum zu stylen sind.

Aktuell habe ich das ärgerliche Problem, dass die Textfarbe in den Inputs (einfache Textfelder) nicht bei allen Browsern und in allen Feldern gleich ist, obwohl des das CSS klar vorgibt. Daher die Fragen:

1) Gibt es ein Plugin, dass genauso vielseitig wie CF7 ist, aber beim Styling einfacher zu nutzen ist. Z. B. indem es eine JS Bibliothek nutzt, mit der die Styles überlistet werden können.

2) Oder alternativ würde ich auch ein JS Plugin nutzen, das mir das Stylen der Elemente ermöglicht. Da habe ich mich ein wenig umgesehen, aber es gibt eigentlich vor allem jquery Plugins, die spezifisch einzelne Elemente anpassen. (z. B. Selectboxen) Kennt jemand eine Lösung für alle Elemente?

Danke für Tipps, vielleicht retten sie ja den verbleibenden Sonntagsrest doch noch. ;)
Raphael

OK, ich probiere es nochmals. Das leichter stylebare Formular scheint wohl WP-Forms zu sein. Aber wie auch immer: Das CSS hier müßte doch funktio9nieren:

.startseite_kontakt .wpcf7 input[type="text"],
.startseite_kontakt .wpcf7 input[type="tel"]    {
   color: #fff !important;
   background: red !important;
}


.startseite_kontakt .wpcf7::-webkit-input-placeholder,
.startseite_kontakt .wpcf7::-moz-input-placeholder {
    color: #fff !important;
    opacity: 1;
}[

Der Platzhalter ist im FF in pink und in Chrome ist er grau. :( Das nervt schon irgednwie. Hat jemand Ideen?
Danke
Raphael

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;
}

Ups, sorry. Das war mein Fehler. Ich hatte eine Eingabe im oberen Feld stehen und die wurde beim Reload nicht entfernt, dadurch war die Anzeige immer grau. Also der Code funktioniert jetzt doch. Super! ;)

Bleibt die andere Frage: Ob jemand Erfrahrungen mit Kontaktformularen hat, die nicht so rumzicken wie CF7, sondern out of the box problemlos funktionieren. CF7 kostet mich bei jedem Projekt ziemlich viel Zeit. Mal das eine Problem, dann das andere Problem. Diesmal war es halt recht extrem und hat mich auf die Idee gebracht Alternativen zu suchen.

Ja, klingt gut... wenn ich nicht mit dem Gutenberg-Editor und selbstgecodeten Themes arbeiten würde. Das ist halt von der Ladezeit her unschlagbar. Danke trotzdem. ;)