[Anleitung] Ändern der Textfarbe für den Platzhalter für das Kontaktformular 7

Wussten Sie, dass Sie mit Contact Form 7 die Farbe des Platzhaltertextes ändern können?

Wenn Sie Contact Form 7 schon einmal verwendet haben, ist Ihnen vielleicht aufgefallen, dass es eine Standardtextfarbe für Platzhalter hat. Sie können den Platzhaltertext mit den integrierten Optionen von Contact Form 7 anpassen – oder sogar mit CSS anpassen!

In diesem Artikel wird gezeigt, wie Sie die Platzhaltertextfarbe von Kontaktformular 7 ändern und Codebeispiele für beide Methoden bereitstellen.

Wir haben festgestellt, dass viele Kunden in unserem Support-Forum Probleme beim Festlegen oder Ändern der Schriftfarbe des Platzhaltertexts in Kontaktformular 7 haben.

Kontaktformular 7 ist heute eines der beliebtesten WordPress-Plugins, mit dem Sie einfache oder komplexe Kontaktformulare auf Ihrer WordPress-Site erstellen können. Wir haben schon geschrieben So beheben Sie Fehler beim Senden von Contact Form 7-Nachrichten.

Wir zeigen Ihnen, wie Sie die Textfarbe mit benutzerdefiniertem Code anpassen: Wenn Sie mit der Codierung nicht vertraut sind, aber ein einfacheres und benutzerfreundlicheres Formularerstellungs-Plugin benötigen, probieren Sie WPForms aus.

CSS für CF7-Platzhaltertext

::-webkit-input-placeholder { /* WebKit browsers */
    color: #000 !important;
    opacity: 1;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000 !important;
    opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000 !important;
    opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #000 !important;
    opacity: 1;
}

Verwenden Sie !wichtiges Tag

Das Tag "!important" wird verwendet, um sicherzustellen, dass keine anderen Stile auf diese CSS-Selektoren angewendet werden. Dadurch wird sichergestellt, dass der Stil funktioniert. Wenn Sie möchten, dass der Stil nur in den Feldern des Kontaktformulars 7 verwendet wird, können Sie dies verwenden:

.wpcf7::-webkit-input-placeholder { /* WebKit-Browser */ color: #000 !important; Opazität: 1; }

Wenn Sie ein bestimmtes Kontaktformular auf Ihrer Website verfügbar machen müssen, ohne andere Kontaktformulare zu ändern 7, suchen Sie wie folgt nach der Formularkennung:

Klicken Sie mit der rechten Maustaste auf das betreffende Element und wählen Sie Element prüfen. Tastenkombinationen: F11 (Windows) oder CMD + SHIFT + C (MAC) Suchen Sie die ID und ersetzen Sie 'wpcf_id' durch sie in diesem Code:

#wpcf_id::placeholder { color: #000 !important; Opazität: 1; }

Fühlen Sie sich frei, unten eine Bemerkung zu hinterlassen oder eine Frage zu stellen!

Über den Autor

Autor: David AttardWebsite: https://www.linkedin.com/in/dattard/

David arbeitet seit 18 Jahren in oder um die Online- / Digitalbranche. Er verfügt über umfangreiche Erfahrung in der Software- und Webdesignbranche mit WordPress, Joomla und den sie umgebenden Nischen. Als digitaler Berater konzentriert er sich darauf, Unternehmen durch die Kombination ihrer Website und der heute verfügbaren digitalen Plattformen einen Wettbewerbsvorteil zu verschaffen.